HEX to RGB & HSL Color Converter
Convert any colour between HEX, RGB, and HSL, with a live swatch and WCAG contrast ratios against white and black. Pick a colour visually or type a hex code directly.
The three formats
- HEX —
#9c3b27. Two hex digits each for red, green, and blue. Compact and the most common format in CSS. - RGB —
rgb(156, 59, 39). The same values in decimal, 0–255. Easier to manipulate in code and supports an alpha channel. - HSL —
hsl(11, 60%, 38%). Hue in degrees, saturation and lightness as percentages. Far more intuitive for adjusting a colour by hand.
Why HSL is worth learning
HEX and RGB are how machines describe colour; HSL is how people think about it. To make a colour lighter in HSL you raise the lightness — one number. In HEX you would have to adjust three values simultaneously and hope. This makes HSL ideal for generating a palette: keep the hue fixed and vary lightness for tints and shades, or rotate the hue by 30° increments for a harmonious set of related colours.
Reading the contrast ratios
The contrast figures follow WCAG 2.1 and tell you whether text will be readable. 4.5:1 is the AA minimum for normal body text, 3:1 is acceptable for large text (18pt or 14pt bold) and for UI components, and 7:1 meets the stricter AAA level. Contrast is a legal accessibility requirement in many jurisdictions, and it is far cheaper to check while choosing a colour than to retrofit across a finished design.
Shorthand hex
Three-digit hex codes expand by doubling each digit, so #f00 is identical to #ff0000 and #abc becomes #aabbcc. This tool accepts both forms. Note that only colours whose pairs happen to be doubled can be written in shorthand — #9c3b27 has no three-digit equivalent.