आधुनिक CSS में OKLCH कलर: यह क्यों जीतता है और इसे प्रोडक्शन में कैसे भेजें

OKLCH पहला ऐसा कलर स्पेस है जो CSS में आया और जिसके बारे में डिज़ाइनर सच में तर्क कर सकते हैं। जो टीमें अब भी hex में पैलेट बना रही हैं, वे चुपचाप हर कंट्रास्ट और डार्क-मोड की बहस हार रही हैं, और उन्हें पता भी नहीं कि वे वह बहस लड़ रही थीं।

Hex कभी कलर स्पेस था ही नहीं, वह एक सीरियलाइज़ेशन था

Hex दरअसल sRGB का शॉर्टहैंड है। #4A90E2 कोई कलर स्पेसिफिकेशन नहीं है, यह लाल, हरे और नीले चैनल की तीन वैल्यू का छह अक्षरों में सिमटा हुआ रूप है। sRGB 1990 के शुरुआती दशक में CRT मॉनिटरों के लिए बना था, इंसानी दृश्य धारणा के लिए नहीं।

नतीजा यह कि आपके पैलेट में दो hex वैल्यू एक ही संख्यात्मक "ब्राइटनेस" जगह पर बैठी हों, फिर भी आपकी आँखों को बिल्कुल अलग दिखती हैं। ज़्यादातर डिज़ाइन सिस्टम में blue-500, yellow-500 से गहरा दिखता है, भले ही रैंप में दोनों की सापेक्ष जगह एक जैसी हो। यह पसंद की समस्या नहीं है। यह गणित की समस्या है जो कोऑर्डिनेट सिस्टम में ही बैठी है।

"Hex कभी कलर स्पेस था ही नहीं, वह एक सीरियलाइज़ेशन था, और तब से हम लाइटनेस पर बहस कर रहे हैं।"

HSL ने ठीक करने का दिखावा किया, ठीक किया नहीं

HSL आया और डिज़ाइनरों को भाषा दे गया: hue, saturation, lightness। यह एक सिस्टम जैसा लगा। था नहीं। HSL का लाइटनेस चैनल अंदर से अब भी sRGB वैल्यू पर ही मैप होता है, यानी HSL को वही परसेप्चुअल समस्याएँ विरासत में मिलीं जो hex में हैं।

hsl(220, 70%, 50%) और hsl(45, 70%, 50%) नाम के लिए एक ही लाइटनेस के हैं। दोनों को साथ-साथ खोलकर देखिए। पीला साफ़ तौर पर काफ़ी हल्का दिखता है। HSL ने आपको उसी टूटे गणित के लिए बस बेहतर शब्द दिए।

OKLCH परसेप्चुअली यूनिफॉर्म है

OKLCH OKLab कलर स्पेस पर बना है, जिसे Björn Ottosson ने 2020 में खास तौर पर पुराने स्पेसों की परसेप्चुअल गैर-एकरूपता दूर करने के लिए विकसित किया। OKLCH में L का मतलब है महसूस की गई लाइटनेस, जो इस हिसाब से कैलिब्रेट की गई है कि इंसानी विज़ुअल सिस्टम रोशनी पर असल में कैसे प्रतिक्रिया देता है।

OKLCH में बराबर L वैल्यू का मतलब है बराबर महसूस की गई ब्राइटनेस। लगभग बराबर नहीं। "अक्सर बराबर, अगर क्रोमा मिलता-जुलता हो" भी नहीं। बराबर। यह वह गुण है जो इससे पहले कोई CSS कलर स्पेस नहीं दे सका, और यह पैलेट जनरेशन के बारे में आपके सोचने का तरीका पूरी तरह बदल देता है।

OKLCH के जीतने के तीन कारण

परसेप्चुअली यूनिफॉर्म लाइटनेस, अनुमान योग्य hue इंटरपोलेशन, और वाइड-गैमट सपोर्ट। इनमें से हर एक आपके मौजूदा पैलेट के एक ख़ास बग को ठीक करता है, और साथ मिलकर ये ऐसा कलर वर्कफ़्लो बनाते हैं जो थीम, कॉम्पोनेंट और डिस्प्ले प्रकारों में स्केल होता है।

पहला कारण: लाइटनेस ड्रिफ्ट खत्म

hex और HSL सिस्टम में लाइटनेस ड्रिफ्ट वह अदृश्य टैक्स है जो आप हर पैलेट पर चुकाते हैं। आप blue-50 और amber-50 को आँख से ठीक लगने वाली वैल्यू पर सेट करते हैं, अलग-अलग स्क्रीन पर वे बिखर जाते हैं, डार्क मोड में आपस में लड़ते हैं, और कंट्रास्ट का गणित कभी पूरी तरह नहीं बैठता।

OKLCH में blue-50 और amber-50 का लाइटनेस नंबर एक ही है, और वह नंबर वही महसूस की गई ब्राइटनेस दर्शाता है। Tailwind v4 ने अपना पूरा पैलेट ठीक इसी वजह से OKLCH पर माइग्रेट किया। अगर आप Radix UI के कलर स्केल इस्तेमाल करते हैं, तो आपको परसेप्चुअल यूनिफॉर्मिटी का फ़ायदा पहले से मिल रहा है, भले ही डॉक्यूमेंटेशन में आपने OKLCH शब्द कभी देखा न हो।

दूसरा कारण: hue इंटरपोलेशन समझदार है

sRGB इंटरपोलेशन वाले CSS ग्रेडिएंट RGB कलर क्यूब से होकर गुज़रते हैं, परसेप्चुअल स्पेस से नहीं। sRGB में नीले से पीले का ग्रेडिएंट बीच में कीचड़ जैसे ग्रे से गुज़रता है, क्योंकि RGB का विकर्ण एक्रोमैटिक अक्ष के पास से कटता है। यह कलात्मक नहीं है। यह ज्यामिति की दुर्घटना है।

OKLCH ग्रेडिएंट इंटरपोलेशन hue एंगल को परसेप्चुअल रिंग पर चलाता है। OKLCH में नीले से पीला cyan और हरे से होकर जाता है, जो आपकी आँख की अपेक्षा है। ग्रे का कीचड़ ग़ायब। यह UI ग्रेडिएंट, एनिमेटेड कलर ट्रांज़िशन और बीच के स्टेप बनाने वाले हर पैलेट जनरेशन टूल के लिए मायने रखता है।

तीसरा कारण: P3 और Rec2020 पहुँच में हैं

Hex sRGB के बाहर के रंग बता ही नहीं सकता। 2016 के बाद का हर iPhone, वाइड-गैमट पैनल वाला हर आधुनिक लैपटॉप और ज़्यादातर नए कंज़्यूमर मॉनिटर ऐसे रंग दिखा सकते हैं जो P3 गैमट में हैं पर जिनका कोई hex पता नहीं। आप गहरे, जीवंत रंग मेज़ पर छोड़ते आ रहे हैं, क्योंकि आपका कोऑर्डिनेट सिस्टम उन्हें नाम ही नहीं दे सकता था।

OKLCH P3 और Rec2020 रंगों को सीधे बयान कर सकता है। oklch(0.60 0.28 260) एक जीवंत नीला है जो P3 में है पर sRGB गैमट से बाहर। आधुनिक ब्राउज़र जानते हैं इसका क्या करना है, और Apple का Display P3 कलर मार्गदर्शन सालों से इसी दिशा में इशारा कर रहा है। जो डिज़ाइन सिस्टम अभी OKLCH पर जाता है, वह तब भी तैयार रहेगा जब P3 डिफ़ॉल्ट अपेक्षा बन जाएगा।

hex से OKLCH तक चार चरणों का माइग्रेशन

ऑडिट, कन्वर्ट, रीजनरेट, री-ऑडिट। प्रिमिटिव टोकन के लिए माइग्रेशन यांत्रिक है, और सिमैंटिक टोकन के लिए विवेक चाहिए। मध्यम आकार के डिज़ाइन सिस्टम का पूरा माइग्रेशन हफ़्तों नहीं, दिनों में हो जाता है। शुरू करने से पहले नए टोकन को साफ़ Figma variables आर्किटेक्चर में जमा लेना सबसे ज़्यादा समय बचाता है।

चरण एक: मौजूदा पैलेट का ऑडिट

अपने सिस्टम का हर कलर टोकन एक्सपोर्ट कीजिए। oklch.com या PostCSS OKLCH प्लगइन जैसे टूल से हर hex वैल्यू को OKLCH में बदलिए। L वैल्यू से सॉर्ट कीजिए और अलग-अलग hue में लाइटनेस कॉलम देखिए।

बग तुरंत खुद सामने आ जाते हैं। Blue-300 L=0.72 पर बैठेगा जबकि yellow-300 L=0.87 पर। जिन टोकन को बराबर विज़ुअल वज़न का होना था, वे कहीं पास भी नहीं हैं। यही ऑडिट वह सबूत है जिससे माइग्रेशन का फ़ैसला किसी भी विरोध करने वाले को आसानी से समझाया जा सकता है।

चरण दो: प्रिमिटिव को OKLCH में बदलिए

प्रिमिटिव स्केल लीजिए, यानी सिमैंटिक टोकन नहीं बल्कि कच्चा क्रमांकित रैंप, और उसे OKLCH में बदलिए। ग्यारहों स्टॉप पर लाइटनेस वैल्यू को एकसमान स्टेप में राउंड कीजिए: 0.97, 0.93, 0.86, 0.75, 0.65, 0.54, 0.45, 0.37, 0.27, 0.19, 0.13।

मूल hex वैल्यू को हूबहू बचाने की कोशिश मत कीजिए। मक़सद असंगति ठीक करना है। बदला हुआ blue-500 और बदला हुआ red-500 पुरानी वैल्यू से पिक्सेल-दर-पिक्सेल एक जैसे नहीं होंगे, और पूरा लक्ष्य यही है। सिस्टम बेहतर हो रहा है, सिर्फ़ अलग नहीं।

चरण तीन: रैंप फिर से जनरेट कीजिए

साफ़, एकसमान लाइटनेस स्टेप के साथ अलग-अलग hue में रैंप दोबारा बनाना टेबल का ऑपरेशन बन जाता है। L कॉलम सेट कीजिए, हर hue का क्रोमा चुनिए (नीले आम तौर पर क्लिप होने से पहले भूरे और पीले से ज़्यादा क्रोमा सँभालते हैं), H कॉलम एडजस्ट कीजिए, और जनरेट कीजिए।

नतीजा यह कि आपके सिस्टम में पहली बार blue-500 और red-500 एक ही विज़ुअल वज़न के लगते हैं। ब्रांड कलर पैलेट के जो फ़ैसले पहले मनमाने अंदाज़े थे, वे अब सिद्धांत वाले चुनाव बन जाते हैं जिनके पास इशारा करने को एक कोऑर्डिनेट है।

चरण चार: एक्सेसिबिलिटी का री-ऑडिट

नया पैलेट, नया कंट्रास्ट पास। OKLCH कंट्रास्ट का अनुमान आसान बनाता है क्योंकि लाइटनेस अब वही कहती है जो उसका मतलब है। ज्ञात L वैल्यू वाले दो टोकन जोड़ने पर चेकर खोलने से पहले ही आपके पास उनके कंट्रास्ट रेशियो का मज़बूत अनुमान होता है।

सभी सिमैंटिक टोकन जोड़ियों पर WCAG और APCA कंट्रास्ट चेक चलाइए। जो जोड़ियाँ अब ज़रूरतें पूरी नहीं करतीं उन्हें फ़्लैग कीजिए और फ़ेल होने वाले टोकन का क्रोमा या लाइटनेस एडजस्ट कीजिए। OKLCH पैलेट पर सही एक्सेसिबल कलर कंट्रास्ट पास आम तौर पर hex पैलेट के बराबर पास से कम चौंकाने वाली चीज़ें निकालता है, क्योंकि लाइटनेस स्टेप पहले ग़लत थे और अब नहीं हैं।

---

ऐसा कलर सिस्टम चाहिए जो मोड, hue और आधुनिक डिस्प्ले में बिना लाइटनेस ड्रिफ्ट के टिके? Brainy OKLCH-नेटिव पैलेट सिस्टम डिज़ाइन करता है, जो Figma variables, CSS कस्टम प्रॉपर्टी और Tailwind टोकन के रूप में शिप होते हैं, कंट्रास्ट पास पहले से हो चुका।

---

OKLCH के चार जाल

गैमट के बाहर क्लैम्पिंग, क्रोमा क्लिपिंग, अल्फ़ा हैंडलिंग और टूलिंग की कमियाँ। OKLCH में नई टीमों को इनमें से हर एक काटता है, और हर एक का ख़ास समाधान है जो पता चलते ही मिनटों में लग जाता है।

गैमट वाली दिक्कत सबसे ज़्यादा चुभती है। जब आप oklch(0.60 0.32 260) लिखते हैं, वह क्रोमा वैल्यू sRGB से बाहर है। डेस्कटॉप ब्राउज़र इसे निकटतम sRGB रंग पर क्लैम्प करके सँभालते हैं, जिससे दिखने वाला hue खिसक सकता है। समाधान या तो बेस टोकन के लिए sRGB-सुरक्षित क्रोमा में रहना है, या वाइड-गैमट वैल्यू को मीडिया क्वेरी के पीछे रखना और ऊपर फ़ॉलबैक डिक्लेरेशन रखना।

काम करने वाला OKLCH पैलेट रैंप

एकसमान लाइटनेस स्टेप पर 11 स्टेप का व्यावहारिक रैंप, रेफ़रेंस के तौर पर hue 260 का नीला। लाइटनेस स्टेप आपके सिस्टम के हर hue में एक जैसे हैं। हर कलर फ़ैमिली में सिर्फ़ क्रोमा और hue बदलते हैं।

:root { --blue-50: oklch(0.97 0.02 260); --blue-100: oklch(0.93 0.05 260); --blue-200: oklch(0.86 0.09 260); --blue-300: oklch(0.75 0.14 260); --blue-400: oklch(0.65 0.18 260); --blue-500: oklch(0.54 0.22 260); --blue-600: oklch(0.45 0.20 260); --blue-700: oklch(0.37 0.17 260); --blue-800: oklch(0.27 0.13 260); --blue-900: oklch(0.19 0.09 260); --blue-950: oklch(0.13 0.06 260); }

लाल (hue 25), एम्बर (hue 75) या हरा (hue 145) बनाने के लिए ग्यारहों स्टॉप पर L कॉलम एक जैसा रखिए। C को hue की प्राकृतिक क्रोमा क्षमता के हिसाब से एडजस्ट कीजिए: पीले और हरे sRGB से बाहर क्लिप होने से पहले नीले से कम क्रोमा सँभालते हैं। H को अपने लक्ष्य hue पर सेट कीजिए। बस, यही पूरा पैलेट सिस्टम है।

इस रैंप पर बना डार्क मोड कलर सिस्टम सिमैंटिक टोकन इस्तेमाल करता है जो L स्टेप और hue के हिसाब से प्रिमिटिव के बीच पलटते हैं, hex वैल्यू को एक-एक करके हाथ से ओवरराइड करके नहीं।

ब्राउज़र सपोर्ट और सुरक्षित माइग्रेशन विंडो

OKLCH 2023 के बाद रिलीज़ हुए हर बड़े ब्राउज़र में सपोर्टेड है। Chrome 111, Safari 15.4, Firefox 113 और Edge 111 सब पूरा OKLCH सपोर्ट शिप करते हैं। 2025 के मध्य तक ग्लोबल कवरेज 93% से ऊपर है। माइग्रेशन की खिड़की खुली है।

जो ब्राउज़र OKLCH सपोर्ट नहीं करता उसके लिए फ़ॉलबैक एक लाइन का है। पहले hex फ़ॉलबैक डिक्लेयर कीजिए, फिर OKLCH वैल्यू। जो ब्राउज़र OKLCH नहीं समझते वे उसे नज़रअंदाज़ करके hex इस्तेमाल करते हैं। जो समझते हैं वे बेहतर वैल्यू इस्तेमाल करते हैं।

color: #4a7de8; /* sRGB fallback */ color: oklch(0.54 0.22 260); /* OKLCH for modern browsers */

Tailwind v4 अपना पैलेट नेटिव रूप से OKLCH में जनरेट करता है। Linear, Stripe के Sail डिज़ाइन टोकन और Apple का डेवलपर कलर मार्गदर्शन, सब परसेप्चुअली यूनिफॉर्म सिस्टम की ओर बढ़ चुके हैं। इंडस्ट्री वहाँ पहुँच चुकी है। सवाल बस यह है कि आपकी टीम कब जुड़ती है।

FAQ

क्या OKLCH सीखना मुश्किल है?

कोऑर्डिनेट सिस्टम hex या HSL से अलग है पर जटिल नहीं। L है 0 से 1 तक की लाइटनेस। C है क्रोमा, मोटे तौर पर कितना saturated। H है डिग्री में hue। जब आप यह बात आत्मसात कर लेते हैं कि L का मतलब महसूस की गई ब्राइटनेस है और C का मतलब रंगीनी, तो सिस्टम HSL से भी तेज़ी से सहज हो जाता है।

क्या मैं आज Figma में OKLCH इस्तेमाल कर सकता हूँ?

2025 तक Figma अपने कलर पिकर में OKLCH नेटिव रूप से नहीं दिखाता। व्यावहारिक वर्कफ़्लो यह है कि Tokens Studio के ज़रिए टोकन फ़ाइल में, या Figma variables से सिंक होने वाली CSS variables फ़ाइल में, टोकन को OKLCH में परिभाषित करें, फिर वैल्यू जाँचने के लिए Figma का कोड एक्सपोर्ट इस्तेमाल करें। Figma का रेंडरिंग इंजन कन्वर्ज़न अंदर ही सँभाल लेता है।

क्या OKLCH मेरी मौजूदा hex वैल्यू तोड़ देता है?

नहीं। आप OKLCH को धीरे-धीरे, टोकन-दर-टोकन ला सकते हैं। आपकी मौजूदा hex वैल्यू बिल्कुल पहले जैसी चलती रहती हैं। माइग्रेशन जोड़ने वाला है, अदला-बदली नहीं।

LCH और OKLCH में क्या अंतर है?

LCH, CIELAB कलर स्पेस पर आधारित है, जो परसेप्चुअली यूनिफॉर्म है पर उसमें hue लीनियरिटी की समस्याएँ हैं, ख़ासकर नीले-बैंगनी दायरे में। OKLCH, OKLab पर आधारित है, जो उन hue खिसकावों को ठीक करता है। व्यावहारिक डिज़ाइन काम के लिए OKLCH बेहतर चुनाव है क्योंकि उसका hue इंटरपोलेशन कम चौंकाता है।

मैं hex को OKLCH में कैसे बदलूँ?

oklch.com, PostCSS oklch प्लगइन या CSS Color 4 स्पेक प्लेग्राउंड इस्तेमाल कीजिए। अपनी hex वैल्यू पेस्ट कीजिए, OKLCH कोऑर्डिनेट पढ़िए, L और C को दो दशमलव तक राउंड कीजिए, और H को निकटतम पूर्ण डिग्री तक। यही आपकी काम करने वाली टोकन वैल्यू है।

क्या OKLCH एक्सेसिबिलिटी की ज़रूरतों को प्रभावित करता है?

WCAG कंट्रास्ट ज़रूरतें sRGB की सापेक्ष ल्यूमिनेंस के हिसाब से परिभाषित हैं, OKLCH लाइटनेस के हिसाब से नहीं। APCA परसेप्चुअल मॉडल के ज़्यादा क़रीब है और OKLCH L वैल्यू पर ज़्यादा स्वाभाविक रूप से मैप होता है। व्यवहार में OKLCH कंट्रास्ट का अनुमान ज़्यादा सहज बनाता है क्योंकि L महसूस की गई ब्राइटनेस को ट्रैक करता है, पर सिमैंटिक टोकन जोड़ियों को कंट्रास्ट चेकर से निकालना फिर भी ज़रूरी है। प्रक्रिया वही है, बस पहले से सोचना आसान है।

OKLCH असल में क्या खोलता है

OKLCH कोई ट्रेंड नहीं है। यह पहली बार है जब CSS ने ऐसा कलर स्पेस शिप किया है जो इस आधार पर बना है कि इंसानी आँखें रंग को कैसे देखती हैं, और टूलिंग इतनी पकड़ चुकी है कि कुछ केंद्रित दिन लगाने को तैयार किसी भी टीम के लिए माइग्रेशन आज व्यावहारिक है।

जो टीमें अभी जाती हैं उन्हें एक साथ तीन चीज़ें मिलती हैं: ऐसा पैलेट जो बिना मैन्युअल ओवरराइड के डार्क मोड में टिकता है, कंट्रास्ट व्यवहार जो कोऑर्डिनेट सिस्टम से मेल खाता है, और ऐसी नींव जो भविष्य में बिना दोबारा लिखे P3 तक फैलती है। जो टीमें इंतज़ार करती हैं उन्हें फिर वही बहस करनी पड़ेगी कि blue-300, orange-300 से भारी क्यों दिखता है, और जवाब फिर वही रहेगा। कोऑर्डिनेट सिस्टम उस काम के लिए कभी बना ही नहीं था।

अगर आप इस पैलेट के ऊपर पूरा टोकन आर्किटेक्चर बनाना चाहते हैं, तो Figma variables आर्किटेक्चर पेपर सिमैंटिक लेयर को कवर करता है। इस काम के डार्क मोड वाले इस्तेमाल के लिए डार्क मोड कलर सिस्टम वहीं से शुरू होता है जहाँ यह खत्म होता है।

चाहते हैं कि यह आपके लिए बना दिया जाए? Brainy को हायर करें।