रंग रूपांतरण स्टूडियो
एक हेक्स कोड, कोई CSS कीवर्ड या पूरा oklch() फलन लिखिए और तुरंत बाकी हर लेखन-शैली पाइए। फिर एक सीढ़ी बनाइए, कंट्रास्ट जाँचिए, देखिए कि वर्णांध दर्शक को यह कैसा दिखता है, और पैलेट अपने साथ ले जाइए।
3, 4, 6 या 8 अंकों वाला हेक्स तथा rgb() और hsl() ब्राउज़र की मदद के बिना भी समझ लिए जाते हैं।
यहाँ का CMYK केवल गणितीय रूपांतरण है, ICC पृथक्करण नहीं। छपाई के लिए तैयार CMYK कागज़, स्याही और आउटपुट प्रोफ़ाइल पर निर्भर करता है, और उसे अकेले एक sRGB मान से नहीं निकाला जा सकता।
24 पिक्सेल का बड़ा शीर्षक
16 पिक्सेल का उपशीर्षक, अर्ध-मोटा
13 पिक्सेल का मुख्य पाठ। यही आकार तय करता है कि रंगों की कोई जोड़ी सचमुच काम की है या नहीं।
उलटकर, पृष्ठभूमि को पाठ का रंग मानते हुए: Lc -60.3
ΔE 0.05 से नीचे दो नमूने उस दर्शक के लिए एक ही रंग हैं, इसलिए उन्हें अलग पहचानने पर टिका पैलेट टूट जाएगा। अनुकरण Viénot, Brettel और Mollon (1999) के अनुसार है और रैखिक प्रकाश में लगाया जाता है।
दूरी OKLab में ΔE है, जहाँ लगभग 0.02 पर अधिकांश लोग दो नमूनों को अलग रंग देखने लगते हैं। किसी पंक्ति पर क्लिक करके ठीक उसी रंग पर जाइए।
यह कैसे काम करता है
एक रंग लाइए
कोई भी CSS लेखन-शैली टाइप कीजिए, स्क्रीन ड्रॉपर इस्तेमाल कीजिए, पूरा पैलेट चिपकाइए, या कोई छवि खोलकर मनचाहे पिक्सेल पर क्लिक कीजिए।
उसे गढ़िए
चमक, क्रोमा और रंगत के स्लाइडर जो पीले पर वैसा ही बर्ताव करते हैं जैसा नीले पर, साथ में सीढ़ियाँ, सामंजस्य और मिश्रण।
जाँचिए
किसी भी पृष्ठभूमि पर WCAG 2.1 और APCA, और वर्णांधता का अनुकरण जो बताता है कि कब दो नमूने एक में मिल जाते हैं।
साथ ले जाइए
कोई एक लेखन-शैली कॉपी कीजिए, CSS, Tailwind, SCSS, JSON, SVG या नमूनों की शीट निर्यात कीजिए, या पैलेट अगले औज़ार को सौंप दीजिए।
CSS रंग की हर लेखन-शैली
3, 4, 6 या 8 अंकों का हेक्स, कीवर्ड, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() और display-p3। पढ़ने का काम ब्राउज़र का अपना पार्सर करता है, इसलिए कुछ भी छूटता नहीं।
बराबर कदम वाली सीढ़ियाँ
OKLCH में बनी ग्यारह सीढ़ियाँ, जिससे हर पायदान पिछले से एक जैसी दृश्य दूरी पर रहता है, HSL सीढ़ी की असमान छलाँगों की जगह।
WCAG 2.1 और APCA
पुराना अनुपात और साथ में WCAG 3 प्रारूप का चिह्नयुक्त Lc मान, आपकी चुनी हुई पृष्ठभूमि पर मापा गया, केवल सफ़ेद और काले पर नहीं।
वर्णांधता की जाँच
प्रोटानोपिया, ड्यूटेरानोपिया और ट्रिटानोपिया रैखिक प्रकाश में अनुकरणित, साथ में किन्हीं दो नमूनों के बीच सबसे कम दूरी, ताकि पता चले कि पैलेट कब बिखर जाता है।
ड्रॉपर और छवियाँ
जहाँ ब्राउज़र अनुमति दे वहाँ स्क्रीन पर कहीं से रंग उठाइए, या कोई छवि खोलकर कर्सर के नीचे वाले पिक्सेल पर ज़ूम कीजिए और उसका सटीक मान लीजिए।
सामंजस्य और मिश्रण
पूरक, सन्निकट, त्रिक, विभाजित, चतुष्क और एकवर्णी सेट OKLCH में घुमाए गए, साथ में रंगत के छोटे चाप पर बोधगम्य मिश्रण।
कहीं भी निर्यात
CSS कस्टम प्रॉपर्टीज़, Tailwind का @theme खंड, SCSS चर, JSON, SVG या PNG में नमूनों की शीट, और GIMP पैलेट फ़ाइल।
कुछ भी टैब से बाहर नहीं जाता
न अपलोड, न कोई API कॉल, न कोई खाता। हर रूपांतरण, कंट्रास्ट का हर आँकड़ा और हर पैलेट आपका अपना ब्राउज़र ही गिनता है।
तुरंत स्थानीय प्रसंस्करण
हर रूपांतरण तीन संख्याओं का गणित है, इसलिए न कुछ प्रतीक्षा करनी है और न कहीं कुछ भेजना है। आपने जो लिखा उसे पढ़ने का काम ब्राउज़र के अपने CSS इंजन को सौंपा गया है, इसीलिए कीवर्ड, color-mix() और चौड़े गैमट की लेखन-शैलियाँ ठुकराई नहीं जातीं बल्कि समझी जाती हैं। बोधगम्य हिस्सा — OKLCH सीढ़ियाँ, गैमट मैपिंग, ΔE दूरियाँ, वर्णांधता का अनुकरण — कुछ सौ फ़्लोटिंग-पॉइंट संक्रियाएँ भर है, और किसी बड़ी तस्वीर से पैलेट निकालना भी घटाई गई प्रतिलिपि पर k-means का एक चक्र है जो एक सेकंड से काफ़ी कम में निपट जाता है।
रंग के काम में अटपटा हिस्सा शायद ही कभी रूपांतरण होता है: असली काम है ऐसा पैमाना बनाना जो बराबर कदमों से बढ़े, यह साबित करना कि दो रंगों की जोड़ी पढ़ी जा सकती है, और नतीजा उस रूप में देना जिसकी आपके कोड को उम्मीद है। यह औज़ार आपके मौजूदा रंग पर ग्यारह पायदान की सीढ़ी टिकाता है, बताता है कि किन पायदानों को वापस sRGB में लाना पड़ा और कितना, नापी हुई दूरी के साथ सबसे नज़दीकी CSS कीवर्ड और Tailwind टोकन का नाम देता है, और पूरे पैलेट को कस्टम प्रॉपर्टीज़, Tailwind थीम खंड, SCSS, JSON या नमूनों की शीट के रूप में निर्यात करता है।
इस औज़ार का कोई सर्वर पक्ष है ही नहीं। आपके लिखे रंग, चिपकाए पैलेट और खोली गई छवियाँ टैब में ही रहती हैं: छवि एक कैनवस में खुलती है जो कभी आपकी मशीन से बाहर नहीं जाता, और टैब बंद करते ही सब कुछ मिट जाता है। बाहर सिर्फ़ वही जाता है जो आप स्वयं पता-पट्टी में डालते हैं — पैलेट वहीं एन्कोड होता है ताकि आप लिंक साझा कर सकें, और आपके सत्र के बारे में और कुछ दर्ज नहीं होता।
अक्सर पूछे जाने वाले प्रश्न
Qमैं कौन-कौन से रंग प्रारूप चिपका सकता हूँ?+
3, 4, 6 या 8 अंकों का हेक्स, CSS के 148 कीवर्ड, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() और color(display-p3 …)। इनपुट ब्राउज़र के अपने CSS पार्सर से गुज़रता है, इसलिए जो कुछ आपका ब्राउज़र स्टाइलशीट में स्वीकार करता है वह यहाँ भी चलता है। उस पार्सर के बिना भी औज़ार हेक्स, rgb() और hsl() पढ़ता रहता है।
Qयह औज़ार HSL के बजाय OKLCH को क्यों तरजीह देता है?+
HSL में एक ही लाइटनेस मान वाले दो रंग चमक में बहुत अलग दिख सकते हैं — 50% पर पीला, 50% पर नीले से कहीं ज़्यादा हल्का लगता है। OKLCH इस तरह बना है कि उसकी चमक वही बताए जो आँख देखती है, इसीलिए यहाँ सीढ़ियाँ, सामंजस्य और मिश्रण सब उसी स्थान में घूमते और प्रक्षेपित होते हैं।
QΔE संख्या का क्या अर्थ है?+
यह OKLab में दो रंगों के बीच की दूरी है। लगभग 0.02 पर अधिकांश लोग दो नमूनों को सचमुच अलग रंग देखने लगते हैं, इसलिए यह एक काम का पैमाना है: यह बताता है कि sRGB में वापस दबाए जाने पर सीढ़ी का कोई पायदान कितना खिसका, सबसे नज़दीकी Tailwind टोकन असल में कितना नज़दीक है, और क्या पैलेट के दो रंग वर्णांधता के अनुकरण में टिके रहते हैं।
Qक्या कंट्रास्ट जाँचक WCAG के अनुरूप है?+
WCAG 2.1 का अनुपात ठीक उसी तरह गिना जाता है जैसा विनिर्देश कहता है, आपकी चुनी पृष्ठभूमि पर, और लेबल मुख्य पाठ को बड़े पाठ की ढीली सीमा से अलग करता है, एक अकेला "उत्तीर्ण" चिह्न दिखाने के बजाय। उसके साथ APCA है, WCAG 3 के लिए प्रस्तावित बोधगम्य माप — व्यवहार में उपयोगी, पर अब भी प्रारूप है, अनुपालन की कसौटी नहीं।
Qक्या यह CMYK छपाई के लिए तैयार है?+
नहीं, और किसी भी ब्राउज़र औज़ार का नहीं होता। आपको मानक गणितीय रूपांतरण मिलता है, जो मोटे अंदाज़े के लिए या उन सॉफ़्टवेयर के लिए ठीक है जो यही चार संख्याएँ माँगते हैं। असली पृथक्करण कागज़, स्याही और ICC आउटपुट प्रोफ़ाइल पर निर्भर करता है, इसलिए वह आपके लेआउट या इमेजिंग सॉफ़्टवेयर में ही होना चाहिए।
Qक्या मेरा चिपकाया हुआ कुछ भी अपलोड होता है?+
नहीं। कोई सर्वर हिस्सा नहीं है, आपके रंगों पर कोई एनालिटिक्स नहीं है, और रूपांतरण के किसी भी चरण में कोई नेटवर्क अनुरोध नहीं होता। छवियाँ स्थानीय रूप से एक कैनवस में खुलती हैं और बंद करते ही हटा दी जाती हैं। पैलेट पृष्ठ के URL में लिखा जाता है ताकि आप उसे साझा कर सकें या बुकमार्क कर सकें — आपके रंग बस वहीं रहते हैं, और जब तक आप स्वयं लिंक न भेजें वह आपकी मशीन पर ही रहता है।