HEX / RGB / HSL Color Converter

Enter a colour in any common notation — #3b82f6, rgb(59 130 246), hsl(217 91% 60%) or a CSS name like steelblue — and get every other format back.

You also get WCAG contrast ratios against black and white, so you can tell at a glance which text colour is legible on it, plus a set of tints, shades and harmonies derived from the same hue.

How it works

HEX and RGB are the same thing written differently. Both describe a colour as three channel intensities from 0 to 255; hex just writes each byte as two hexadecimal digits. #3b82f6 and rgb(59, 130, 246) are identical values, and converting between them is pure notation with nothing lost in either direction.

HSL rearranges the same colour into hue, saturation and lightness, which is far easier to reason about. Hue is an angle on the colour wheel, so rotating it by 180° gives the complement. Saturation controls how much colour is present, lightness how much white or black is mixed in. This is why design systems are usually authored in HSL: a consistent palette is a matter of fixing the hue and stepping the lightness, which is almost impossible to do by eye in hex.

CMYK is included for print work, but be aware that the conversion shown here is the naive arithmetic one. Real print output depends on the paper, the inks and an ICC profile, so treat these numbers as a starting point for a designer rather than a specification for a printer.

The contrast figures follow WCAG 2.1. Each colour's relative luminance is computed by linearising the channels — undoing the sRGB gamma curve — and weighting them 0.2126 red, 0.7152 green, 0.0722 blue, which reflects how much each contributes to perceived brightness. The ratio between two colours then runs from 1:1 to 21:1. Normal body text needs 4.5:1 to pass AA and 7:1 for AAA; large text (18pt, or 14pt bold) needs only 3:1. The green channel dominating that formula is why a mid-yellow reads as bright and a saturated blue of the same hex "weight" reads as dark.

Frequently asked questions