कलर कन्वर्टर

पाँच कलर फ़ॉर्मैट

HEX

हेक्साडेसिमल — #RRGGBB, लाल, हरे और नीले के लिए दो-दो हेक्स अंक। वेब का डिफ़ॉल्ट।

RGB

लाल, हरा, नीला 0–255 पर। स्क्रीन असल में इसी तरह प्रकाश मिलाती है (योगात्मक)।

HSL

ह्यू (0–360°), सैचुरेशन, लाइटनेस — रंग चुनने और समायोजित करने के लिए सहज।

HSV / HSB

ह्यू, सैचुरेशन, वैल्यू (ब्राइटनेस) — अधिकांश कलर पिकर यही मॉडल इस्तेमाल करते हैं।

CMYK

सायन, मैजेंटा, पीला, की/ब्लैक (0–100%) — प्रिंट के लिए घटाव (सबट्रैक्टिव) मॉडल।

रूपांतरण कैसे काम करते हैं

सब कुछ उसी लाल/हरे/नीले त्रिक से निकाला जाता है। HEX ↔ RGB बस हर चैनल पर बेस-16 ↔ बेस-10 है। RGB ↔ HSL/HSV अधिकतम और न्यूनतम चैनल निकालकर ह्यू और सैचुरेशन पाता है, फिर लाइटनेस (अधिकतम और न्यूनतम का मध्य-बिंदु) या वैल्यू (अधिकतम)। RGB → CMYK में K = 1 − max(R, G, B) इस्तेमाल होता है, फिर C = (1 − R − K) / (1 − K) और वही M तथा Y के लिए। यह सब स्थानीय रूप से की गई सटीक अंकगणित है — कोई राउंडिंग चालाकी नहीं, कोई सर्वर नहीं।

हल किया गया उदाहरण — #1E90FF (DodgerBlue)

• RGB: 1E→30, 90→144, FF→255 ⇒ rgb(30, 144, 255)
• HSL: hsl(210, 100%, 56%) — पूरी तरह संतृप्त नीला, मध्य से थोड़ा हल्का
• HSV: hsv(210, 88%, 100%) — वही ह्यू, पूरी ब्राइटनेस
• CMYK: cmyk(88%, 44%, 0%, 0%)

लोकप्रिय नामित रंग

कंट्रास्ट और सुलभता

कन्वर्टर आपके रंग का WCAG कंट्रास्ट अनुपात काले और सफ़ेद के मुक़ाबले दिखाता है, ताकि आप एक नज़र में जान सकें कि कौन-सा पठनीय टेक्स्ट बनाता है। बॉडी टेक्स्ट के लिए कम से कम 4.5:1 (WCAG AA), या AAA के लिए 7:1 का लक्ष्य रखें; बड़े टेक्स्ट (≥24px, या ≥19px बोल्ड) को 3:1 चाहिए। दो विशिष्ट अग्रभूमि/पृष्ठभूमि रंगों की जाँच के लिए एक समर्पित कंट्रास्ट चेकर बेहतर रहता है।

योगात्मक बनाम घटाव: RGB और CMYK

पाँच फ़ॉर्मैट के बीच सबसे गहरा फ़र्क उनकी संकेतन-पद्धति नहीं बल्कि उनकी भौतिकी है। RGB योगात्मक है: स्क्रीन काले से शुरू होती है और लाल, हरा तथा नीला प्रकाश जोड़ती है। तीनों को पूरी शक्ति पर चढ़ा दें तो किरणें आपस में मिलकर सफ़ेद बन जाती हैं; तीनों बंद कर दें तो पिक्सल कुछ नहीं उत्सर्जित करता, इसलिए आपको काला दिखता है। इसी कारण हर मॉनिटर, फ़ोन और टीवी पर rgb(255, 255, 255) सफ़ेद है और rgb(0, 0, 0) काला है — हर एक तीन रंगीन प्रकाशों का नियंत्रित मिश्रण भर है।

CMYK घटाव वाला है: काग़ज़ सफ़ेद से शुरू होता है (यह हर तरंगदैर्घ्य परावर्तित करता है) और हर स्याही स्पेक्ट्रम का कुछ हिस्सा घटाती है। सायन लाल सोखती है, मैजेंटा हरा सोखती है और पीला नीला सोखता है, इसलिए जितनी अधिक स्याही उतना कम प्रकाश परावर्तित होता है और परिणाम काले की ओर बढ़ता है। दोनों मॉडल एक-दूसरे के दर्पण-प्रतिबिंब हैं — RGB प्रकाश से अँधेरे से रंग बनाता है, CMYK रंजक से सफ़ेद में से रंग तराशता है। यह यह भी समझाता है कि प्राथमिक रंग भूमिकाएँ क्यों बदलते हैं: सायन, मैजेंटा और पीला प्रकाश के द्वितीयक रंग हैं (हर वह है जो किसी एक RGB प्राथमिक को हटाने पर बचता है), जबकि लाल, हरा और नीला स्याही के द्वितीयक हैं।

HEX किसी रंग को कैसे एन्कोड करता है

एक हेक्स रंग बस बेस 16 में लिखा गया एक RGB त्रिक है। #RRGGBB के छह अंक तीन जोड़े हैं — लाल, हरा, नीला — और हर जोड़ा 00 से FF तक की दो-अंकीय हेक्साडेसिमल संख्या है, यानी रोज़मर्रा के दशमलव में 0 से 255। हेक्साडेसिमल 0–9 तक गिनता है फिर दस से पंद्रह के लिए A–F, इसलिए एक हेक्स अंक सोलह मान समेटता है और एक जोड़ा 16 × 16 = 256 — ठीक एक 8-बिट चैनल की सीमा। FF पढ़ना बस 15 × 16 + 15 = 255 है, अधिकतम; 80 है 8 × 16 = 128, लगभग आधा; 00 उस चैनल का कुछ नहीं।

यह संकेतन शुरुआती HTML से चला आता है और टिका रहा क्योंकि एक सुगठित टोकन पूरा रंग समेट लेता है। दो शॉर्टकट जानने लायक हैं। तीन-अंकीय संक्षिप्त रूप #RGB हर अंक को दोगुना करता है, इसलिए #09C फैलकर #0099CC बनता है — सुविधाजनक, पर केवल 4,096 रंग व्यक्त कर सकता है। आठ-अंकीय रूप #RRGGBBAA एक अल्फ़ा (अपारदर्शिता) बाइट जोड़ता है, जहाँ FF पूरी तरह अपारदर्शी है और 80 लगभग 50% पारदर्शी। CSS इन्हें rgb() और rgba() फ़ंक्शन के साथ आपस में बदले जाने योग्य मानता है, और प्रति चैनल 8 बिट के साथ पूरा #RRGGBB स्पेस 256³ ≈ 1.67 करोड़ अलग-अलग रंग रखता है — "ट्रू कलर" या 24-बिट रेंज।

HSL और HSV: रंग जैसा इंसान सोचता है

कोई भी सहज रूप से नहीं जानता कि "थोड़ा गहरा, कम चटख नारंगी" rgb(204, 119, 51) है। RGB और हेक्स रंग को वैसे बताते हैं जैसे हार्डवेयर उसे मिलाता है, न कि जैसे लोग उसकी कल्पना करते हैं। HSL और HSV उसी RGB घन की बेलनाकार पुनर्मैपिंग हैं जो मानवीय सोच से मेल खाने के लिए बनी हैं: दोनों ह्यू को 0–360° के पहिये पर रखते हैं (0° लाल, 120° हरा, 240° नीला), फिर रंग कितना शुद्ध बनाम धूसर है इसके लिए एक सैचुरेशन अक्ष और ब्राइटनेस के लिए एक तीसरा अक्ष जोड़ते हैं। ये कोई नया रंग नहीं लाते — हर HSL या HSV मान अब भी एक ही RGB त्रिक में बदलता है — ये बस आपको ऐसे नियंत्रण देते हैं जो वैसे चलते हैं जैसे आपकी आँख अपेक्षा करती है।

दोनों को अगस्त 1978 में Computer Graphics के एक ही ऐतिहासिक अंक में औपचारिक रूप दिया गया: Alvy Ray Smith ने HSV (जिसे HSB भी लिखा जाता है, यानी Hue-Saturation-Brightness) का वर्णन किया और, उसी अंक में, Joblove और Greenberg ने HSL का। दोनों केवल उस तीसरे चैनल में भिन्न हैं, और यह फ़र्क कई लोगों को उलझा देता है। HSL में, लाइटनेस काला → शुद्ध रंग → सफ़ेद चलती है, इसलिए 50% सबसे रंगीन बिंदु है और 100% ह्यू चाहे जो हो, हमेशा सफ़ेद होता है। HSV में, वैल्यू काला → सबसे चटख रंग चलती है, और 100% उस ह्यू का सबसे चमकीला, सबसे संतृप्त रूप है — अपने आप में कभी सफ़ेद नहीं। किसी "वैल्यू" स्लाइडर को ऊपर तक धकेलें तो आपको चटख लाल मिलता है; किसी HSL "लाइटनेस" स्लाइडर को ऊपर तक धकेलें तो आपको सफ़ेद मिलता है। अधिकांश ऑन-स्क्रीन कलर पिकर HSV/HSB दिखाते हैं, जबकि CSS लेखक अधिकतर HSL टाइप करते हैं — एक वजह कि यह कन्वर्टर दोनों दिखाता है।

स्क्रीन से CMYK केवल एक पूर्वावलोकन क्यों है

ऊपर के CMYK मान मानक K = 1 − max(R, G, B) रूपांतरण से आते हैं, और वे अंकगणितीय रूप से सही हैं — पर वे प्रिंट-सटीक प्रूफ़ नहीं हैं, और किसी भी साधारण कन्वर्टर के नहीं हो सकते। कारण है गैमट: एक दमकती स्क्रीन जो रंग उत्सर्जित कर सकती है और कोई विशेष स्याही-और-काग़ज़ संयोजन जो रंग परावर्तित कर सकता है, उनके आकार अलग हैं, और कई चमकीले, संतृप्त स्क्रीन रंग (इलेक्ट्रिक नीले, नियॉन हरे, शुद्ध सायन) उससे बाहर पड़ते हैं जो स्याही बिल्कुल भी नहीं बना सकती। किसी सूत्र को आपके प्रेस, काग़ज़ या स्याही का कोई ज्ञान नहीं होता, इसलिए वह आपको नहीं बता सकता कि कोई गैमट-बाहरी रंग पन्ने पर असल में क्या बनेगा।

असली प्रिंट वर्कफ़्लो उस खाई को एक ICC कलर प्रोफ़ाइल से पाटते हैं — किसी विशिष्ट डिवाइस का मापा गया विवरण जो स्याही के व्यवहार, डॉट गेन और काग़ज़ स्टॉक का हिसाब रखते हुए रंगों को उसकी पुनरुत्पादन-योग्य सीमा में मैप करता है। एक ही CMYK प्रतिशत दिए जाने पर दो प्रेस स्पष्ट रूप से भिन्न रंग छाप सकते हैं, यही ठीक वह कारण है कि RGB और CMYK डिवाइस-निर्भर हैं और कोई सार्वभौमिक सूत्र इनके बीच रूपांतरण नहीं करता। यहाँ के CMYK को स्याही मिश्रण चुनने या किसी डिज़ाइन की जाँच के लिए एक समझदार शुरुआती अनुमान समझें, फिर किसी रन के लिए प्रतिबद्ध होने से पहले अपने प्रिंटर की प्रोफ़ाइल के मुक़ाबले प्रूफ़ करें।

कलर स्पेस, sRGB और गैमट

एक हेक्स कोड या RGB त्रिक, अपने आप में, अस्पष्ट है: #FF0000 किसी विशिष्ट लाल का नाम तभी रखता है जब आप किसी कलर स्पेस पर सहमत हों जो तय करे कि "पूर्ण लाल" कैसा दिखता है। वेब पर वह सहमति sRGB है, एक मानक स्पेस जिसे Hewlett-Packard और Microsoft ने 1996 में बनाया और IEC 61966-2-1 के रूप में प्रकाशित किया। ब्राउज़र, CSS और बिना-टैग वाली छवियाँ सभी sRGB मानती हैं, यही वजह है कि इस कन्वर्टर की संख्याएँ एक मशीन से दूसरी तक एक-सी बनी रहती हैं — हर कोई उन्हें एक ही संदर्भ के मुक़ाबले पढ़ता है।

sRGB का दायरा जान-बूझकर मामूली रखा गया ताकि यह 1990 के दशक के CRT मॉनिटरों पर सही दिखे, और अब अधिक विस्तृत स्पेस मौजूद हैं। Adobe RGB (1998) गैमट को खींचता है, ख़ासकर हरे और सायन में से, और फ़ोटोग्राफ़ी तथा प्रिंट तैयारी में पसंद किया जाता है। Display P3, जो अधिकांश हाल के Apple और अन्य वाइड-गैमट स्क्रीन में इस्तेमाल होता है, sRGB से लगभग 25% अधिक क्षेत्र कवर करता है और अधिक संतृप्त लाल और हरे दिखा सकता है। व्यावहारिक सीख: एक जैसी संख्याएँ अलग-अलग स्पेस में अलग दिख सकती हैं, इसलिए वेब के लिए बनाते समय sRGB में ही रहें, जब तक आपने CSS Color 4 सिंटैक्स जैसे color(display-p3 …) से जान-बूझकर किसी विस्तृत स्पेस में न चुना हो।

वेब रंग का संक्षिप्त इतिहास

वेब रंग आज भी सीमित डिस्प्ले के युग के जीवाश्म ढोता है। 1990 के दशक के आख़िर में कई मशीनें एक बार में केवल 256 रंग दिखा सकती थीं, इसलिए डिज़ाइनर 216 "वेब-सेफ़" रंगों पर टिके रहे — एक 6 × 6 × 6 घन जो केवल हेक्स मानों 00, 33, 66, 99, CC और FF (0%, 20%, 40%, 60%, 80%, 100%) से बना था। वे ब्राउज़रों और सिस्टमों में एक-समान, बिना डिदरिंग के, रेंडर होते थे। ट्रू-कलर डिस्प्ले अब सर्वव्यापी होने से वेब-सेफ़ पैलेट अप्रचलित है, पर पुरानी स्टाइल शीटों में आपको वे गोल मान अब भी मिलते हैं।

नामित रंगों की वंशावली भी ऐसी ही है। HTML ने मूल रूप से केवल 16 बुनियादी कीवर्ड परिभाषित किए (black, white, red, lime, aqua वग़ैरह)। CSS ने बाद में X11 रंग नाम समाहित किए — वह सेट जो Unix X Window System के साथ आया था, dodgerblue, papayawhip और rebeccapurple से भरा — जिससे कुल संख्या आधुनिक ब्राउज़रों द्वारा पहचाने जाने वाले लगभग 140 कीवर्ड तक पहुँच गई। इस टूल का "निकटतम नामित रंग" खोजक उस पूरी सूची में खोजता है ताकि आप जिस भी रंग पर पहुँचें उसे नाम दे सके।

समान चरण, असमान आँखें

इन सबके नीचे एक सूक्ष्मता बैठी है: रंग-संख्याएँ प्रत्यक्षगत रूप से एक-समान नहीं हैं। चूँकि sRGB मानों को एक अरैखिक गामा वक्र (लगभग 2.2) के माध्यम से संग्रहीत करता है, rgb(10, 10, 10) से rgb(20, 20, 20) तक की छलाँग आपकी आँख को rgb(200, 200, 200) से rgb(210, 210, 210) तक की छलाँग से कहीं अधिक बड़ी दिखती है, भले ही दोनों दस जोड़ते हों। समान संख्यात्मक चरण समान दृश्य चरण नहीं होते। इसी असमानता के कारण मानव दृष्टि चैनलों को असमान रूप से महत्व देती है — हरा प्रत्यक्ष ब्राइटनेस पर हावी रहता है — जो WCAG सापेक्ष-द्युति सूत्र 0.2126·R + 0.7152·G + 0.0722·B में समाया है, जिसे यह पेज कंट्रास्ट के लिए इस्तेमाल करता है। डिज़ाइनर HSL में सोचते हैं पर हेक्स में भेजते हैं — यही रोज़मर्रा का लक्षण है: उस स्पेस में रंग चुनें जो आपके इरादे से मेल खाता हो, फिर उसे उस फ़ॉर्मैट में बदलें जिसकी प्लेटफ़ॉर्म अपेक्षा करता है।

रंग रूपांतरण की आम गलतियाँ

• CMYK को प्रिंट-सटीक मान लेना। सूत्र-आधारित CMYK मान एक पूर्वावलोकन है, प्रूफ़ नहीं। प्रेस पर जाने वाली किसी भी चीज़ के लिए अपने प्रिंटर की ICC प्रोफ़ाइल के ज़रिए बदलें और एक भौतिक प्रूफ़ जाँचें।
• हेक्स को डिवाइस-निरपेक्ष मानना। #3366CC किसी रंग को केवल किसी कलर स्पेस के सापेक्ष तय करता है; बिना कलर मैनेजमेंट वाली वाइड-गैमट स्क्रीन पर यह खिसक सकता है। वेब की बचत यह है कि हर कोई sRGB मानता है।
• HSB/HSV को HSL से गड्डमड्ड करना। ये ह्यू और सैचुरेशन साझा करते हैं, पर इनका तीसरा चैनल अलग है — 100% वैल्यू एक चटख रंग देता है, 100% लाइटनेस सफ़ेद देता है। किसी "HSB" संख्या को सीधे किसी hsl() फ़ंक्शन में कॉपी करने से वह रंग नहीं बनेगा जो आपने पिकर में देखा था।
• RGB↔CMYK आवाजाही के मेल खाने की अपेक्षा करना। चूँकि गैमट भिन्न हैं, RGB → CMYK → RGB जाने पर थोड़ा भिन्न रंग पर पहुँचा जा सकता है; रूपांतरण स्वभाव से ही अनुमानित है, कोई बग नहीं।
• HSL और HSV में सैचुरेशन को एक जैसा पढ़ना। दोनों सैचुरेशन पैमाने अलग-अलग तरह से गणना किए जाते हैं, इसलिए वही रंग आमतौर पर दो भिन्न सैचुरेशन प्रतिशत रखता है, इस पर निर्भर कि आप कौन-सा मॉडल पढ़ते हैं।

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

मैं HEX को RGB में कैसे बदलूँ?

छह-अंकीय हेक्स को तीन जोड़ों में बाँटें और हर जोड़े को 0 से 255 तक की बेस-16 संख्या के रूप में पढ़ें। उदाहरण के लिए #1E90FF में R=0x1E=30, G=0x90=144, B=0xFF=255, यानी rgb(30, 144, 255)। यह टूल इसे तुरंत करता है और साथ ही आपको उसी समय HSL, HSV और CMYK भी देता है।

HSL और HSV (HSB) में क्या अंतर है?

दोनों एक ही ह्यू (0–360°) और सैचुरेशन से शुरू होते हैं, पर तीसरा चैनल भिन्न है। HSL की लाइटनेस काले (0%) से शुद्ध रंग (50%) होते हुए सफ़ेद (100%) तक चलती है। HSV की वैल्यू काले (0%) से रंग के सबसे चमकीले रूप (100%) तक चलती है और अपने आप कभी सफ़ेद तक नहीं पहुँचती। अधिकांश ऑन-स्क्रीन कलर पिकर HSV इस्तेमाल करते हैं; HSL CSS में आम है।

CMYK, RGB से अलग क्यों दिखता है?

RGB योगात्मक है (स्क्रीन पर प्रकाश मिलाना) और CMYK घटाव वाला है (काग़ज़ पर स्याही मिलाना), इसलिए दोनों बिल्कुल एक ही रंग-सीमा को नहीं दर्शा सकते। यहाँ के CMYK मान एक मानक गणितीय रूपांतरण हैं — शुरुआती बिंदु के रूप में उपयोगी, पर सटीक प्रिंट काम के लिए हमेशा अपने प्रिंटर की वास्तविक ICC कलर प्रोफ़ाइल के मुक़ाबले प्रूफ़ करें।

अल्फ़ा / 8-अंकीय हेक्स क्या है?

अल्फ़ा अपारदर्शिता है, 0 (पूरी तरह पारदर्शी) से 1 (पूरी तरह अपारदर्शी) तक। CSS में आप इसे rgba()/hsla() के रूप में या 8-अंकीय हेक्स (#RRGGBBAA) के रूप में लिख सकते हैं जहाँ आख़िरी जोड़ा एक हेक्स बाइट के रूप में अल्फ़ा है — उदाहरण के लिए 80 का मतलब 50% अपारदर्शिता। तीनों रूप बनाने के लिए पारदर्शिता स्लाइडर हिलाएँ।

कंट्रास्ट अनुपात कैसे निकाला जाता है?

यह WCAG 2.1 सूत्र इस्तेमाल करता है: हर चैनल को रैखिक किया जाता है, सापेक्ष द्युति L = 0.2126·R + 0.7152·G + 0.0722·B होती है, और अनुपात (हल्के का L + 0.05) / (गहरे का L + 0.05) है। यह 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (सफ़ेद पर काला) तक होता है। WCAG AA को सामान्य टेक्स्ट के लिए कम से कम 4.5:1 चाहिए (बड़े टेक्स्ट के लिए 3:1); AAA को 7:1 चाहिए।

क्या मेरा रंग डेटा कहीं भेजा जाता है?

नहीं। हर रूपांतरण आपके ब्राउज़र में स्थानीय रूप से JavaScript के साथ चलता है — कुछ भी अपलोड नहीं होता, और पेज लोड हो जाने के बाद टूल ऑफ़लाइन भी काम करता है।

संबंधित टूल

• WCAG कंट्रास्ट चेकर
• SHA हैश जनरेटर
• JSON फ़ॉर्मैटर और वैलिडेटर
• हेक्स से दशमलव

सभी ब्राउज़र टूल देखें →