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 decide 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. Anything it cannot parse produces a message naming the formats it does take, rather than 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, ff being fully opaque.

Hexadecimal 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 — still a valid colour code, just a different colour. Rounding now applies only to numeric rows and never touches a string.

Rounding in HSL costs you a value or two

HSL is reported as whole degrees and whole percentages, because that is how it is written in stylesheets. The conversion is lossy in that last step, and the loss is visible if you feed the result back in.

rgb(0, 74, 198) converts to hsl(218, 100%, 39%). Paste that HSL string 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. When a colour has to survive a round trip, carry the HEX or RGB form and treat HSL as a place to reason about hue and lightness, not as storage.

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 runs 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, and those differ enough that two printers handed the same file return visibly different sheets. Screens can also display colours that four-process ink cannot reach at all: #004ac6 is a saturated blue well outside a typical coated gamut, so the 100/63/0/22 shown here is the closest arithmetic answer rather than a colour you can expect on paper. Use it to open 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 dominating 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 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 is not. Large text has a lower bar of 3:1.

Two caveats. Alpha is excluded, so the ratios describe the fully opaque colour and a semi-transparent overlay will measure differently against whatever sits behind it. And the swatch has no checkerboard, so partial transparency is previewed over the panel background rather than over nothing.

Passing 4.5:1 is a floor, not a guarantee. Amber #ffc107 manages 12.88:1 against black and only 1.63:1 against white, which is why one brand colour needs 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 — hexadecimal beyond six digits.
• CSS Minifier — once the palette is settled in the stylesheet.