HEX to RGB: How Color Conversion Actually Works
A HEX code and an RGB triplet describe the exact same color in two different notations. What follows is what the conversion actually does under the hood, and why designers reach for one format while developers often prefer the other.
- A HEX code is just RGB written in base-16 (hexadecimal)
- Each pair of hex digits (00–ff) maps to one channel value (0–255)
- Convert by reading R, G, B pairs separately: each = 16×first digit + second digit
- RGB is easier to manipulate in code; HEX is more compact for CSS and handoff
What a HEX Code Really Is
A HEX color like #1f3fd9 is a six-digit hexadecimal number split into three pairs: 1f, 3f, d9. Each pair is one color channel — red, green, blue — written in base-16, where the digits run 0–9 then a–f (representing 10–15). So each channel can hold 256 values (00 to ff), exactly the same 0–255 range as RGB.
The Conversion, Step by Step
To convert #1f3fd9 by hand, take each pair and compute 16 × first digit + second digit:
1f→ 16×1 + 15 = 31 (red)3f→ 16×3 + 15 = 63 (green)d9→ 16×13 + 9 = 217 (blue)
So #1f3fd9 = rgb(31, 63, 217). That is the entire algorithm — three small multiplications.
Shorthand and Alpha
Three-digit HEX like #1ad is shorthand: each digit is doubled, so #1ad = #11aadd. An eighth and ninth digit (#rrggbbaa) encode alpha (opacity) the same way — ff is fully opaque, 00 fully transparent, 80 roughly 50%.
When to Use Which
Use HEX for CSS, design handoff, and anywhere a compact string is convenient. Use RGB (or HSL) when you need to manipulate a color programmatically — lightening, mixing, or animating — because you can do math on the individual channel numbers directly. Modern CSS accepts both interchangeably.
Frequently asked questions
How do you convert HEX to RGB manually?
Split the six-digit code into three pairs (RR, GG, BB). For each pair compute 16 × first digit + second digit, where a–f mean 10–15. The three results are your R, G, B values from 0 to 255.
Is HEX the same as RGB?
Yes — they describe the identical color. HEX is RGB written in base-16. #1f3fd9 and rgb(31, 63, 217) are the same color in two notations.
What does the extra pair in an 8-digit HEX mean?
The last two digits encode alpha (opacity): ff is fully opaque, 00 fully transparent, 80 about 50%. It follows the same hex-to-decimal math as the color channels.
Does it matter if HEX is uppercase or lowercase?
No — #1F3FD9 and #1f3fd9 are exactly the same color. Browsers and CSS treat hex digits case-insensitively; the choice is purely a style convention.
Convert any color instantly
HEX, RGB, HSL, CMYK, Lab and OKLCH — all formats sync live