OKLCH कन्वर्टर और पैलेट बिल्डर
OKLCH, हेक्स, RGB और HSL के बीच बदलिए, और ऐसे रैंप बनाइए जो देखने में एकसमान रहें — क्योंकि ह्यू घूमते समय लाइटनेस और क्रोमा स्थिर रहते हैं। sRGB से बाहर के रंग क्रोमा घटाकर मैप होते हैं, चैनल क्लिप करके नहीं — फ़र्क़ यही है कि आपका बैंगनी बैंगनी रहता है या नहीं।
OKLCH में लाइटनेस मायने क्यों रखती है
HSL में लाइटनेस स्थिर रखकर ह्यू बदलिए तो रंग की चमक बदल जाती है: 50% पर पीला, 50% पर नीले से कहीं ज़्यादा चमकीला दिखता है — इसीलिए आप कितनी भी सावधानी से दूरी रखें, HSL रैंप असमान दिखते हैं। OKLab को परसेप्चुअल डेटा पर फ़िट किया गया है, इसलिए उसका लाइटनेस अक्ष वही बताता है जो आँख देखती है। L और C स्थिर रखिए, H घुमाइए, और हर स्वैच का दृश्य भार एक-सा रहेगा — पैलेट HSL की जगह यहाँ बनाने की पूरी वजह यही है।
असली मामला गैमट मैपिंग का है
बहुत-से OKLCH मानों का sRGB में कोई समकक्ष नहीं होता, और आसान इलाज यह है कि हर चैनल को सीमा में दबा दिया जाए। इससे ह्यू साफ़ खिसक जाता है: चटख बैंगनी को चैनल-दर-चैनल क्लिप करने पर वह नीले की ओर बहने लगता है। लाइटनेस और ह्यू स्थिर रखकर सिर्फ़ क्रोमा घटाने से रंग पहचान में वही बना रहता है और सिर्फ़ वह संतृप्ति जाती है जिसे स्क्रीन दिखा ही नहीं सकती थी। यह पेज CSS Color 4 का एल्गोरिद्म इस्तेमाल करता है — क्रोमा पर बाइनरी खोज, और जैसे ही क्लिप किया परिणाम घटे हुए रंग से एक जस्ट-नोटिसेबल डिफ़रेंस के भीतर आ जाए, उसे स्वीकार कर लेना।
एक रेफ़रेंस से मिलान किया गया
इन गणनाओं की तुलना एक स्वतंत्र इम्प्लीमेंटेशन से चार हज़ार रंगों के ग्रिड पर की गई: लाइटनेस और क्रोमा दस लाखवें हिस्से तक मिलते हैं, ह्यू डिग्री के दस-हज़ारवें हिस्से तक, और हर हेक्स मान बिलकुल वापस वही आता है। गैमट मैपिंग को इसी तरह गैमट से बाहर के चार सौ अस्सी रंगों पर जाँचा गया, और सबसे ख़राब मामले में भी वह 255 में से एक हिस्से के भीतर रही। OKLCH पढ़ने वाले लोग ग़लत मैट्रिक्स पकड़ लेते हैं, इसलिए यह बताना ज़रूरी लगा कि जाँच कैसे हुई।
आउटपुट का इस्तेमाल
कस्टम प्रॉपर्टीज़ OKLCH में लिखी जाती हैं और उनके बग़ल में टिप्पणी में हेक्स रहता है, क्योंकि रिव्यू में यही जोड़ी चाहिए होती है: वह मान जो आपका बिल्ड भेजेगा, और वह मान जिसे आप कहीं भी चिपका सकते हैं। आज इस्तेमाल में मौजूद हर ब्राउज़र OKLCH सिंटैक्स समझता है; अगर आप अब भी किसी ऐसे को सपोर्ट करते हैं जो नहीं समझता, तो वह टिप्पणी ही आपका फ़ॉलबैक है।
अक्सर पूछे जाने वाले प्रश्न
क्रोमा की ऊपरी सीमा 0.4 क्यों है?
क्योंकि sRGB में कुछ भी इसके पास तक नहीं पहुँचता। sRGB का सबसे संतृप्त रंग नीला है, लगभग 0.313 पर, और स्लाइडर उससे आगे तक जाता है ताकि आप देख सकें कि कौन-से रंग बाहर रह जाते हैं और वे वापस कैसे मैप होते हैं।
यहाँ जस्ट-नोटिसेबल डिफ़रेंस क्या है?
OKLab में 0.02 का डेल्टा E — यही सीमा CSS Color 4 इस्तेमाल करता है। इससे नीचे क्लिपिंग और क्रोमा घटाना अलग नहीं दिखते, इसलिए एल्गोरिद्म क्लिप किया रंग ले लेता है और अतिरिक्त क्रोमा बचा रहता है।
क्या यह P3 या Rec2020 को सपोर्ट करता है?
अभी नहीं। यहाँ सब कुछ sRGB के लिए बना है, और गैमट चेतावनियाँ भी उसी की हैं। वाइड गैमट के लिए उनके अपने प्राइमरीज़ और मैट्रिक्स का अलग सेट चाहिए होगा।
क्या इसमें से कुछ भी कहीं भेजा जाता है?
नहीं। सारी गणना इसी पेज में होती है।
GO AI टीम ने बनाया। CSS clamp() कैलकुलेटर · WCAG कॉन्ट्रास्ट चेकर · सभी मुफ़्त टूल