सीधे कलर पिकर पर जाएँ

हेक्स कलर कोड समझिए: #RRGGBB कैसे काम करता है

#1e90ff जैसा हेक्स कलर कोड हेक्साडेसिमल अंकों की तीन जोड़ियाँ है: लाल, हरी और नीली रोशनी की मात्रा, हर एक 00 (बिल्कुल नहीं) से ff (पूरी, 255) तक। चौथी जोड़ी जोड़ें तो ओपैसिटी तय होती है: 80 का मतलब लगभग 50%, ff का मतलब पूरी तरह ठोस।

पढ़ने में 7 मिनट

हेक्स कलर कोड कैसे काम करता है

स्क्रीन पर हर रंग लाल, हरी और नीली रोशनी को मिलाकर बनता है। हेक्स कोड # चिह्न के बाद हर रोशनी की ताकत दो अक्षरों में लिखता है: पहले लाल, फिर हरा, फिर नीला। यही #RRGGBB का पैटर्न है।

ये अक्षर हेक्साडेसिमल हैं, यानी 16 अंकों से गिनने का तरीका: 0 से 9, फिर a (10), b (11), c (12), d (13), e (14) और f (15)। एक जोड़ी 256 मान कवर करती है, 00 (0) से ff (255) तक, ठीक rgb() जितनी रेंज।

किसी जोड़ी को सामान्य संख्या में बदलने के लिए पहले अंक को 16 से गुणा करके उसमें दूसरा अंक जोड़िए। नीचे #1e90ff, यानी CSS रंग dodgerblue, चार फ़ॉर्मैट में है, और फिर जोड़ी-दर-जोड़ी हिसाब।

उदाहरण: #1e90ff
फ़ॉर्मैटवैल्यू
HEX
RGB
HSL
OKLCH
जोड़ीचैनलहिसाबमान
1eलाल1 × 16 + 1430
90हरा9 × 16 + 0144
ffनीला15 × 16 + 15255

यानी #1e90ff, rgb(30, 144, 255) है: थोड़ा लाल, अच्छा-ख़ासा हरा और पूरा नीला, जो मिलकर चमकीला आसमानी नीला बनाते हैं। 256 मानों वाली तीन जोड़ियों से कुल 1,67,77,216 रंग बन सकते हैं।

3 और 4 अंकों वाला हेक्स शॉर्टहैंड

जब हर जोड़ी के दोनों अंक एक जैसे हों, तो हर जोड़ी को एक बार लिख सकते हैं। #ffcc00 बन जाता है #fc0, और ब्राउज़र हर अंक को फिर से दोहरा देता है। #1e90ff का कोई छोटा रूप नहीं है, क्योंकि 1e और 90 दोहराए गए अंकों वाली जोड़ियाँ नहीं हैं।

छोटा रूप लगभग 1.67 करोड़ रंगों में से सिर्फ़ 4,096 कवर करता है। चार अंकों वाला रूप इसी तरह ओपैसिटी जोड़ता है, इसलिए #f008 का मतलब है #ff000088।

छोटापूरारंग
#fff#ffffffसफ़ेद
#000#000000काला
#f00#ff0000लाल
#fc0#ffcc00गर्म पीला
#abc#aabbccधूसर नीला
#f008#ff000088लाल, 53% ओपैसिटी पर

हेक्स ओपैसिटी: अल्फ़ा वाला 8 अंकों का हेक्स

आठ अंकों वाले कोड में अल्फ़ा, यानी ओपैसिटी के लिए चौथी जोड़ी होती है: #RRGGBBAA। 00 पूरी तरह पारदर्शी है और ff पूरी तरह ठोस। हर मौजूदा ब्राउज़र इसे CSS में सपोर्ट करता है, साथ ही चार अंकों वाला #RGBA शॉर्टहैंड भी।

जोड़ी निकालने के लिए ओपैसिटी को 255 से गुणा कीजिए, पूर्ण संख्या में राउंड कीजिए और हेक्स में बदलिए। 50% से 127.5 आता है, जो राउंड होकर 128 बनता है और 80 लिखा जाता है। यह रही पूरी टेबल, #1e90ff पर लागू करके।

ओपैसिटीअल्फ़ा (0–255)हेक्स जोड़ीअल्फ़ा के साथ #1e90ff
100%255ff#1e90ffff
95%242f2#1e90fff2
90%230e6#1e90ffe6
85%217d9#1e90ffd9
80%204cc#1e90ffcc
75%191bf#1e90ffbf
70%179b3#1e90ffb3
65%166a6#1e90ffa6
60%15399#1e90ff99
55%1408c#1e90ff8c
50%12880#1e90ff80
45%11573#1e90ff73
40%10266#1e90ff66
35%8959#1e90ff59
30%774d#1e90ff4d
25%6440#1e90ff40
20%5133#1e90ff33
15%3826#1e90ff26
10%261a#1e90ff1a
5%130d#1e90ff0d
0%000#1e90ff00

CSS

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

दो बातों का ध्यान रखिए। पहली, 80 का मतलब 255 में से 128 है, यानी 50.2%, ठीक 50% नहीं: हेक्स अल्फ़ा में सिर्फ़ 256 स्टेप होते हैं, इसलिए ज़्यादातर गोल प्रतिशत बस करीब के अनुमान होते हैं। दूसरी, Android में अल्फ़ा पहले आता है। Android के कलर रिसोर्स में #801e90ff का वही मतलब है जो CSS में #1e90ff80 का।

हेक्स कोड को देखकर कैसे पढ़ें

बिना कुछ बदले भी आप रंग का अंदाज़ा लगा सकते हैं। हर जोड़ी का पहला अंक देखिए, क्योंकि लगभग सारी जानकारी उसी में होती है।

CSS नामहेक्सRGBकैसे पढ़ें
tomato#ff6347255, 99, 71लाल पूरा, थोड़ा हरा और नीला: गर्म, हल्का लाल
gold#ffd700255, 215, 0लाल और हरा ऊँचे, नीला नहीं: पीला
chocolate#d2691e210, 105, 30लाल आगे, हरा आधा, नीला कम: नारंगी-भूरा
darkturquoise#00ced10, 206, 209हरा और नीला ऊँचे, लाल नहीं: सियान
dodgerblue#1e90ff30, 144, 255नीला आगे, हरा बीच में: आसमानी नीला
mediumorchid#ba55d3186, 85, 211लाल और नीला ऊँचे, हरा कम: बैंगनी
teal#0080800, 128, 128हरा और नीला आधे पर: गहरा सियान
navy#0000800, 0, 128सिर्फ़ नीला, आधे पर: गहरा नीला
slategray#708090112, 128, 144लगभग बराबर, नीला थोड़ा आगे: नीला-सा ग्रे
  • जिस चैनल का पहला अंक सबसे बड़ा है, वही रोशनी हावी है। #d2691e में लाल में d, हरे में 6 और नीले में 1 है, इसलिए यह नारंगी-भूरा है।
  • दो ऊँचे चैनल मिलते हैं: लाल और हरा मिलकर पीला बनाते हैं, हरा और नीला सियान, लाल और नीला मैजेंटा या बैंगनी।
  • तीन बराबर जोड़ियाँ ग्रे बनाती हैं। #333333 गहरा ग्रे है, #999999 हल्का ग्रे। लगभग बराबर जोड़ियाँ, जैसे #708090, हल्का धूसर, फीका रंग देती हैं।
  • कुल मिलाकर ऊँचे अंक हल्का रंग बताते हैं, नीचे के अंक गहरा रंग। जब तीनों जोड़ियाँ c0 या उससे ऊपर हों, तो रंग बहुत हल्का होता है। जब तीनों 30 या उससे नीचे हों, तो बहुत गहरा।
  • एक ही संख्या पर हरा, नीले से कहीं ज़्यादा चमकीला दिखता है। #00ff00 की OKLCH लाइटनेस 0.866 है, जबकि #0000ff की सिर्फ़ 0.452।

#808080 बीच का ग्रे क्यों नहीं है

#808080 संख्याओं में ठीक बीच में है: हर चैनल में 255 में से 128। लेकिन यह काले और सफ़ेद के बीच आधे रास्ते पर नहीं दिखता। इसकी OKLCH लाइटनेस 0.600 है, इसलिए यह सफ़ेद की ओर 60% रास्ते पर लगता है।

हेक्स मान पहले से sRGB कर्व के साथ एन्कोड होते हैं, जो मोटे तौर पर आँख जैसा चलता है, पर पूरी तरह नहीं। #808080 सफ़ेद की लगभग 21.6% रोशनी देता है, और परसेप्चुअल मॉडल दिखने वाले बीच के बिंदु को इससे नीचे रखते हैं: OKLCH में #636363, CIELAB में #777777।

ग्रेयह क्या हैOKLCH Lसफ़ेद पर कंट्रास्टकाले पर कंट्रास्ट
#808080संख्याओं का बीच, 1280.6003.95:15.32:1
#777777CIELAB का बीच, L* 500.5694.48:14.69:1
#767676सफ़ेद पर 4.5:1 वाला सबसे हल्का ग्रे0.5664.54:14.62:1
#636363OKLCH का बीच, L 0.50.5006.01:13.50:1

टेक्स्ट के लिए यह मायने रखता है। सफ़ेद पर ग्रे #808080 का कंट्रास्ट 3.95:1 है और यह बॉडी टेक्स्ट के लिए WCAG AA में फ़ेल है। #767676 सबसे हल्का ग्रे है जो 4.5:1 पास करता है, और उससे एक स्टेप हल्का #777777, 4.48:1 पर फ़ेल हो जाता है।

बड़े या छोटे अक्षर, # के साथ या बिना

हेक्स कोड में बड़े-छोटे अक्षरों से फ़र्क नहीं पड़ता। #1E90FF, #1e90ff और #1E90ff, CSS, SVG और डिज़ाइन टूल में एक ही रंग हैं। एक स्टाइल चुनिए और हर जगह उसी पर टिके रहिए, ताकि कोड में खोजने पर हर इस्तेमाल मिल जाए। CSS में आम तौर पर छोटे अक्षर इस्तेमाल होते हैं।

# चिह्न CSS सिंटैक्स का हिस्सा है, रंग का नहीं। Figma और कई डिज़ाइन टूल कोड को इसके बिना दिखाते हैं, और प्रोग्रामिंग भाषाएँ अक्सर इसे 0x प्रीफ़िक्स वाली संख्या के रूप में लिखती हैं, जैसे Flutter में, जहाँ Color(0xFF1E90FF) अल्फ़ा जोड़ी से शुरू होता है।

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

आईड्रॉपर इस्तेमाल कीजिए: यह ऐसा टूल है जो कर्सर के नीचे का रंग पढ़कर उसका कोड दिखाता है। ये मुफ़्त हैं और ज़्यादातर पहले से इंस्टॉल होते हैं।

  • Chrome और Edge: F12 से DevTools खोलिए, Styles पैनल में किसी भी रंग के चौकोर पर क्लिक कीजिए और पेज से रंग लेने के लिए आईड्रॉपर आइकन इस्तेमाल कीजिए।
  • PickShade: होम पेज के कलर पिकर में Chrome और Edge के लिए आईड्रॉपर बटन है, जो स्क्रीन पर कहीं से भी रंग ले लेता है।
  • Windows: Microsoft PowerToys इंस्टॉल कीजिए और Color Picker खोलने के लिए Win + Shift + C दबाइए।
  • macOS: Applications, Utilities से Digital Color Meter खोलिए। इसे sRGB पर कीजिए, फिर View, Display Values, as Hexadecimal चुनिए।
  • Figma, Photoshop और ज़्यादातर डिज़ाइन ऐप: आईड्रॉपर के लिए I दबाइए।
  • फ़ोटो या स्क्रीनशॉट में: उसे इमेज कलर पिकर में खोलिए और किसी भी पिक्सेल पर क्लिक कीजिए। इमेज आपके डिवाइस पर ही रहती है।

लिया गया मान असली से कुछ यूनिट अलग हो सकता है, क्योंकि स्क्रीन कलर प्रोफ़ाइल लागू करती हैं और इमेज कंप्रेस होती हैं। जब ठीक-ठीक मान चाहिए, तो उसे डिज़ाइन फ़ाइल या CSS से कॉपी कीजिए, स्क्रीनशॉट से नहीं।

सवाल और जवाब

हेक्स कलर कोड क्या है?

हेक्स कलर कोड #1e90ff जैसा छह अंकों का कोड है, जो किसी रंग को उसमें मौजूद लाल, हरी और नीली रोशनी की मात्रा से बताता है। हेक्साडेसिमल अंकों की हर जोड़ी 00 (0) से ff (255) तक जाती है, इसलिए #1e90ff, rgb(30, 144, 255) है।

हेक्स रंग में ओपैसिटी कैसे जोड़ें?

आख़िर में अंकों की चौथी जोड़ी जोड़िए: #RRGGBBAA। ओपैसिटी को 255 से गुणा कीजिए, राउंड कीजिए और हेक्स में बदलिए, यानी 50% के लिए 80, 25% के लिए 40 और 75% के लिए bf। उदाहरण के लिए, #1e90ff80 लगभग 50% ओपैसिटी पर dodgerblue है।

हेक्स में 50% ओपैसिटी कितनी होती है?

हेक्स में 50% ओपैसिटी 80 होती है, जैसे आधे पारदर्शी काले के लिए #00000080। 80 का मतलब 255 में से 128 है, यानी 50.2%, क्योंकि हेक्स अल्फ़ा में 256 स्टेप होते हैं और ठीक 50%, 7f और 80 के बीच पड़ता है।

हेक्स और RGB में क्या अंतर है?

रंग में कोई अंतर नहीं, सिर्फ़ लिखने के तरीके में है। हेक्स लाल, हरे और नीले के मान 16 के आधार वाली जोड़ियों में लिखता है, rgb() उन्हें 0 से 255 तक की दशमलव संख्याओं में, इसलिए #ff6347 और rgb(255, 99, 71) एक ही टमाटरी लाल हैं।

क्या हेक्स कलर कोड में बड़े-छोटे अक्षरों से फ़र्क पड़ता है?

नहीं। #FF6347, #ff6347 और #Ff6347, CSS, HTML, SVG और डिज़ाइन टूल में एक ही रंग हैं। ज़्यादातर CSS कोडबेस छोटे अक्षर इस्तेमाल करते हैं, लेकिन कोई भी स्टाइल चलेगा, बस वह हर जगह एक जैसा हो।

बीच के ग्रे का हेक्स कोड क्या है?

#808080 संख्याओं में बीच का है, लेकिन यह आधे से ज़्यादा हल्का दिखता है, इसकी OKLCH लाइटनेस 0.600 है। जो ग्रे काले और सफ़ेद के बीच आधे रास्ते पर दिखता है, वह #636363 (OKLCH L 0.5) और #777777 (CIELAB L* 50) के बीच है।

PickShade में आज़माएँ

मिलते-जुलते गाइड