# OKLCH क्या है: वह कलर फ़ॉर्मैट जो आख़िरकार आपकी आँखों से मेल खाता है

OKLCH किसी रंग को तीन बातों से बताता है: वह कितना हल्का दिखता है, कितना चटक है और उसका ह्यू क्या है। HSL के उलट, यहाँ एक जैसी लाइटनेस हर ह्यू में सच में एक जितनी हल्की दिखती है। इससे पैलेट, hover स्टेट और पढ़ने लायक कंट्रास्ट पहले से अनुमान लगाने लायक हो जाते हैं।

स्रोत: https://pickshade.com/hi/oklch
अपडेट: 2026-09-28

## OKLCH क्या है

OKLCH, Oklab का पोलर रूप है। Oklab एक परसेप्चुअल कलर स्पेस है, जिसे Björn Ottosson ने 2020 में प्रकाशित किया था। इसमें तीन संख्याएँ होती हैं। L दिखने वाली लाइटनेस है, 0 (काला) से 1 या 100% (सफ़ेद) तक। C क्रोमा है, यानी रंग की मात्रा, 0 (ग्रे) से लेकर स्क्रीन पर दिखने वाले सबसे चटक रंगों के लिए लगभग 0.37 तक। H ह्यू का कोण है, 0 से 360 डिग्री तक।

एक ही रंग अलग-अलग फ़ॉर्मैट में ऐसा दिखता है। नीचे का हर मान PickShade अभी लाइव गिनता है, इसलिए आप इन्हें सीधे कॉपी कर सकते हैं।

| फ़ॉर्मैट | वैल्यू |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| OKLab | oklab(68.036% 0.17474 0.1165) |

## OKLCH, HSL से बेहतर क्यों है

HSL की लाइटनेस एक फ़ॉर्मूला है, आँख का अनुभव नहीं। hsl(60 100% 50%) चमकीला पीला है और hsl(240 100% 50%) गहरा नीला, फिर भी दोनों की लाइटनेस 50% बताई जाती है। HSL पर पैलेट बनाएँ, तो हर ह्यू को हाथ से ठीक करना पड़ता है।

OKLCH में एक जैसे L वाले रंग सच में एक जितने हल्के दिखते हैं। L और C को वैसा ही रखकर H घुमाइए, तो संतुलित ह्यू का सेट मिल जाता है। H और C को वैसा ही रखकर L बदलिए, तो साफ़ शेड स्केल बन जाता है। इसी वजह से Tailwind CSS v4 ने अपना पूरा डिफ़ॉल्ट पैलेट OKLCH में लिखा है।

लाइटनेस से कंट्रास्ट का अंदाज़ा भी लगता है। अगर टेक्स्ट और बैकग्राउंड के L में लगभग 0.4 या उससे ज़्यादा का अंतर है, तो टेक्स्ट आम तौर पर आसानी से पढ़ा जाता है। इससे पढ़ने लायक रंग चुनना कहीं आसान हो जाता है।

## CSS में सिंटैक्स

लाइटनेस को प्रतिशत में या 0 से 1 की संख्या में लिख सकते हैं। क्रोमा एक संख्या है। ह्यू डिग्री में कोण है। ओपैसिटी (अल्फ़ा) स्लैश के बाद लिखी जाती है।

```css
color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);
```

## ब्राउज़र सपोर्ट

oklch() हर मौजूदा ब्राउज़र में चलता है: Safari 15.4 से, Chrome और Edge 111 से, Firefox 113 से। यह 90% से कहीं ज़्यादा यूज़र्स को कवर करता है। बहुत पुराने ब्राउज़र के लिए OKLCH वाली लाइन से पहले HEX वाली फ़ॉलबैक लाइन लिख दीजिए।

```css
color: #ff5733;
color: oklch(68% 0.21 33.7);
```

## क्रोमा की सीमा और गैमट

OKLCH ऐसे रंग भी बता सकता है जिन्हें कोई स्क्रीन नहीं दिखा सकती। अधिकतम क्रोमा लाइटनेस और ह्यू पर निर्भर करता है: चटक पीला सिर्फ़ ऊँची लाइटनेस के पास संभव है, चटक नीला सिर्फ़ कम लाइटनेस के पास। जब कोई मान sRGB या Display P3 गैमट से बाहर होता है, तो ब्राउज़र उसे वापस गैमट में लाता है, और इससे रंग थोड़ा बदल सकता है।

PickShade, sRGB से बाहर के रंगों पर निशान लगाता है और आपको सबसे नज़दीकी फ़िट होने वाला रंग देता है। यह रंग लाइटनेस और ह्यू को वैसा ही रखकर क्रोमा घटाकर निकाला जाता है, ठीक वही तरीका जो CSS Color 4 सुझाता है।

## HEX को OKLCH में कैसे बदलें

कन्वर्ज़न कई चरणों में होता है: HEX से sRGB, sRGB से लीनियर लाइट, लीनियर sRGB से LMS कोन स्पेस, फिर क्यूब रूट, एक मैट्रिक्स से Oklab, और आख़िर में Oklab से पोलर निर्देशांक। हाथ से करने में गलती होना आसान है, इसलिए कोई भी रंग कन्वर्टर में पेस्ट कीजिए और नतीजा कॉपी कर लीजिए।

## सवाल और जवाब

### क्या OKLCH सभी ब्राउज़र में चलता है?

हाँ, हर मौजूदा ब्राउज़र में: Safari 15.4 और नया, Chrome और Edge 111 और नया, Firefox 113 और नया। अगर पुराने ब्राउज़र भी सपोर्ट करने हैं, तो उससे पहले HEX वाली एक लाइन जोड़ दीजिए।

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

दोनों लाइटनेस, क्रोमा और ह्यू बताते हैं। CSS का lch() CIELAB पर आधारित है, जिसमें लाइटनेस बदलने पर नीले रंग बैंगनी की ओर खिसकने लगते हैं। OKLCH, Oklab पर आधारित है, जो ह्यू को स्थिर रखता है, इसलिए नीले के शेड स्केल नीले ही रहते हैं।

### मेरा OKLCH रंग लिखे हुए मान से अलग क्यों दिखता है?

शायद क्रोमा उस लाइटनेस और ह्यू के लिए आपकी स्क्रीन की क्षमता से ज़्यादा है। ब्राउज़र उसे डिस्प्ले के गैमट में ले आता है। क्रोमा तब तक घटाइए, जब तक PickShade उसे गैमट से बाहर बताना बंद न कर दे।

### क्या Tailwind CSS के साथ OKLCH इस्तेमाल कर सकते हैं?

हाँ। Tailwind CSS v4 अपने डिफ़ॉल्ट पैलेट के लिए पहले से OKLCH इस्तेमाल करता है, और @theme में अपने रंग सीधे OKLCH में लिखे जा सकते हैं।

## टूल

- [HEX से OKLCH कन्वर्टर](https://pickshade.com/hi/convert/hex-to-oklch)
- [OKLCH स्लाइडर वाला कलर पिकर](https://pickshade.com/hi)
- [OKLCH में Tailwind v4 पैलेट](https://pickshade.com/hi/tailwind)

## मिलते-जुलते गाइड

- [कलर गैमट क्या है: sRGB, Display P3 और गैमट से बाहर के रंग](https://pickshade.com/hi/gamut)
- [कलर फ़ॉर्मैट समझिए: HEX, RGB, HSL, OKLCH और बाकी सब](https://pickshade.com/hi/color-formats)
- [Tailwind CSS कलर: v4 का OKLCH पैलेट, कस्टम कलर और शेड](https://pickshade.com/hi/tailwind-colors)