हेक्स से RGB

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

HEX रंग छह-अंकीय हेक्साडेसिमल स्ट्रिंग (#RRGGBB) का उपयोग करते हैं जहाँ प्रत्येक जोड़ी लाल, हरे और नीले चैनल का प्रतिनिधित्व करती है।

RGB प्रत्येक चैनल के लिए तीन दशमलव संख्याएँ (0 से 255) का उपयोग करता है। उदाहरण: #2b7190 → R:43, G:111, B:142।

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

HEX को RGB में मैन्युअल रूप से कैसे रूपांतरित करें?

हेक्स कोड को तीन जोड़ों में विभाजित करें (जैसे #FF8800 → FF, 88, 00), फिर प्रत्येक जोड़ी को आधार 16 से आधार 10 में रूपांतरित करें: FF = 255…

3-अंकीय HEX कोड के बारे में क्या?

3-अंकीय HEX एक शॉर्टहैंड है जहाँ प्रत्येक अंक दोगुना होता है: #F80 = #FF8800। यह कन्वर्टर दोनों प्रारूपों को स्वचालित रूप से संभालता है।

HEX या RGB कब उपयोग करें?

HEX अधिक संक्षिप्त और CSS में लोकप्रिय है। RGB तब बेहतर है जब आपको कोड में चैनलों को व्यक्तिगत रूप से संभालना हो।

Hex notation वास्तव में क्या है

एक hex color एक 24-bit RGB color का base-16 representation है। # के बाद छह digits, तीन pairs: red, green, blue। हर pair 00 से ff तक एक number है: प्रति channel एक byte (8 bits), तीन channels, कुल 24 bits। यह exactly enough है किसी भी एक 2²⁴ = 16,777,216 discrete colors को encode करने के लिए। «true colour» / «millions of colours» range जो 1990s के अंत से consumer-display baseline रही है।

Hash sign value का हिस्सा नहीं है, यह एक syntactic prefix है जो CSS parser को बताता है «what follows is a hex color, not a variable name.» इसके बिना, ff0000 जैसा string lexer के लिए ambiguous हो सकता है। Digits 0-9 अपना decimal meaning रखते हैं; letters A-F (CSS में case-insensitive) decimal 10-15 represent करते हैं। इसलिए f 15 है, ff है 15 × 16 + 15 = 255।

Math, worked examples के साथ

हर two-digit hex pair formula (high_digit × 16) + low_digit के माध्यम से एक decimal 0-255 पर map होता है, जहां हर digit 0-15 के रूप में interpreted होती है (A=10 through F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (ऊपर default #2b7190 swatch का red channel)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

JavaScript में पूरा parse दो lines में fit होता है। const n = parseInt(hex.slice(1), 16); उसके बाद const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: यही web पर हर hex-to-RGB converter का substantive code का essence है। Reverse direction है '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')।

3-digit, 4-digit, और 8-digit shorthand

CSS shortened forms allow करता है जब channels symmetrical हों:

• 3-digit (#RGB), हर digit duplicate होकर equivalent 6-digit code बनाता है। #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699। यह form «round» designer-friendly colours के लिए convenient है लेकिन केवल 4,096 unique values express कर सकता है, 16.7 million नहीं, #778899 का कोई shorthand नहीं है क्योंकि pairs differ करते हैं।
• 8-digit (#RRGGBBAA) 6-digit जैसा plus एक alpha pair। 00 = fully transparent, FF = fully opaque, 80 ≈ 50% opacity। Functionally identical to rgba(255, 0, 0, 0.5) लेकिन more compact।
• 4-digit (#RGBA), 8-digit form का duplication-shorthand। #F00A → #FF0000AA।

3-digit shorthand CSS Level 1 (1996) में था। 4-digit और 8-digit alpha forms CSS Color Module Level 4 में बहुत बाद में आए, mid-2015 के आसपास broad cross-browser availability के साथ।

Named colors और rebeccapurple story

Hex web का default idiom बनने से पहले, named colors norm थे। HTML 4.01 (December 1999) ने 16 named colors specify किए, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: Windows VGA palette के standard 16 colors पर based। CSS 2.1 ने orange को 17वें के रूप में add किया। CSS Color Module Level 3 ने फिर X11 rgb.txt file से लगभग 130 additional names formally adopt किए (जो Mosaic और early Netscape ने अपने X Window System roots से inherit किए थे), total को roughly 147-148 पर लाते हुए, इस बात पर depend करते हुए कि cyan/aqua और gray/grey जैसे aliases को कैसे count किया जाए।

CSS Color Module Level 4 ने एक और add किया, एक story के साथ। Rebecca Meyer Eric A. Meyer की छह साल की daughter थीं, जो एक early CSS authority और W3C participant थे। उनकी 7 June 2014 को brain cancer से मृत्यु हुई, अपने छठे birthday पर। Eric ने उसी week अपने blog पर लिखा: «She made it to six. For almost twelve hours, she was six.» एक community member ने उनका favourite colour, एक deep eggplant purple, hex #663399, beccapurple के रूप में add करने का proposal किया; Eric ने एक condition के साथ accept किया: यह rebeccapurple होना चाहिए, beccapurple नहीं, क्योंकि Rebecca ने recently announce किया था कि वह baby name से बड़ी हो गई हैं। CSS Working Group ने 22 June 2014 को change approve किया, उनकी मृत्यु के दो हफ्ते बाद। WebKit और अन्य browser engines ने days के भीतर support ship किया। यह एकमात्र CSS colour है जो एक person के नाम पर है, हर modern browser में एक quiet memorial।

sRGB: हर hex code का implied colour space

जब आप CSS में #FF5733 लिखते हैं, तो आप सिर्फ एक number specify नहीं कर रहे, आप इसे sRGB color space में specify कर रहे हैं। यह implicit है; browser आपके hex value को sRGB के रूप में interpret करेगा जब तक आप otherwise specify करने के लिए newer color() functions में से एक use न करें।

sRGB को Hewlett-Packard और Microsoft ने jointly 1996 में propose किया और IEC 61966-2-1:1999 के रूप में adopt किया गया, एक single, device-independent colour space जो उस era के typical CRT monitor के response curve के around designed था। यह ITU-R BT.709 (HDTV standard) के साथ white point D65 (6500 K) पर primary chromaticities share करता है। W3C ने explicitly sRGB को web के लिए default colour space define किया; सभी hex codes, सभी rgb() values, सभी classic JPEG और untagged PNG images sRGB के रूप में interpreted हैं।

Honest limitation: sRGB CIE 1931 visible-color diagram का roughly 35.9% cover करता है। ऐसे colours हैं जो nature में exist करते हैं, modern OLED phone screens पर display हो सकते हैं, लेकिन hex notation में specify नहीं किए जा सकते, saturated emerald greens, vivid red-orange sunset hues, fluorescent paints। CSS Color Module Level 4 ने उनके लिए new spaces introduce किए, color() function के माध्यम से accessible: Display P3 (Apple displays में iPhone 7 और late-2015 iMac से use किया जाता है, sRGB से लगभग 25% wider) और Rec. 2020 (broadcast 4K/8K standard, CIE 1931 का लगभग 75%)। Older sRGB-only devices पर browser gracefully fall back करता है।

आधुनिक विकल्प: HSL, HWB, OKLCH

Hex compact है लेकिन human-friendly नहीं, आप #3DE7C9 देखकर hue guess नहीं कर सकते। CSS ने progressively functional notations add किए हैं जो humans के colour के बारे में सोचने के तरीके से match करती हैं:

• HSL: hue, saturation, lightness। Hue एक angle 0-360° है। CSS Color Module Level 3 (2011) में introduce किया गया। Intuitive sliders, लेकिन lightness perceptually uniform नहीं है, L=50% पर yellow same lightness पर blue से बहुत brighter दिखता है।
• HWB: hue, whiteness, blackness। एक painter के mental model के लिए easier («a blue with a little white and a touch of black»)। HSL के समान gamut।
• LCH / Lab: perceptually uniform; equal numerical changes equal perceived changes से correspond करती हैं। Wide P3+ gamut support करती है।
• OKLCH: newest entrant, Björn Ottosson द्वारा December 2020 में introduce किया गया। CIELAB के hue distortion और dark-color gradient problems fix करता है। Equal lightness numbers सभी hues में equally bright दिखते हैं। OKLCH में linear interpolation visually smooth gradients produce करता है बिना उन muddy gray midpoints के जो आप sRGB में linear-gradient(red, green) से पाते हैं। Tailwind CSS v4.0 (January 2025) ने अपना पूरा default colour palette rgb() से oklch() पर move किया। Browser support 2023 के आसपास से broad है।

OKLCH CSS colour के लिए long-term direction है, लेकिन hex codes design tooling, brand specs, और copy-pasted snippets की lingua franca बने रहेंगे, ये short हैं, किसी भी text medium पर copy-paste-safe हैं, और universally understood हैं।

Additive RGB की 1861 की origin

RGB model Young-Helmholtz trichromatic theory of vision (early 19th century) से trace करता है, जिसने propose किया कि human eye में तीन types के colour receptors होते हैं जो red, green, और blue correspond करते हैं। James Clerk Maxwell ने इसे experimentally 17 May 1861 को London के Royal Institution में demonstrate किया। उन्होंने एक tartan ribbon की तीन black-and-white photographs (एक red filter से, एक green से, एक blue से shot) को same coloured filters से fitted तीन projectors के through project किया; screen पर recombined image ने ribbon को approximately full colour में show किया। यह generally पहली colour photograph के रूप में credited है। वही additive-RGB principle हर CRT, LCD, OLED, और plasma display को drive करता है जो कभी बनाई गई: हर pixel independently variable brightness के red, green, और blue subpixels का एक triad है, और आपकी retina उन्हें एक perceived colour में mix करती है।

अधिक प्रश्न

क्या hex case-sensitive है?

नहीं। #abcdef और #ABCDEF parser के लिए identical हैं। CSS spec explicit है: hex colour values case-insensitive हैं। #FfAa00 जैसा mixed case भी legal है, हालांकि production code में uncommon है।

दो hex codes को average करने से muddy gray क्यों produce होता है?

क्योंकि hex values gamma-encoded हैं (sRGB transfer function apply होती है), और gamma space में average करना linear-light में average करने के same नहीं है। Classic example है linear-gradient(red, green) जो एक muddy olive midpoint produce करता है, math gamma-encoded space में correct है लेकिन visually wrong। OKLCH जैसे modern colour functions इसे perceptually uniform space में interpolate करके solve करते हैं, इसीलिए वे smoother gradients produce करते हैं।

«Neon» या «fluorescent» colours के लिए hex code क्यों नहीं है?

क्योंकि hex notation implicitly sRGB है, और sRGB human eye देख सकने वाले colours का केवल लगभग 36% cover करता है। कई vivid colours (saturated emerald greens, bright red-oranges, fluorescent paints) nature में exist करते हैं और modern wide-gamut screens पर display हो सकते हैं लेकिन sRGB cube के बाहर fall करते हैं। उन तक पहुंचने के लिए color(display-p3 …), color(rec2020 …), या high chroma values के साथ oklch() चाहिए। उन colours का कोई hex equivalent नहीं है।

«Web-safe palette» क्या था?

1990s के अंत में, जब कई monitors 256 colours तक limited थे, designers 216 के एक palette तक stick रहे, Windows और Mac OS system palettes के intersection। 216 एक 6×6×6 cube से आए: R, G, और B में से हर एक ने केवल values 00, 33, 66, 99, CC, FF लिए। Lynda Weinman ने इसे अपनी 1996 की book Designing Web Graphics में popularise किया। यह 2000 के आसपास obsolete हो गया जब consumer hardware पर 24-bit colour आया। आज यह pure historical curiosity है, कभी-कभी #CC0033 या #993366 जैसे vintage hex codes में visible।

क्या कुछ server पर भेजा जाता है?

नहीं। Hex-to-RGB pure-function JavaScript arithmetic की दो lines है। Conversion locally run होती है; जो colour आप enter करते हैं उसके बारे में कुछ भी कहीं upload नहीं होता; page load होने के बाद offline काम करता है।

संबंधित टूल