OKLCH कलर कन्वर्टर – CSS Color 4, Tailwind v4 पैलेट जनरेटर

OKLCH कलर कन्वर्टर का उपयोग कैसे करें

1. 1

   कलर वैल्यू दर्ज करें

   किसी भी समर्थित फ़ॉर्मेट में एक वैल्यू टाइप या पेस्ट करें: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%), या oklab(0.6 -0.056 -0.169)। टूल तुरंत बाकी सभी फ़ॉर्मेट सिंक कर देता है।

2. 2

   L/C/H/Alpha स्लाइडर से फाइन-ट्यून करें

   Lightness (L), Chroma (C), Hue (H), या Alpha स्लाइडर ड्रैग करें। Chroma स्लाइडर sRGB गैमट बाउंड्री मार्कर दिखाता है ताकि आप हमेशा जान सकें कि कोई रंग स्टैंडर्ड डिस्प्ले रेंज से बाहर जा रहा है।

3. 3

   गैमट चेतावनी को जांचें यदि वह दिखती है

   यदि आपका OKLCH रंग sRGB गैमट से बाहर है, तो एक एम्बर वार्निंग बैनर दिखाई देता है जो मूल वैल्यू और डिस्प्ले के लिए उपयोग किया गया CSS Color 4 toGamut-मैप्ड रिज़ल्ट दिखाता है।

4. 4

   Tailwind v4 पैलेट जनरेट करें

   Tailwind v4 OKLCH पैलेट सेक्शन आपके वर्तमान ह्यू के लिए 50-950 कलर स्टेप्स ऑटोमेटिकली जनरेट करता है, जो Tailwind के आधिकारिक लाइटनेस शेड्यूल के अनुसार है। @theme ब्लॉक को सीधे अपने CSS में पेस्ट करने के लिए Copy पर क्लिक करें।

संदर्भ

• W3C CSS Color Level 4 – oklch()

  W3C स्पेसिफिकेशन जो OKLCH कलर नोटेशन और गैमट मैपिंग एल्गोरिदम परिभाषित करता है।

• Culori – JavaScript कलर लाइब्रेरी

  ओपन-सोर्स लाइब्रेरी जो इस टूल में OKLCH कन्वर्शन, toGamut मैपिंग और परसेप्चुअल इंटरपोलेशन को पावर देती है।

• Evil Martians – CSS में OKLCH: RGB और HSL क्यों छोड़ें?

  आधुनिक कलर वर्क के लिए RGB और HSL पर OKLCH के फायदों को समझाता एक व्यापक गाइड।

• Tailwind CSS v4 – डिफ़ॉल्ट पैलेट

  Tailwind की आधिकारिक कलर पैलेट डॉक्यूमेंटेशन, जिसमें इस पैलेट जनरेटर में उपयोग की गई OKLCH लाइटनेस वैल्यू शामिल हैं।

संबंधित उपकरण

अक्सर पूछे जाने वाले प्रश्न

OKLCH क्या है और मुझे HEX या HSL की बजाय इसका उपयोग क्यों करना चाहिए?

OKLCH (Lightness, Chroma, Hue) Oklab मॉडल पर आधारित एक परसेप्चुअली यूनिफॉर्म कलर स्पेस है। HEX या HSL के विपरीत, OKLCH में समान संख्यात्मक परिवर्तन समान परसीव्ड अंतर उत्पन्न करते हैं। यह इसे एक्सेसिबल कलर पैलेट डिजाइन करने, स्मूद ग्रेडिएंट बनाने और Tailwind v4 के लिए सुसंगत कलर स्केल जनरेट करने के लिए आदर्श बनाता है।

HEX को OKLCH में कैसे कन्वर्ट करूं?

HEX इनपुट फील्ड में अपनी HEX वैल्यू (जैसे #3b82f6) पेस्ट करें और OKLCH फील्ड तुरंत समकक्ष oklch(0.6 0.18 250) नोटेशन के साथ अपडेट हो जाता है। साथ ही सभी अन्य फ़ॉर्मेट — OKLab, RGB, और HSL — भी उसी समय सिंक होते हैं, जिससे आपको अलग-अलग कन्वर्शन करने की ज़रूरत नहीं पड़ती।

'sRGB गैमट से बाहर' का क्या मतलब है और रंग के साथ क्या होता है?

कुछ OKLCH रंग — विशेष रूप से उच्च-क्रोमा वैल्यू — sRGB कलर स्पेस से अधिक हो जाते हैं जो अधिकांश डिस्प्ले उपयोग करते हैं। जब ऐसा होता है, तो टूल निकटतम डिस्प्ले योग्य sRGB रंग खोजने के लिए CSS Color 4 toGamut एल्गोरिदम लागू करता है। एक एम्बर वार्निंग बैनर दिखाई देता है जो मैप्ड रिज़ल्ट के साथ मूल आउट-ऑफ-गैमट वैल्यू दिखाता है।

Tailwind v4 OKLCH पैलेट जनरेटर कैसे काम करता है?

जनरेटर Tailwind v4 के आधिकारिक लाइटनेस शेड्यूल (50=0.971, 100=0.945, से 950=0.238 तक) का उपयोग करता है जो आपके वर्तमान ह्यू और क्रोमा पर लागू होता है। यह हल्के से गहरे तक 11 कलर स्टेप्स उत्पन्न करता है और उन्हें ‎@theme { --color-brand-50: oklch(...); }‎ कोड ब्लॉक के रूप में एक्सपोर्ट करता है जो आपके CSS में पेस्ट के लिए तैयार है।

ग्रेडिएंट के लिए OKLCH इंटरपोलेशन HSL से बेहतर क्यों दिखती है?

HSL एक सिलेंड्रिकल कोऑर्डिनेट सिस्टम में इंटरपोलेट करता है जो मानव धारणा से मेल नहीं खाता, जो अक्सर ग्रेडिएंट के बीच में ग्रे डिप्स या अप्रत्याशित ह्यू शिफ्ट का कारण बनता है। OKLCH परसेप्चुअली यूनिफॉर्म Oklab स्पेस में इंटरपोलेट करता है, इसलिए लाइटनेस और क्रोमा बिना किसी अप्रत्याशित कलर कास्ट के स्मूदली ट्रांजिशन होते हैं।

क्या यह OKLCH कन्वर्टर मुफ़्त और प्राइवेट है?

हां। टूल पूरी तरह से मुफ़्त है और culori लाइब्रेरी का उपयोग करके पूरी तरह से आपके ब्राउज़र में चलता है। कोई भी कलर वैल्यू सर्वर पर अपलोड नहीं की जाती, सभी कैलकुलेशन आपके डिवाइस पर लोकली की जाती हैं।

क्या CSS Color 4 OKLCH सभी ब्राउज़र में काम करता है?

OKLCH कलर सिंटैक्स (oklch()) 2023 से सभी आधुनिक ब्राउज़र में समर्थित है, जिसमें Chrome 111+, Firefox 113+, Safari 15.4+, और Edge 111+ शामिल हैं। पुराने ब्राउज़र के लिए, इस कन्वर्टर द्वारा प्रदान किए गए HEX या RGB फ़ॉलबैक वैल्यू का उपयोग करें।