कलर कन्वर्शन क्या है?
आपका ब्राउज़र जो भी रंग प्रस्तुत करता है वह अंततः एक sRGB त्रिगुण होता है — लाल, हरे और नीले चैनलों के लिए 0 और 255 के बीच तीन संख्याएँ, और एक वैकल्पिक अल्फा। CSS कलर लेवल 4 विनिर्देश कई टेक्स्ट प्रारूप परिभाषित करता है जो उसी त्रिगुण में राउंड-ट्रिप करते हैं, साथ ही प्रत्यक्षीकरण-समान OKLCH स्पेस। यह टूल उनमें से किसी को पढ़ता है, सभी में रूपांतरित करता है, और दूसरे रंग के विरुद्ध WCAG 2.1 कंट्रास्ट अनुपात रिपोर्ट करता है ताकि आप विश्वास के साथ सुलभ इंटरफ़ेस शिप कर सकें।
कलर कन्वर्शन कैसे काम करता है?
रूपांतरण सुपरिभाषित रेखीय और गैर-रेखीय परिवर्तनों की एक श्रृंखला है। हर चरण आपके ब्राउज़र में चलता है — कोई भी इनपुट कभी हमारे सर्वर तक नहीं पहुँचता:
- आपका इनपुट पार्स किया जाता है। टूल स्वचालित रूप से 3, 4, 6, या 8-अंकीय HEX, फ़ंक्शनल रूप
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()को या तो विरासत कॉमा सिंटैक्स में या आधुनिक स्लैश-अल्फा सिंटैक्स में, या 150 नामित CSS रंगों में से किसी को (rebeccapurpleसहित) पहचान लेता है। - पार्स किया गया रंग कैनोनिकल sRGB में सामान्यीकृत किया जाता है — चार फ़्लोट
{r, g, b, a}, प्रत्येक 0–1 की सीमा में। यही सत्य का एकमात्र स्रोत है जिससे हर आउटपुट प्रारूप व्युत्पन्न होता है। - HEX प्रत्येक चैनल को उसके 0–255 बाइट मान पर गोल करने और हेक्स अंकों को जोड़ने से आता है। RGB / RGBA वही बाइट्स प्रिंट करते हैं। HSL और HSV मानक W3C बेलनाकार-निर्देशांक एल्गोरिथ्म लागू करते हैं; HWB रंगिमा HSV से, श्वेतता
min(r, g, b)से और कृष्णता1 - max(r, g, b)से व्युत्पन्न करता है। - CMYK एक भोला अनुमान है —
k = 1 - max(r, g, b), फिर शेष चैनलों सेc, m, y। यह स्क्रीन पूर्वावलोकन के लिए उपयुक्त है लेकिन प्रिंट के लिए नहीं: वास्तविक CMYK आउटपुट के लिए एक ICC प्रोफ़ाइल चाहिए जिसे यह टूल जानबूझकर एम्बेड नहीं करता। - OKLCH css-color-4 के अग्रवर्ती पथ का अनुसरण करता है: sRGB को रेखीयकृत किया जाता है, LMS मैट्रिक्स से गुणा किया जाता है, घनमूल लिया जाता है, LMS-से-OKLab मैट्रिक्स से गुणा किया जाता है, और अंत में आयताकार OKLab से ध्रुवीय OKLCH में रूपांतरित किया जाता है। OKLCH प्रत्यक्षीकरण-समान है, जो इसे ऐसे पैलेट डिज़ाइन करने के लिए सही स्पेस बनाता है जो मानवीय आँख को संतुलित दिखें।
इस कलर कन्वर्टर का उपयोग क्यों करें?
- गोपनीयता: हर रूपांतरण आपके ब्राउज़र में सादे JavaScript का उपयोग करके चलता है। आपके द्वारा पेस्ट किया गया रंग कभी आपके डिवाइस से बाहर नहीं जाता, जो अप्रकाशित ब्रांड कार्य, आंतरिक डिज़ाइन सिस्टम और NDA के अधीन क्लाइंट मॉकअप के लिए मायने रखता है।
- डिज़ाइनर-से-डेवलपर हैंडऑफ़: Figma से HEX पेस्ट करें और Tailwind कॉन्फ़िग के लिए
rgb()स्ट्रिंग, CSS कस्टम प्रॉपर्टी के लिएhsl()स्ट्रिंग, या आधुनिक पैलेट के लिएoklch()स्ट्रिंग पढ़ें — हर प्रारूप एक ही जगह, टैब के बीच कॉपी-पेस्ट किए बिना। - WCAG सटीकता: कंट्रास्ट चेकर सटीक WCAG 2.1 सापेक्ष-प्रदीप्ति सूत्र और सामान्य और बड़े टेक्स्ट के लिए प्रकाशित AA (4.5 / 3.0) तथा AAA (7.0 / 4.5) सीमाओं का उपयोग करता है। रिपोर्ट किया गया अनुपात मैन्युअल कैलकुलेटरों के साथ 0.01 के भीतर मेल खाता है।
- डार्क-मोड और पैलेट व्युत्पत्ति: HSL और OKLCH चमकीलापन को एकल चैनल के रूप में उजागर करते हैं, इसलिए ब्रांड रंग को चमकीलापन अक्ष पर ऊपर या नीचे स्थानांतरित करना ताकि मेल खाते डार्क-मोड टोकन व्युत्पन्न किए जा सकें या एकल बीज से 10-चरणीय पैलेट रैंप बनाया जा सके, सीधा हो जाता है।
कलर कन्वर्शन के सामान्य अनुप्रयोग क्या हैं?
रंग रूपांतरण वेब विकास, डिज़ाइन और सुलभता कार्य में हर जगह दिखाई देता है:
- डिज़ाइन सिस्टम: एक ब्रांड HEX को CSS कस्टम-प्रॉपर्टी पैमाने के लिए मेल खाते HSL और OKLCH टोकनों में रूपांतरित करना, फिर सत्यापित करना कि हर टोकन संयोजन पृष्ठ पृष्ठभूमि के विरुद्ध WCAG AA पास करता है।
- सुलभता ऑडिट: किसी वास्तविक उत्पाद स्क्रीन से अग्रभूमि और पृष्ठभूमि की जोड़ी पेस्ट करना और एक ही नज़र में सामान्य-भार और बड़े-भार टेक्स्ट दोनों के लिए कंट्रास्ट अनुपात तथा AA/AAA फ़ैसले पढ़ना।
- क्रॉस-टूल राउंड-ट्रिप: स्क्रीनशॉट पिकर से रंग खींचना (HEX), यहाँ पेस्ट करना, और
hsl()याoklch()स्ट्रिंग को सीधे Tailwind, Figma टोकन, या CSS-in-JS थीम में कॉपी करना।
कलर कन्वर्शन का उदाहरण कैसा दिखता है?
प्रसिद्ध rebeccapurple को लें। नामित-रंग खोज इसे #663399 में हल कर देती है। RGB रूपांतरण rgb(102, 51, 153) देता है। HSL रूपांतरण hsl(270, 50%, 40%) देता है — एक बैंगनी रंगिमा, आधी संतृप्त, चार-दसवीं चमकीली। उस रंग को शुद्ध सफ़ेद के विरुद्ध कंट्रास्ट टूल से जाँचने पर लगभग 7.39 का अनुपात मिलता है, जो सामान्य टेक्स्ट के लिए AAA (7.0) और बड़े टेक्स्ट के लिए AAA (4.5) पास कर देता है — एक मज़बूत, सुलभ अग्रभूमि विकल्प। #663399 को RGB → HSL → RGB → HEX के माध्यम से राउंड-ट्रिप करने पर मूल स्ट्रिंग ठीक उसी रूप में, बाइट-दर-बाइट लौटती है।
इस कन्वर्टर को कोड में, डिज़ाइन फ़ाइलों में, या स्क्रीनशॉट में आपके सामने आने वाले किसी भी रंग के लिए एक त्वरित संदर्भ के रूप में उपयोग करें — और कंट्रास्ट चेकर को शिप करने से पहले एक विवेक जाँच के रूप में। सब कुछ स्थानीय रूप से चलता है, कुछ भी लॉग नहीं होता, और रूपांतरण गणित प्रकाशित W3C और WCAG विनिर्देशों का अनुसरण करता है ताकि संख्याएँ वही हों जो आपका ऑडिट टूल या ब्राउज़र डेवटूल्स रिपोर्ट करेंगे।