HEX to RGB Converter
One colour in, all three formats out — with the contrast check designers forget.
Accepts #3366ff, 3366ff, rgb(51, 102, 255) or hsl(220, 100%, 60%).
Everything runs in your browser.
Three ways of writing the same colour
HEX, RGB and HSL all describe the same screen colour; they differ in what they make easy. HEX is compact and copy-paste friendly, which is why it dominates CSS and design handoffs. RGB spells out the three channels as ordinary numbers, which matters when you are computing colours in code. HSL rearranges the same information into hue, saturation and lightness — the three things a person actually adjusts when they say "a bit darker, a bit less intense".
Converting between them is mechanical, and that is the point: nothing is lost. #3366FF, rgb(51, 102, 255) and hsl(220, 100%, 60%) render as exactly the same pixels. What changes is which edit is one step away.
Worked example 1: HEX to RGB
Take #3366FF. Split into 33, 66, FF. Each pair is a base-16 number: 33 is 3 x 16 + 3 = 51, 66 is 6 x 16 + 6 = 102, FF is 15 x 16 + 15 = 255. So rgb(51, 102, 255). The shorthand #36F expands by doubling each digit — the same colour, not a different one.
Worked example 2: reading the contrast result
That blue scores about 4.6:1 against white and 4.6:1 against black — unusually balanced, and only just past the 4.5 threshold for body text. Used as a button background with white label text it passes AA but not AAA. Dropping lightness from 60% to 45% pushes the white-text ratio past 7 into AAA, which is exactly the kind of adjustment HSL makes obvious and hex digits do not.
Worked example 3: building a tint ramp
Start from hsl(220, 100%, 60%). Keep hue and saturation, step lightness: 90%, 80%, 70%, 60%, 50%, 40%, 30%. You get a coherent scale from pale to deep that all belongs to one family. Doing the same by editing hex digits is guesswork, because the channels do not move independently of perceived lightness.
Contrast thresholds worth memorising
| Text | AA minimum | AAA minimum |
|---|---|---|
| Body text under 18pt (24px) | 4.5:1 | 7:1 |
| Large text 18pt+ or 14pt+ bold | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | — |
| Disabled controls | no requirement | — |
Practical notes
The contrast figures use the WCAG 2.x relative luminance formula, which linearises each channel before weighting green most heavily — green contributes far more to perceived brightness than blue. That is why a saturated blue can look vivid yet score poorly against white, while a mid yellow scores well against black and badly against white.
Alpha is deliberately ignored. A semi-transparent colour has no fixed contrast ratio: it depends on whatever sits behind it. If you are checking a translucent overlay, composite it against the real background first and test that result.
Hex digits are case-insensitive and both #FFF and #ffffff are valid; this tool normalises to uppercase six-digit output so values stay consistent when pasted into a stylesheet or a design file.
Sources & further reading
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and read each pair as a base-16 number. #3366FF becomes 33, 66, FF, which is 51, 102, 255. A three-digit shorthand like #36F expands by doubling each digit, so it means #3366FF.
What does the contrast ratio tell me?
It is the WCAG measure of how readable text is against a background, from 1 (identical) to 21 (black on white). Normal body text needs at least 4.5 to pass AA and 7 to pass AAA; large text needs 3 and 4.5. The tool checks your colour against both white and black so you can pick the readable one.
When should I use HSL instead of HEX?
HSL separates hue, saturation and lightness, so building a palette is a matter of changing one number. Keeping hue and saturation fixed while stepping lightness gives a consistent tint and shade ramp — much harder to do by nudging hex digits.