OKLCH रंग क्या है

• 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 का उपयोग आसान बनाने में मदद करता है