हेक्स से 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 तब बेहतर है जब आपको कोड में चैनलों को व्यक्तिगत रूप से संभालना हो।

What hex notation actually is

A hex color is a base-16 representation of a 24-bit RGB color. Six digits after the #, three pairs: red, green, blue. Each pair is a number from 00 to ff: one byte (8 bits) per channel, three channels, 24 bits total. That's exactly enough to encode any one of 2²⁴ = 16,777,216 discrete colors. The "true colour" / "millions of colours" range that has been the consumer-display baseline since the late 1990s.

The hash sign isn't part of the value, it's a syntactic prefix that tells the CSS parser "what follows is a hex color, not a variable name." Without it, a string like ff0000 could be ambiguous to the lexer. The digits 0–9 keep their decimal meaning; the letters A–F (case-insensitive in CSS) represent decimal 10–15. So f is 15, ff is 15 × 16 + 15 = 255.

The math, with worked examples

Each two-digit hex pair maps to a decimal 0–255 by the formula (high_digit × 16) + low_digit, where each digit is interpreted as 0–15 (A=10 through F=15):

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

In JavaScript the entire parse fits in two lines. const n = parseInt(hex.slice(1), 16); followed by const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: that's essentially the substantive code of every hex-to-RGB converter on the web. The reverse direction is '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

3-digit, 4-digit, and 8-digit shorthand

CSS allows abbreviated forms when the channels are symmetrical:

• 3-digit (#RGB), each digit is duplicated to form the equivalent 6-digit code. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. The form is convenient for "round" designer-friendly colours but can only express 4,096 unique values, not 16.7 million, there's no shorthand for #778899 because the pairs differ.
• 8-digit (#RRGGBBAA)) same as 6-digit plus an alpha pair. 00 = fully transparent, FF = fully opaque, 80 ≈ 50% opacity. Functionally identical to rgba(255, 0, 0, 0.5) but more compact.
• 4-digit (#RGBA), duplication-shorthand of the 8-digit form. #F00A → #FF0000AA.

The 3-digit shorthand existed in CSS Level 1 (1996). The 4-digit and 8-digit alpha forms came much later in CSS Color Module Level 4, with broad cross-browser availability since around mid-2015.

Named colors and the rebeccapurple story

Before hex became the default web idiom, named colors were the norm. HTML 4.01 (December 1999) specified 16 named colors, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: based on the standard 16 colors of the Windows VGA palette. CSS 2.1 added orange as the 17th. CSS Color Module Level 3 then formally adopted around 130 additional names from the X11 rgb.txt file (which Mosaic and early Netscape inherited from their X Window System roots), bringing the total to roughly 147–148 depending on how you count aliases like cyan/aqua and gray/grey.

CSS Color Module Level 4 added one more, with a story attached. Rebecca Meyer was the six-year-old daughter of Eric A. Meyer, an early CSS authority and W3C participant. She died of brain cancer on 7 June 2014, on her sixth birthday. Eric wrote on his blog the same week: "She made it to six. For almost twelve hours, she was six." A community member proposed adding her favourite colour, a deep eggplant purple, hex #663399: as beccapurple; Eric accepted with one stipulation: it must be rebeccapurple, not beccapurple, because Rebecca herself had recently announced she was now too big for the baby name. The CSS Working Group approved the change on 22 June 2014, two weeks after her death. WebKit and other browser engines shipped support within days. It's the only CSS colour named after a person, a quiet memorial in every modern browser.

sRGB: the implied colour space of every hex code

When you write #FF5733 in CSS, you're not just specifying a number, you're specifying it in the sRGB color space. This is implicit; the browser will interpret your hex value as sRGB unless you use one of the newer color() functions to specify otherwise.

sRGB was proposed jointly by Hewlett-Packard and Microsoft in 1996 and adopted as IEC 61966-2-1:1999, a single, device-independent colour space designed around the response curve of the typical CRT monitor of the era. It shares its primary chromaticities with ITU-R BT.709 (the HDTV standard) at white point D65 (6500 K). The W3C explicitly defined sRGB as the default colour space for the web; all hex codes, all rgb() values, all classic JPEG and untagged PNG images are interpreted as sRGB.

Honest limitation: sRGB covers roughly 35.9% of the CIE 1931 visible-color diagram. There are colours that exist in nature, can be displayed by modern OLED phone screens, but cannot be specified in hex notation, saturated emerald greens, vivid red-orange sunset hues, fluorescent paints. CSS Color Module Level 4 introduced new spaces for them, accessible via the color() function: Display P3 (used by Apple displays since iPhone 7 and the late-2015 iMac, about 25% wider than sRGB) and Rec. 2020 (the broadcast 4K/8K standard, about 75% of CIE 1931). On older sRGB-only devices the browser falls back gracefully.

Modern alternatives: HSL, HWB, OKLCH

Hex is compact but not human-friendly, you can't look at #3DE7C9 and guess the hue. CSS has progressively added functional notations that match how humans think about colour:

• HSL: hue, saturation, lightness. Hue is an angle 0–360°. Introduced in CSS Color Module Level 3 (2011). Intuitive sliders, but lightness is not perceptually uniform, yellow at L=50% looks much brighter than blue at the same lightness.
• HWB: hue, whiteness, blackness. Easier for a painter's mental model ("a blue with a little white and a touch of black"). Same gamut as HSL.
• LCH / Lab: perceptually uniform; equal numerical changes correspond to equal perceived changes. Supports the wide P3+ gamut.
• OKLCH: the newest entrant, introduced by Björn Ottosson in December 2020. Fixes CIELAB's hue distortion and dark-color gradient problems. Equal lightness numbers look equally bright across all hues. Linear interpolation in OKLCH produces visually smooth gradients without the muddy gray midpoints you get from linear-gradient(red, green) in sRGB. Tailwind CSS v4.0 (January 2025) moved its entire default colour palette from rgb() to oklch(). Browser support has been broad since around 2023.

OKLCH is the long-term direction for CSS colour, but hex codes will remain the lingua franca of design tooling, brand specs, and copy-pasted snippets, they're short, copy-paste-safe across any text medium, and universally understood.

The 1861 origin of additive RGB

The RGB model traces to the Young–Helmholtz trichromatic theory of vision (early 19th century), which proposed that the human eye has three types of colour receptors corresponding to red, green, and blue. James Clerk Maxwell demonstrated this experimentally on 17 May 1861 at the Royal Institution in London. He projected three black-and-white photographs of a tartan ribbon (one shot through a red filter, one green, one blue) through three projectors fitted with the same coloured filters; the recombined image on the screen showed the ribbon in approximately full colour. This is generally credited as the first colour photograph. The same additive-RGB principle drives every CRT, LCD, OLED, and plasma display ever made: each pixel is a triad of red, green, and blue subpixels of independently variable brightness, and your retina mixes them into a perceived colour.

More questions

Is hex case-sensitive?

No. #abcdef and #ABCDEF are identical to the parser. The CSS spec is explicit: hex colour values are case-insensitive. Mixed case like #FfAa00 is also legal, though uncommon in production code. (Not to be confused with URL fragments, where the leading hash is a different syntactic concept entirely.)

Why does averaging two hex codes produce a muddy gray?

Because hex values are gamma-encoded (the sRGB transfer function is applied), and averaging in the gamma space isn't the same as averaging in linear-light. The classic example is linear-gradient(red, green) producing a muddy olive midpoint, the maths is correct in the gamma-encoded space but visually wrong. Modern colour functions like OKLCH solve this by interpolating in a perceptually uniform space, which is why they produce smoother gradients.

Why isn't there a hex code for "neon" or "fluorescent" colours?

Because hex notation is implicitly sRGB, and sRGB only covers about 36% of the colours the human eye can see. Many vivid colours (saturated emerald greens, bright red-oranges, fluorescent paints) exist in nature and can be displayed on modern wide-gamut screens but fall outside the sRGB cube. To reach them you need color(display-p3 …), color(rec2020 …), or oklch() with high chroma values. Those colours have no hex equivalent.

What was the "web-safe palette"?

In the late 1990s, when many monitors were limited to 256 colours, designers stuck to a palette of 216, the intersection of the Windows and Mac OS system palettes. The 216 came from a 6×6×6 cube: each of R, G, and B took only the values 00, 33, 66, 99, CC, FF. Lynda Weinman popularised it in her 1996 book Designing Web Graphics. It became obsolete around 2000 as 24-bit colour shipped on consumer hardware. Today it's pure historical curiosity, occasionally still visible in vintage hex codes like #CC0033 or #993366.

Does anything get sent to a server?

No. Hex-to-RGB is two lines of pure-function JavaScript arithmetic. The conversion runs locally; nothing about the colour you enter is uploaded anywhere; the page works offline once it's loaded.

संबंधित टूल