Colour Code Converter

Paste a colour in almost any CSS notation and read it back in all the others, with a live swatch and the contrast ratios that tell you whether text on it will be legible.

One colour in every notation

Input accepts 3-, 4-, 6- and 8-digit HEX with or without the hash, rgb() and rgba(), hsl() and hsla(), and a bare 0, 74, 198 triple. If it can't parse what you typed, you get a message listing the formats it does take, so you're never left looking at a blank panel.

Give it #004ac6 and you get back:

HEX      #004ac6          HSL   hsl(218, 100%, 39%)
HEX8     #004ac6ff        HSLA  hsla(218, 100%, 39%, 1)
RGB      rgb(0, 74, 198)  CMYK  cmyk(100%, 63%, 0%, 22%)
RGBA     rgba(0, 74, 198, 1)    Relative luminance 0.0897

The three-digit shorthand expands by doubling each digit, so #0af is #00aaff (not #0a0f0f or anything else). The fourth digit in a 4-digit code and the last pair in an 8-digit code are alpha, with ff meaning fully opaque.

Hex output used to be broken here in a way that was easy to miss. A rounding pass stripped leading zeros, so #004ac6 printed as #4ac6 and #0000ff printed as #0ff. That's still a valid colour code, just a different colour. Rounding now applies only to the numeric rows and never touches a string.

Rounding in HSL costs you a value or two

HSL is reported in whole degrees and whole percentages, because that's how people write it in stylesheets. That last rounding step loses information, and you can see the loss if you feed the result back in.

rgb(0, 74, 198) converts to hsl(218, 100%, 39%). Paste that HSL string back in and you get rgb(0, 73, 199), one off in two channels. Nothing has gone wrong. 8-bit RGB has more distinguishable values than rounded integer HSL does, so some of them have to share. If a colour has to survive a round trip, keep the HEX or RGB form and use HSL only for reasoning about hue and lightness.

CMYK is a guess until a printer sees it

The CMYK row is the standard arithmetic conversion: subtract the largest channel from one to get black, then scale the rest. It works on the numbers alone, with no colour profile, no ink model and no knowledge of paper.

Print output depends on the press, the ink set, the stock and the profile the shop applies. Those vary enough that two printers handed the same file will return visibly different sheets. Screens can also show colours that four-process ink can't reach at all. #004ac6 is a saturated blue well outside a typical coated gamut, so the 100/63/0/22 shown here is just the closest arithmetic answer, and you shouldn't expect to see that colour on paper. Use it to start the conversation with your printer, and ask for a proof.

The contrast figures

Relative luminance is calculated the way WCAG 2 specifies. Each channel is normalised, gamma-expanded, then weighted 0.2126 red, 0.7152 green, 0.0722 blue. Green gets the biggest weight because human vision is most sensitive to it.

From that, the panel gives the contrast ratio against white text and against black text, and marks each as a pass or fail at the 4.5:1 threshold for body text. #004ac6 scores 7.51:1 with white text and 2.79:1 with black, so white type on that blue is comfortable and black type on it isn't. Large text has a lower bar of 3:1.

Alpha is left out of the calculation, so the ratios describe the fully opaque colour, and a semi-transparent overlay will measure differently against whatever sits behind it. The swatch also has no checkerboard, which means partial transparency is previewed over the panel background.

Also, 4.5:1 is only the minimum. Amber #ffc107 manages 12.88:1 against black and only 1.63:1 against white, which is why one brand colour can need different text treatment in different places.

Colour work elsewhere on the site

• Colour Picker: pull a colour out of an image and bring it here.
• Number Base Converter: for hexadecimal beyond six digits.
• CSS Minifier: for once the palette is settled in the stylesheet.