HEX to RGB
Convert HEX to RGB and RGB to HEX live - either side updates the other, with a preview swatch and HSL output.
Accepts #rgb, #rrggbb and #rrggbbaa. The hash is optional.
How the conversion works
A HEX color is just three RGB channels written in base 16. Each channel runs from 00 to FF,
which is 0 to 255 in the decimal numbers RGB uses. To convert by hand you take each pair of
HEX digits and multiply the first by 16, then add the second: FF = 15 x 16 + 15 =
255. Going the other way, you divide by 16 for the first digit and take the remainder
for the second. This tool keeps both sides in sync, so editing the R, G or B boxes rewrites
the HEX code and vice versa.
Worked example
Take dodger blue, #1E90FF. Splitting it gives 1E, 90
and FF. In decimal that is 30, 144 and 255, so the CSS is
rgb(30, 144, 255). Converted to HSL you get hsl(210, 100%, 56%) - a
fully saturated blue at medium lightness. All three describe the exact same pixel.
When you need each format
- RGB / rgba - when you want to add transparency, since
rgba(30, 144, 255, 0.5)is clearer than an eight-digit HEX. - HEX - the compact default for stylesheets and design handoff.
- HSL - for nudging lightness or saturation without changing the hue.
For a fuller workspace with harmonies and a palette, use the color picker. To check a color pair is legible, try the contrast checker, and to spin one color into a full ramp see the shade generator.