OKLCH हार्मोनाइज़र

OKLCH स्पेस में रंग (hue) को घुमाएं और प्रकाश (lightness) को स्टेप करें — यही सामंजस्य नियम, लेकिन HSL की तुलना में पैलेट बेहतर दिखते हैं। प्रत्येक व्युत्पन्न स्वैच को स्वतंत्र रूप से ट्यून किया जा सकता है, साथ में लाइव WCAG कंट्रास्ट भी।

#2b9d8f

आधारसफ़ेद के विरुद्ध 3.3 · काले के विरुद्ध 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°सफ़ेद के विरुद्ध 3.6 · काले के विरुद्ध 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°सफ़ेद के विरुद्ध 3.6 · काले के विरुद्ध 5.9

L · 63%C · 0.101H · 63°

निर्यात करें

बोर्ड में खोलें

:root {
  --harmony-1: #2b9d8f;
  --harmony-2: #957abc;
  --harmony-3: #b47b44;
}

[
  {
    "hex": "#2b9d8f",
    "oklch": "oklch(63.0% 0.101 183.0)",
    "role": "base"
  },
  {
    "hex": "#957abc",
    "oklch": "oklch(63.0% 0.101 303.0)",
    "role": "harmony-2"
  },
  {
    "hex": "#b47b44",
    "oklch": "oklch(63.0% 0.101 63.0)",
    "role": "harmony-3"
  }
]

OKLCH सामंजस्य को तीन चरणों में उत्पन्न करें

प्रत्येक चरण में लाइव कंट्रास्ट और गैमट मैपिंग के साथ अवधारणात्मक रूप से एकरूप सामंजस्य।

01
आधार और नियम
HEX टाइप करें या रैंडमाइज़ करें, फिर पूरक, स्प्लिट-कम्प्लीमेंट्री, त्रिक, चतुर्भुज, समरूप या एकवर्णी चुनें।
02
ठीक-ट्यून करें
प्रत्युत्पन्न स्वैच में OKLCH स्थान में L/C/H स्लाइडर होते हैं; गैमट से बाहर के मान निकटतम प्रदर्शनीय रंग में मैप होते हैं।
03
निर्यात करें
सफ़ेद/काले के विरुद्ध लाइव कंट्रास्ट देखें, CSS वेरिएबल या JSON कॉपी करें, या पूरे सेट को पैलेट बोर्ड पर भेजें।

हार्मोनाइज़र FAQ

OKLCH सामंजस्य के बारे में तीन सामान्य प्रश्न।

OKLCH सामंजस्य व्हील-आधारित सामंजस्य से कैसे भिन्न है?: HSL में, "समान प्रकाशमान" अनुभूति की दृष्टि से समान नहीं है — घुमाए गए पीले चमकते हैं और नीले फीके पड़ जाते हैं। OKLCH अनुभूति की दृष्टि से एकसमान है, इसलिए रंग घुमाव वास्तव में प्रकाशमान और वर्णक को संरक्षित करता है, जिससे स्वाभाविक रूप से संतुलित पैलेट मिलते हैं।
क्या होगा यदि कोई स्लाइडर स्क्रीन गैमट से बाहर चला जाए?: OKLCH स space sRGB से बड़ा है। गैमट से बाहर के मान स्वचालित रूप से निकटता से प्रदर्शन योग्य रंग में मैप हो जाते हैं, इसलिए जो HEX आप देखते हैं वह वही HEX है जिसका आप उपयोग कर सकते हैं।
परिणाम को अपनी परियोजना में कैसे उपयोग करें?: निर्यात क्षेत्र से :root CSS वेरिएबल या JSON कॉपी करें, या सेट को पैलेट बोर्ड में खोलें ताकि लॉक कर सकें, फिर से रोल कर सकें और PNG/ASE और अन्य प्रारूप निर्यात कर सकें।

परिणाम मिलने के बाद

यहां से आगे बढ़ें और रंगों को काम में लाएं।

रंग चक्र

आधार चुनने के लिए चक्र को ड्रैग करें, लाइव छः सामंजस्य योजनाएं प्राप्त करें, बोर्ड में खोलें या PNG निर्यात करें।

OKLCH एडिटर

लाइव प्रीव्यू और oklch() / HEX / RGB आउटपुट के साथ अवधारणात्मक रूप से एकसमान OKLCH स्पेस में L / C / H को ट्यून करें।

सिमेंटिक यूआई पैलेट

एक ब्रांड रंग डालें, प्राइमरी / सेकेंडरी / सफलता / चेतावनी / खतरा प्राप्त करें — Tailwind कॉन्फ़िगरेशन और CSS वेरिएबल के रूप में निर्यात करें।

पैलेट बोर्ड

स्पेसबार से रैंडमाइज़ करें, लॉक करें, पुनः क्रमबद्ध करने के लिए ड्रैग करें, URL से साझा करें - वह सब कुछ जो एक पैलेट बोर्ड को करना चाहिए।

OKLCH हार्मोनाइज़र

[ { "hex": "#2b9d8f", "oklch": "oklch(63.0% 0.101 183.0)", "role": "base" }, { "hex": "#957abc", "oklch": "oklch(63.0% 0.101 303.0)", "role": "harmony-2" }, { "hex": "#b47b44", "oklch": "oklch(63.0% 0.101 63.0)", "role": "harmony-3" } ]

OKLCH सामंजस्य को तीन चरणों में उत्पन्न करें

आधार और नियम

HEX टाइप करें या रैंडमाइज़ करें, फिर पूरक, स्प्लिट-कम्प्लीमेंट्री, त्रिक, चतुर्भुज, समरूप या एकवर्णी चुनें।

ठीक-ट्यून करें

प्रत्युत्पन्न स्वैच में OKLCH स्थान में L/C/H स्लाइडर होते हैं; गैमट से बाहर के मान निकटतम प्रदर्शनीय रंग में मैप होते हैं।

निर्यात करें

सफ़ेद/काले के विरुद्ध लाइव कंट्रास्ट देखें, CSS वेरिएबल या JSON कॉपी करें, या पूरे सेट को पैलेट बोर्ड पर भेजें।

हार्मोनाइज़र FAQ

OKLCH सामंजस्य के बारे में तीन सामान्य प्रश्न।

OKLCH सामंजस्य व्हील-आधारित सामंजस्य से कैसे भिन्न है?

HSL में, "समान प्रकाशमान" अनुभूति की दृष्टि से समान नहीं है — घुमाए गए पीले चमकते हैं और नीले फीके पड़ जाते हैं। OKLCH अनुभूति की दृष्टि से एकसमान है, इसलिए रंग घुमाव वास्तव में प्रकाशमान और वर्णक को संरक्षित करता है, जिससे स्वाभाविक रूप से संतुलित पैलेट मिलते हैं।

क्या होगा यदि कोई स्लाइडर स्क्रीन गैमट से बाहर चला जाए?

OKLCH स space sRGB से बड़ा है। गैमट से बाहर के मान स्वचालित रूप से निकटता से प्रदर्शन योग्य रंग में मैप हो जाते हैं, इसलिए जो HEX आप देखते हैं वह वही HEX है जिसका आप उपयोग कर सकते हैं।

परिणाम को अपनी परियोजना में कैसे उपयोग करें?

निर्यात क्षेत्र से :root CSS वेरिएबल या JSON कॉपी करें, या सेट को पैलेट बोर्ड में खोलें ताकि लॉक कर सकें, फिर से रोल कर सकें और PNG/ASE और अन्य प्रारूप निर्यात कर सकें।