HEX से RGB कलर कन्वर्टर और कंट्रास्ट चेकर

HEX को RGB में कैसे बदलें (और वापस)

यह कलर कन्वर्टर लिखते ही HEX कोड को RGB, HSL, HSV, CMYK और OKLCH में बदल देता है, और उल्टा भी काम करता है: किसी भी बॉक्स में rgb(255, 99, 71) पेस्ट करें और आपको #FF6347 मिल जाएगा। हर बॉक्स हर फ़ॉर्मेट लेता है, इसलिए सही खाना ढूँढ़ने की ज़रूरत नहीं पड़ती।

अगर हाथ से करना हो, तो HEX कोड बस बेस 16 में लिखी तीन संख्याएँ हैं। #3B82F6 लें, इसे जोड़ियों में बाँटें, और हर जोड़ी को बदलें:

3B → 3×16 + 11 = 59
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)

RGB से HEX में जाना इसका उल्टा है। हर चैनल को 16 से भाग दें: भागफल पहला अंक है और शेष दूसरा। 255 में 15 भागफल और 15 शेष, यानी FF। 99 में 6 भागफल और 3 शेष, यानी 63। इसीलिए टोमैटो लाल, rgb(255, 99, 71), #FF6347 बनता है।

HEX, RGB और HSL में आम कलर कोड

इन्हें देखते ही पहचान लेना काम का है। ये सब वैध CSS कलर नाम भी हैं, और टूल आपके डाले किसी भी रंग का सबसे नज़दीकी नाम दिखाता है (#3B82F6 सबसे ज़्यादा dodgerblue के करीब है, हालाँकि वही नहीं है)।

नाम	HEX	RGB	HSL
white	#FFFFFF	255, 255, 255	0, 0%, 100%
black	#000000	0, 0, 0	0, 0%, 0%
red	#FF0000	255, 0, 0	0, 100%, 50%
tomato	#FF6347	255, 99, 71	9, 100%, 64%
gold	#FFD700	255, 215, 0	51, 100%, 50%
teal	#008080	0, 128, 128	180, 100%, 25%
navy	#000080	0, 0, 128	240, 100%, 25%
rebeccapurple	#663399	102, 51, 153	270, 50%, 40%

छोटे, लंबे और पारदर्शी HEX कोड

HEX चार लंबाइयों में आता है। तीन अंक छोटा रूप है जिसमें हर अंक दोहराया जाता है, इसलिए #F60 का मतलब #FF6600 है। छह अंक सामान्य रूप है। आठ अंक आखिर में एक अल्फ़ा चैनल जोड़ते हैं: #3B82F680 वही नीला है, 255 में से 128 पर, यानी लगभग 50% अपारदर्शिता। चार अंक उसी का छोटा रूप है। ब्राउज़र सालों से चारों को समझते हैं, लेकिन कुछ डिज़ाइन ऐप और ईमेल क्लाइंट अब भी सिर्फ़ छह अंक लेते हैं, इसलिए शक हो तो छह अंकों वाला कोड पेस्ट करें और अपारदर्शिता अलग से सेट करें।

कौन-सा फ़ॉर्मेट इस्तेमाल करें?

HEX हर उस चीज़ के लिए जिसे आप डिज़ाइन टूल, ब्रांड गाइड या CMS में पेस्ट करते हैं। यह छोटा है और कोई इसे गलत नहीं पढ़ता।
RGB / RGBA जब पुराने CSS या JavaScript canvas कोड में पारदर्शिता चाहिए।
HSL जब आप रंग को सोच-समझकर बदलना चाहते हैं। आखिरी संख्या घटाने से रंग गहरा होता है, बीच वाली घटाने से धूसर। होवर स्टेट इस तरह लिखना कहीं आसान है।
OKLCH नए CSS डिज़ाइन सिस्टम के लिए। इसकी लाइटनेस वैल्यू वही दिखाती है जो आँख देखती है, इसलिए एक जैसे L वाले दो रंग सच में बराबर हल्के दिखते हैं, जो HSL में नहीं होता (50% लाइटनेस पर पीला, 50% वाले नीले से कहीं ज़्यादा चमकीला दिखता है)।
CMYK प्रिंट के लिए सिर्फ़ मोटे अंदाज़े के तौर पर। यहाँ के आँकड़े सीधे फ़ॉर्मूले से आते हैं, प्रिंटर प्रोफ़ाइल से नहीं, इसलिए ब्रोशर आपकी स्क्रीन से हूबहू मेल नहीं खाएगा। प्रिंट शॉप से पूछें कि वे कौन-सी प्रोफ़ाइल इस्तेमाल करते हैं।
HSV / HSB ज़्यादातर Photoshop या Figma के पिकर से मिलान के लिए, जो इसी का इस्तेमाल करते हैं।

कलर कंट्रास्ट चेकर: WCAG में क्या पास होता है?

WCAG 2 टेक्स्ट और बैकग्राउंड की सापेक्ष चमक की तुलना करता है और उसे 1:1 (एक जैसे) से 21:1 (सफ़ेद पर काला) तक के अनुपात में बताता है। सीमाएँ तय हैं:

स्तर	सामान्य टेक्स्ट	बड़ा टेक्स्ट (24px, या 18.66px बोल्ड)
AA	4.5:1	3:1
AAA	7:1	4.5:1

WCAG 2.1 में आइकन, इनपुट बॉर्डर और फ़ोकस रिंग के लिए 3:1 चाहिए। सफ़ेद पर टेक्स्ट के रूप में कुछ असली रंगों का स्कोर यह है:

#FFFFFF पर टेक्स्ट का रंग	अनुपात	नतीजा
#949494	3.03:1	सिर्फ़ बड़ा टेक्स्ट
#777777	4.48:1	बॉडी टेक्स्ट के लिए AA में बाल-बाल फ़ेल
#767676	4.54:1	AA पास
#595959	7.00:1	AAA पास
#3B82F6	3.68:1	सिर्फ़ बड़ा टेक्स्ट और बटन
#008080	4.77:1	AA पास

#777777 वाली लाइन सबसे आम जाल है। यह #767676 जैसा ही दिखता है, और एक दशमलव दिखाने वाला चेकर 4.5 लिखेगा, लेकिन नियम "कम से कम 4.5" है और 4.48 उतना नहीं है। यह टूल फ़ेल होने वाले अनुपात को कभी राउंड करके सीमा तक नहीं पहुँचाता।

जब कोई रंग फ़ेल होता है, तो चेकर उसी ह्यू का सबसे नज़दीकी पास होने वाला शेड खोजता है। सफ़ेद पर #3B82F6 के लिए यह AA के लिए #1E6FF5 (4.52:1) और AAA के लिए #0950C5 (7.08:1) सुझाता है। उसे लोड करने के लिए इस्तेमाल करें दबाएँ, या सीधे अपनी स्टाइलशीट में कॉपी करें। चटक पीले और नारंगी रंगों को सफ़ेद पर टेक्स्ट के रूप में चलाने के लिए आम तौर पर काफ़ी गहरा शेड चाहिए; उनके लिए चटक रंग बैकग्राउंड में रखें और ऊपर गहरा टेक्स्ट लगाएँ।

पैलेट बनाएँ और इमेज से रंग चुनें

पैलेट पैनल 50 से 950 तक टिंट और शेड का स्केल बनाता है (वही नाम जो Tailwind इस्तेमाल करता है), साथ में कॉम्प्लिमेंटरी, एनालॉगस, ट्रायडिक, स्प्लिट-कॉम्प्लिमेंटरी, स्क्वेयर और मोनोक्रोम सेट भी। किसी भी स्वॉच पर क्लिक करके उसे कॉपी करें, फिर पूरे सेट को CSS कस्टम प्रॉपर्टी, SCSS वेरिएबल, JSON या Tailwind कलर ब्लॉक के रूप में एक्सपोर्ट करें, या स्लाइड में लगाने या क्लाइंट को भेजने के लिए PNG पट्टी डाउनलोड करें।

किसी लोगो या फ़ोटो से रंग मिलाने के लिए इमेज लोड करें और उस जगह पर टैप करें। कंप्रेशन के कारण JPG का एक पिक्सेल आपकी आँख को दिखने वाले रंग से कुछ शेड अलग हो सकता है, इसलिए फ़ोटो के लिए 3×3 या 5×5 औसत चुनें। Chrome और Edge में स्क्रीन से चुनें बटन आपकी स्क्रीन पर कहीं से भी रंग उठा सकता है, दूसरी विंडो से भी। कुछ भी अपलोड नहीं होता; इमेज आपके ब्राउज़र में ही पढ़ी जाती है।

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

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

छह अंकों को तीन जोड़ों में बाँटें और हर जोड़े को बेस 16 से 0 से 255 के बीच की संख्या में बदलें। #3B82F6 में 3B = 59, 82 = 130 और F6 = 246 बनते हैं, इसलिए RGB वैल्यू rgb(59, 130, 246) है।

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

हर चैनल को दो अंकों की हेक्साडेसिमल संख्या में लिखें और # के बाद जोड़ दें। rgb(255, 99, 71) से FF, 63 और 47 बनते हैं, इसलिए HEX कोड #FF6347 है, जो CSS का tomato रंग है।

WCAG AA पास करने के लिए कितना कंट्रास्ट रेशियो चाहिए?

सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट (24px, या 18.66px बोल्ड) के लिए 3:1। सफ़ेद पर ग्रे #767676 4.54:1 है, यह सबसे हल्का ग्रे है जो बॉडी टेक्स्ट के लिए अब भी पास होता है।

8 अंकों वाले hex कलर कोड का क्या मतलब है?

आख़िरी दो अंक अल्फ़ा (अपारदर्शिता) चैनल हैं। #3B82F680 वही नीला रंग है 128/255 अपारदर्शिता पर, लगभग 50%, जो CSS में rgba(59, 130, 246, 0.5) है।

#F60 जैसे 3 अंकों वाले hex कोड का क्या मतलब है?

हर अंक दोहराया जाता है, इसलिए #F60 का मतलब #FF6600 है। छोटा रूप तभी चलता है जब हर जोड़े के दोनों अंक एक जैसे हों, इसीलिए #3B82F6 का कोई 3 अंकों वाला रूप नहीं है।

क्या CMYK वैल्यू प्रिंटिंग के लिए काफ़ी सटीक है?

यह शुरुआत है, प्रिंट प्रूफ़ नहीं। टूल मानक फ़ॉर्मूला इस्तेमाल करता है, इसलिए #3B82F6 cmyk(76%, 47%, 0%, 4%) बनता है, लेकिन असली स्याही का मेल प्रिंटर के कलर प्रोफ़ाइल और काग़ज़ पर निर्भर करता है, इसलिए अपनी प्रिंटिंग प्रेस से उनकी वैल्यू पूछें।

किसी फ़ोटो के रंग का HEX कोड कैसे पता करें?

ऊपर वाले पैनल में इमेज लोड करें और जिस जगह का रंग चाहिए उस पर टैप करें; टूल उस पिक्सेल को पढ़ लेता है। फ़ोटो के लिए 3×3 या 5×5 औसत चुनें, क्योंकि एक पिक्सेल अक्सर आपको दिखने वाले रंग से ज़्यादा नॉइज़ वाला होता है।

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

दोनों एक ही ह्यू से शुरू होते हैं, लेकिन HSL में लाइटनेस 100% हमेशा सफ़ेद होती है, जबकि HSV में वैल्यू 100% उस रंग का सबसे चमकीला रूप होती है। शुद्ध लाल hsl(0, 100%, 50%) और hsv(0, 100%, 100%) है।