OKLCH रंग क्या है

(jakub.kr)

11 पॉइंट द्वारा GN⁺ 2025-08-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें

OKLCH एक आधुनिक color model है जो मानव visual perception के अनुसार बनाया गया है, और इसमें brightness, saturation और hue में बदलाव एकसमान महसूस होते हैं, इसलिए यह एक perceptually uniform color model है
इसकी संरचना Lightness(चमक), Chroma(रंग-तीव्रता), Hue(रंग) से बनी होती है, और पुराने models की तुलना में यह consistent color palette बनाना आसान बनाती है
एक ही lightness और chroma बनाए रखते हुए अगर सिर्फ Hue बदला जाए, तो भी एक समान color palette बनाई जा सकती है, जो UI design के लिए फायदेमंद है
sRGB/HSL की तुलना में यह ज़्यादा predictable contrast changes और uniform gradients देता है, हालांकि कुछ मामलों में अनचाहे रंग भी बन सकते हैं
Display-P3 जैसे आधुनिक displays पर यह और व्यापक color expression देता है, और आधुनिक browsers में CSS Color 4 के जरिए supported है; sRGB fallback handling भी उपलब्ध है, इसलिए यह धीरे-धीरे web standard बन रहा है

OKLCH color model का परिचय

OKLCH एक आधुनिक color model है जिसे perceptual uniformity के उद्देश्य से विकसित किया गया है
यह model इंसान वास्तव में रंगों को जिस तरह perceive करता है उसके अधिक करीब काम करता है, इसलिए digital design और frontend development में रंगों के साथ काम करना काफी आसान हो जाता है

color model की बुनियादी अवधारणा

color model रंगों को गणितीय रूप से परिभाषित और व्यक्त करने वाला एक system है
आमतौर पर इस्तेमाल होने वाले models के उदाहरण: RGB, HSL, LCH, OKLCH, LAB, XYZ
हर model यह तय करता है कि रंगों को व्यक्त और manipulate करना कितना आसान होगा

रंग अभिव्यक्ति के उदाहरण

oklch(0.55 0.18 260)
hsl(220 100% 50%)
rgb(0, 128, 255)
lch(60% 60 260)
lab(50 -10 -50)
color(xyz 0.18 0.19 0.6)
#1E90FF

Gamut(रंग-स्थान की सीमा)

Gamut उस पूरी रंग-सीमा को दर्शाता है जिसे कोई color model व्यक्त कर सकता है
प्रमुख gamut: sRGB(वेब का आधार), Display-P3(आधुनिक devices में support)
color space में gamut range के अलावा white point, transfer function जैसी कई अन्य विशेषताएँ भी होती हैं

OKLCH की संरचना

OKLCH और LCH दोनों Lightness, Chroma, Hue इन तीन मानों से मिलकर बने होते हैं
OKLCH, OKLab color space पर आधारित है

Lightness(चमक/उजाला) : 0~1 या 0%~100% के रूप में व्यक्त किया जाता है, और brightness में uniform बदलाव सुनिश्चित करता है
Chroma(रंग-तीव्रता) : रंग की intensity, HSL के Saturation(सैचुरेशन) जैसी
Hue(रंग) : 0~360 डिग्री के कोण से रंग व्यक्त किया जाता है

OKLCH के फायदे और उपयोग

एकसमान brightness
- OKLCH में अगर एक ही brightness और chroma मान रखकर सिर्फ hue बदला जाए, तो सभी रंग लगभग समान brightness वाले महसूस होते हैं
- पुराने sRGB या HSL में रंग के अनुसार brightness या saturation असंगत दिखाई दे सकते हैं
- इसलिए OKLCH से perceptually uniform color palette बनाना आसान होता है
अनुमानित color lightness steps
- OKLCH में brightness बदलने पर hue(रंग) या chroma(रंग-तीव्रता) बदले बिना कई color steps बनाए जा सकते हैं
- HSL जैसे models में brightness बदलने पर hue drift की समस्या हो सकती है
- OKLCH में सिर्फ brightness समायोजित करके भी consistent color lightness steps बनाए जा सकते हैं
gradients को संभालने का तरीका
- sRGB में लाल, हरा, नीला मानों के बीच interpolation होता है, इसलिए बीच के हिस्से धुंधले हो सकते हैं या brightness change बहुत ज़्यादा हो सकता है
- OKLCH में Lightness, Chroma, Hue axes के साथ interpolation किया जाता है, जिससे अधिक प्राकृतिक gradients बन सकते हैं
- लेकिन Hue मान circular structure में होने की वजह से कभी-कभी अनपेक्षित रंग बदलाव हो सकते हैं
- इसे रोकने के लिए OKLab में सीधी interpolation करके अधिक predictable परिणाम पाए जा सकते हैं

color space support

sRGB आधुनिक displays द्वारा व्यक्त किए जाने वाले व्यापक color space के कुछ हिस्सों को cover नहीं कर पाता
OKLCH का उपयोग करने पर Display-P3 जैसे wide-gamut devices में अधिक जीवंत रंग दिखाए जा सकते हैं
जो devices सिर्फ sRGB support करते हैं, उनमें इसे संभव हो सके उतने मिलते-जुलते रंग में map किया जाता है

अधिकतम Chroma(रंग-तीव्रता) मान

OKLCH गणितीय रूप से ऐसे रंग भी निर्दिष्ट कर सकता है जो वास्तविक screen की display range से बाहर हों
उदाहरण के लिए oklch(0.7 0.4 40) जैसा बहुत बड़ा chroma मान वास्तविक रूप से दिखाया नहीं जा सकता, इसलिए उसे निकटतम रंग में clip किया जाता है
maximum chroma की अवधारणा को समझना और hue, brightness, तथा चुने गए color space(sRGB, Display-P3) के अनुसार उचित मान तय करना महत्वपूर्ण है

browser support और fallback

OKLCH colors को CSS Color Module Level 4 में पेश किया गया था, और अधिकांश आधुनिक browsers में इसका support है

पुराने browsers में यह supported न हो, इसलिए @supports CSS directive से fallback values सेट की जा सकती हैं

@layer base {  
  :root {  
    /* sRGB hex */  
    --color-gray-100: #fcfcfc;  
    --color-gray-200: #fafafa;  
    --color-gray-300: #f4f4f4;  

    @supports (color: oklch(0 0 0)) {  
      /* OKLCH */  
      --color-gray-100: oklch(0.991 0 0);  
      --color-gray-200: oklch(0.982 0 0);  
      --color-gray-300: oklch(0.955 0 0);  
    }  
  }  
}

supported browsers में OKLCH लागू होगा, और unsupported browsers में sRGB(hex) colors लागू होंगे

oklch.fyi tool

oklch.fyi एक web tool है जो OKLCH color palette generation, CSS variable conversion जैसी OKLCH से जुड़ी सुविधाएँ देता है
यह design systems और theme development में OKLCH colors का उपयोग आसान बनाने में मदद करता है

1 टिप्पणियां

GN⁺ 2025-08-26

Hacker News की राय

मुझे “Better Gradients” नाम की फीचर पर संदेह है। OKLCH एक polar coordinate space है, और इस space में Hue कोण की तरह काम करता है। जब अलग-अलग दो बिंदुओं के रंगों के बीच interpolation की जाती है, तो रास्ता वृत्त के किनारे-किनारे चलता है। उदाहरण के लिए, linear-gradient(in oklch, #f0f, #0f0) कोड लिखने पर हरे से बैंगनी तक जाते हुए रंग साफ़ तौर पर gamut से बाहर निकल जाता है। अगर वृत्त में दूसरी दिशा से घूमा जाए, तो linear-gradient(in oklch longer hue, #f0f, #0f0) की तरह cyan या aqua से होकर गुज़रता है। ऐसे path दिखाते हैं कि perceptual color spaces के लिए sRGB या इंसान द्वारा देखे जा सकने वाले color range, यानी gamut, के किनारों को संभालना वाकई असुविधाजनक है। वास्तव में, बहुत थोड़ा सा value बदलने पर भी रंग range से बाहर चला जाता है। इसे हल करने के लिए कई algorithm हैं, लेकिन perceptual uniformity की क़ीमत चुकानी पड़ती है। उदाहरण के लिए, gradient में लाल रंग असामान्य रूप से गहरा हो जाता है। अगर बेहतर gradients चाहिए और perceptual uniformity महत्वपूर्ण है, तो असल में Oklab interpolation default होना चाहिए। Oklab वृत्त को काटते हुए सीधी रेखा वाले path से interpolate करता है, और ज़रूरत पड़ने पर gray से भी होकर जा सकता है (linear-gradient(in oklab, #f0f, #0f0))। यह तरीका अक्सर दिखने वाले sRGB interpolation के darkening effect को भी हटाता है और magenta से lime तक एक स्वाभाविक gradient बनाता है। संदर्भ के लिए, Tailwind v4 ने beta में sRGB की जगह Oklch इस्तेमाल किया था, लेकिन final release में Oklab को ज़्यादा सुरक्षित default चुना
- मुझे लगता है कि browser में sRGB में रंग interpolate करने का तरीका लगभग bug जैसा है। sRGB logarithmic scale encoding है, इसलिए मूल spec के अनुसार color interpolation सीधे sRGB में नहीं, बल्कि linear RGB में बदलकर होनी चाहिए
- इस लेख में अब संशोधन हो चुका है, इसलिए मेरी टिप्पणी को नज़रअंदाज़ कर सकते हैं। फिर भी मैं इस बात से सहमत हूँ कि Oklab interpolation default होनी चाहिए। लेख में भी “better gradients” के बारे में कहा गया है कि OKLCH का hue circular होने की वजह से अप्रत्याशित path दिखा सकता है। ऐसी समस्या से बचने के लिए कई tools OKLAB इस्तेमाल करते हैं, और Oklab सीधी रेखा वाले path के साथ consistent परिणाम देता है
- वास्तव में CIE LAB भी यही काम करता है और standard के रूप में पहले से मौजूद है (CIE LAB Wikipedia)
  W3C की समीक्षा सामग्री
- इतनी उपयोगी व्याख्या के लिए धन्यवाद। मैं ही इस लेख का लेखक हूँ। इसे और स्पष्ट तरीके से समझा सकूँ, इसलिए मैं सामग्री में संशोधन करूँगा
- spectrum के विपरीत छोरों पर मौजूद दो रंगों से gradient बनाना कुछ हद तक एक extreme case है। यह कैसा दिखना चाहिए, इसका कोई एक सही उत्तर नहीं है, और मुझे नहीं लगता कि डिज़ाइन में ऐसे gradient की ज़रूरत अक्सर पड़ती है। आमतौर पर डिज़ाइन में gradient इस्तेमाल करते समय बीच का रंग सीधे चुना जाता है
OKLCH के बारे में intuition बनाने में oklch.com ने मेरी मदद की। लेकिन ध्यान रखना चाहिए कि hue value, HSL के hue से अलग है, और hue व lightness के हिसाब से chroma का maximum भी बदलता है। यह bug नहीं है, बल्कि मानव दृष्टि और display की विशेषताओं का प्रतिबिंब है। HSL से अलग, HSL में maximum हमेशा स्थिर रहता है, लेकिन रंग का अर्थ consistent नहीं रहता। CSS में OKLCH की अच्छी बात यह है कि इसे formula के रूप में manipulate किया जा सकता है। उदाहरण के लिए, oklch(from var(--accent) calc(l + .1) c h) जैसा इस्तेमाल संभव है। लेकिन formulas का सही उपयोग करने के लिए color theory की समझ या परीक्षण की ज़रूरत पड़ती है। उदाहरण के लिए, मैंने सोचा था कि shadow के लिए सिर्फ lightness बदलना काफ़ी होगा, लेकिन असल में hue भी बदलना पड़ता है। OKLCH gradient हर स्थिति में सर्वोत्तम नहीं है। मिलते-जुलते hue के साथ रंग ज़्यादा समान दिख सकते हैं, लेकिन अगर यह भी देखना हो कि वास्तविक प्रकाश के मिश्रण में रंग भौतिक रूप से कैसे बदलते हैं, तो XYZ color space की ज़रूरत होगी। इस संदर्भ में MDN color-mix दस्तावेज़ देखना उपयोगी है। और हाँ, ‘ok’ सचमुच सिर्फ़ OK शब्द से आया है। अर्थ यह है कि पुराने LCH में समस्या थी, यानी वह OK नहीं था
- आपने कहा कि CSS के OKLCH में formulas इस्तेमाल किए जा सकते हैं, लेकिन वास्तव में relative color manipulation सभी CSS color spaces में संभव है। उदाहरण के लिए, background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5)); की तरह इस्तेमाल किया जा सकता है
- OKLCH और relative colors की वजह से मैं stylesheet में hardcode किए गए colors की संख्या काफ़ी कम कर पाया
  उदाहरण CSS variables
कुछ आलोचनाएँ पहले ही सामने आ चुकी हैं, लेकिन OKLCH और CSS में उसके उपयोग का परिचय देने वाले लेख के रूप में यह काफ़ी अच्छा लगा। एक अतिरिक्त सवाल यह है कि हाल में blog posts में तारीख़ न लिखने का जो trend है, उसके बारे में जिज्ञासा हुई। खासकर “OKLCH एक नया color model है” जैसी पंक्ति आगे चलकर जल्दी पुरानी लगने लगेगी। मुख्य साइट पर सिर्फ “August 2025” लिखा है, इसलिए ऐसा लगता है जैसे तारीख़ जानबूझकर नहीं दी गई
संबंधित साइट
- मैं इसे ठीक-ठीक समझा नहीं सकता, लेकिन बिना तारीख़ वाले लेख मुझे गंभीर समस्या लगते हैं। यह आजकल का trend है या नहीं, पता नहीं, लेकिन तारीख़ न हो तो कोई भी उसे पुराने लेख की तरह समझ सकता है। कभी-कभी मैं comments में बचे timestamp देखकर लेख का साल अनुमान लगाता हूँ, लेकिन कई blogs comments भी support नहीं करते, इसलिए उन पर दोबारा जाने का मन ही नहीं करता। (OP के main page पर लिखा है कि वह “details पर obsess नहीं करता”, लेकिन सिर्फ़ design aesthetics पर ध्यान देकर usability छोड़ देना विडंबना है)
- जब किसी लेख में तारीख़ नहीं होती, तो मैं HTTP से HTML document लेते समय Last-Modified header देखने की कोशिश करता हूँ। लेकिन अक्सर लेखक तारीख़ को लेकर गंभीर नहीं होते। जैसा कि blog शब्द से ही पता चलता है, यह मूल रूप से [web]-log है, और timestamp उसका केंद्रीय तत्व है—शायद वे यह समझते नहीं। संदर्भ के लिए, Last-Modified value उस resource (HTML) के आख़िरी संशोधन समय को दिखाती है। अगर server caching configure न करे और backend हर बार दोबारा render करे, तो तारीख़ हर बार अपडेट हो जाती है
  इस समस्या का उदाहरण
- यह ज़्यादातर SEO का मामला है, ताकि पुरानी content search engine में ranking न खो दे। काफ़ी झुंझलाने वाली trick है
- Google और SEO की वजह से
कहा गया कि OKLCH रंग HSL की तुलना में ज़्यादा consistent blue देता है, लेकिन वास्तव में OKLCH में brightness बढ़ने पर रंग काफ़ी हद तक हरे की तरफ़ खिसक जाता है। Perceptual intensity को स्थिर रखना निश्चित रूप से एक लाभ है, लेकिन यहाँ जो प्रभाव बताया गया है, वह मुझे बढ़ा-चढ़ाकर कहा गया लगता है
- इस रंग के Hue chart को देखें तो वजह समझ आती है
  OKLCH color chart
  brightness बढ़ाने पर आप उस रंग के Hue band की सीमा से आगे निकल जाते हैं, और display पर पुनरुत्पादित किए जा सकने वाले चमकीले नीले रंग की सीमा की वजह से रंग Cyan की तरफ़ खिसकता है। OKLCH में gradient के दौरान brightness बदलते समय Hue invariant नहीं रहता, बल्कि Saturation invariant रहता है। यह प्रभाव अच्छा है या नहीं, यह सौंदर्यबोध की पसंद का सवाल है, लेकिन इतने समय तक स्थिर Hue और desaturated web colors इस्तेमाल करने के बाद “किस तरह का trade-off चुनना है” यह तय कर पाना ताज़गी भरा लगता है
  संबंधित Hacker News चर्चा
  हाल ही में विज्ञान जगत में और गहरे नीले LED भी बनाए गए हैं, इसलिए उम्मीद है कि 10~20 साल बाद Display P3 की जगह कोई नई तकनीक आएगी, तो ऐसे Cyan shift के बिना ज़्यादा सटीक blue gradient दिखाए जा सकेंगे। तब तक, डिज़ाइन के लिहाज़ से जो अच्छा लगे वही सही है।
  वैसे मुझे लगता है कि भविष्य के color space design में Hue और Saturation को अनिवार्य द्विभाजन की तरह चुनने के बजाय display की सीमा तक Saturation invariant रखा जाए, और सीमा पर धीरे-धीरे Hue invariant में बदला जाए तो कैसा रहेगा। लेकिन color profile (IDCv4) की सीमाओं के कारण यह बहुत कठिन है। फिर भी experimental DisplayCAL target के रूप में यह दिलचस्प हो सकता है
- मेरी display पर उस उदाहरण में green shift बिल्कुल नहीं दिखता। क्या संभव है कि आपकी screen calibration ठीक न हो?
- सहमत हूँ। रंग पूरी तरह blue से cyan में बदल जाता है। अगर OKLCH सही तरह implement हुआ है, तो मैं इसे कभी इस्तेमाल नहीं करना चाहूँगा। hue calculation में कुछ गंभीर समस्या लगती है। HSL/HSV में perceptual lightness की समस्या है, लेकिन hue खुद हमेशा स्थिर रहता है, इसलिए किसी correction की ज़रूरत नहीं पड़ती
- मुझे color science की ज़्यादा जानकारी नहीं है और यह शायद व्यक्तिपरक राय हो, लेकिन OKLCH रंगों के दाहिने छोर को मैं सबसे खराब स्थिति में blue-green या बस light blue जैसा महसूस करता हूँ। इसके विपरीत, HSL में सबसे चमकीले दो रंग blue जैसे नहीं लगते; बल्कि दाहिने से दूसरा light purple जैसा लगता है, और सबसे दाहिना लगभग gray जैसा। caption में कहा गया था कि HSL का गहरा हिस्सा grayish है, लेकिन वास्तव में OKLCH और HSL दोनों में leftmost यानी सबसे गहरा हिस्सा blue जैसा ही लगता है। macOS Digital Color Meter से देखने पर, सबसे दाहिने OKLCH और HSL दोनों में green value लगभग समान है (226 और 227, sRGB में 228 और 227)
मैं इस विषय पर एक बेहतर लेख सुझाता हूँ
Evil Martians का OKLCH in CSS: Why quit RGB, HSL लेख
आजमाने के लिए OKLCH conversion tool
पिछली Hacker News चर्चा (6 महीने पहले, 30 comments)
OKLCH, OKLab (perceptual uniform color space) पर आधारित है, और यह Lightness, Chroma, Hue को नियंत्रित करने वाला model है। ‘OK’ नाम इसलिए पड़ा क्योंकि इसके बनाने वाले ने कहा था कि यह “काफ़ी हद तक ठीक काम करता है”
- मेरा अनुमान है कि OKLCH का “OK” वास्तव में “Ottossons kulör” (Swedish में Ottosson का color) का संक्षेप हो सकता है। संभव है कि इसके निर्माता ने विनम्रता से इसे OK कहा हो
मेरा मानना है कि color और text/logo के साथ काम करते समय contrast और readability को भी ज़रूर ध्यान में रखना चाहिए
APCA Contrast
- ऊपर वाली साइट तब उपयोगी है जब आप नवीनतम contrast algorithm (APCA, जो अभी pre-release WCAG 3 standard का आधिकारिक algorithm है) इस्तेमाल कर रहे हों, लेकिन अभी कई industries में WCAG 2 ही मानक है, इसलिए कानूनी आवश्यकताओं पर भी ध्यान देना चाहिए।
  Contrast check (WCAG 2)
  इसके अलावा भी कई tools मौजूद हैं
मेरे दिमाग़ में OKLCH नाम अपने-आप "Oklachroma" की तरह समझ आया
OKLab color space को परिचित कराने वाली एक शुरुआती blog post है, जो ऐतिहासिक दृष्टि से रोचक है
OKLab मूल पोस्ट
मुझे जिज्ञासा है कि OKLCH color space में convert करने का formula दस्तावेज़ित क्यों नहीं है। Google करने पर सिर्फ़ एक Gist मिलता है[0], जबकि Oklab पर Wikipedia लेख मौजूद है[1]
Gist conversion formula उदाहरण
Oklab Wikipedia
- conversion का मुख्य हिस्सा Oklab और sRGB के बीच matrix में है। OKLab-OKLCH conversion खुद सिर्फ़ coordinate transformation है, और यह Wikipedia पर भी दिया गया है
- OKLCH और OKLab एक ही color space हैं। बस एक को orthogonal coordinates (OKLab) और दूसरे को polar coordinates (OKLCH) में व्यक्त किया गया है