HEX to RGB Converter
Free online hex to rgb converter. Convert hex color codes to RGB. Perfect for designers and developers.
—
Embed this tool
Copy and paste the code below into your website to embed this tool for free. An attribution link to The Util Box is required.
<iframe src="https://www.theutilbox.org/embed/hex-to-rgb" width="600" height="500" frameborder="0" style="border: none; max-width: 100%;" title="Free HEX to RGB Converter tool from The Util Box"></iframe> <!-- Free tool by The Util Box — https://www.theutilbox.org/tools/hex-to-rgb --> <a href="https://www.theutilbox.org/tools/hex-to-rgb">HEX to RGB Converter by The Util Box</a>
HEX to RGB Converter — Get Both Notations and a Live Preview
This HEX to RGB converter takes a hexadecimal colour and gives you the equivalent
red/green/blue triplet, the CSS rgb() function, and a swatch you can check with
your own eyes. It accepts both 3-digit shorthand (#f0a) and
6-digit full form (#ff00aa), with or without the leading
#.
The # is optional and ignored if present, so pasting a value from any source —
a design tool, an old stylesheet, a screenshot annotation — works without editing it first. Invalid input is
reported instead of silently producing black, which is the failure mode that makes colour bugs so hard to find.
How HEX Actually Works
HEX is not an encryption or a compression scheme. It is simply the same three numbers written in base 16, one per channel. Each pair of hex digits is a channel value from 0 to 255, which is the range a standard monitor can display:
| HEX digits | Channel value | Meaning |
|---|---|---|
| 00 | 0 | Channel off. |
| 7F | 127 | Just under half. The midpoint of the 0–255 range. |
| 80 | 128 | Just over half. |
| FF | 255 | Channel at full intensity. |
So #FF00AA breaks into FF,
00, AA — which is
rgb(255, 0, 170): maximum red, no green, and a little blue. That makes it a vivid magenta-pink.
The 3-digit shorthand is the same trick with each digit doubled, so #F0A is
really #FF00AA — a good thing to check when a designer gives you a short value
and the colour looks far more saturated than you intended.
Why You Need Both Notations
HEX and RGB are interchangeable in modern CSS, but neither is universally the better choice:
| Situation | Use | Why |
|---|---|---|
| Static colours in a stylesheet | HEX | Shorter, and universally recognised in design tools. |
| Opacity or transparency | RGB or HSL | Add a fourth value — rgb(255 0 170 / 50%). 6-digit HEX cannot express alpha at all. |
| JavaScript that manipulates colour | RGB | Channels are separate numbers, so you can shift one channel to lighten or darken without touching the others. |
| CSS custom properties | HEX or HSL | Set once, override per theme — a plain number triple is harder to reason about. |
| Email HTML | HEX | Many email clients still strip rgb() in inline styles. |
A Trap Worth Knowing About
HEX is base 16, which means the digits run 0–9 and
then A–F. The letters
A through F are not labels — they are the values
10 through 15. So a channel of A is 10, not "A". Reading
#ABCDEF as a word rather than as three numbers is a very common source of
confusing mismatches, and it is why this converter is worth more than the mental arithmetic it saves.
Related Colour Tools
- RGB to HEX — the reverse conversion, for when you are working from a design tool's RGB readout.
- HEX to HSL — the palette-friendly notation, where hue, saturation and lightness are separate controls rather than one opaque triple.
- HEX to RGBA — add an alpha channel, which 6-digit HEX cannot express at all.
- Color Harmony — complementary, triadic and analogous schemes derived from your colour.
- Color Mixer — blend two colours and read the result, rather than guessing at tints and shades.
- Contrast Checker — verify a foreground/background pair meets WCAG AA or AAA before shipping it.
- Color Palette — build a full scheme from one starting colour.
- CSS Color Names and Color Name Finder — go from a colour to its closest named equivalent and back.
All colour tools run locally in the browser and work offline.