Convert HEX, RGB, HSL and CMYK colors and check contrast

Convert HEX, RGB, HSL and CMYK and check contrast.

How it works

  1. Enter a colour in any format
  2. Read every other format
  3. Copy the one you need

Colour formats explained

HEX writes a colour as six hexadecimal digits. #5E60CE means red 94, green 96 and blue 206, with each pair of digits read in base 16. Three digits, such as #ABC, are a shorthand for #AABBCC. Eight digits add an alpha channel: #5E60CE80 is the same colour at about half opacity, because 80 in hex is 128 out of 255. RGB gives the same three channels as decimal numbers from 0 to 255. HSL describes a colour by its hue (0 to 360 degrees around the colour wheel), its saturation and its lightness, with saturation and lightness from 0 to 100 percent. HSV uses the same hue, with value, or brightness, in place of lightness. CMYK describes ink: cyan, magenta, yellow and black, each from 0 to 100 percent. Screens show RGB, so the CMYK figures on this page are an estimate and not a print proof.

How contrast ratio is calculated

The tool works out the relative brightness of your colour, then compares it with white and with black. The ratio is (the lighter brightness plus 0.05) divided by (the darker brightness plus 0.05). It runs from 1:1, no difference, to 21:1, black on white. The ratio is shown cut to two decimal places and never rounded up, so 4.499 shows as 4.49 and does not pass a 4.5 test. The marks compare that ratio with four levels. AA for normal text needs 4.5:1, AA for large text needs 3:1, AAA for normal text needs 7:1 and AAA for large text needs 4.5:1. Each mark shows Pass or Fail as words, not only as a colour. Alpha is ignored: the check uses the red, green and blue values as if the colour were fully opaque. Contrast is the only check here. It does not test colour blindness, font size or the real background of your design.

Why CMYK here is approximate

The CMYK conversion is a plain formula. Black is one minus the largest of the red, green and blue values, each scaled from 0 to 1. Cyan, magenta and yellow are what is left after black is removed. Print uses a colour profile for the paper and the ink, and this tool does not have one, so the same CMYK numbers can print differently on different presses. Use the CMYK values as a starting point, and ask your printer for a proof before you print a brand colour. The tool also keeps every colour as whole RGB numbers, so a value can move by one step on the way back. CMYK 54, 53, 0, 19 comes out as RGB 95, 97, 207 here, not 94, 96, 206.

Your colours stay on your device

The conversions run in your browser, in this tab. There is no upload step and no server that receives your colours. Nothing is saved between visits: close the tab and the value is gone. The page counts visits with Google Analytics, using the name of the tool and the fact that a result appeared, never the colour you typed. The copy buttons put the text on your clipboard only; they do not send it anywhere.

Frequently asked questions

How do I convert HEX to RGB?

Type the HEX in the HEX box, such as #5E60CE. Each pair of digits is one channel in base 16: 5E is 94 red, 60 is 96 green and CE is 206 blue, so the RGB boxes show 94, 96 and 206. Typing RGB numbers updates the HEX the same way.

What do AA and AAA mean?

They are the contrast levels in the Web Content Accessibility Guidelines. For normal text, AA needs a ratio of 4.5:1 and AAA needs 7:1. For large text, AA needs 3:1 and AAA needs 4.5:1. #5E60CE on white is 5.19:1, so it passes AA for normal text and fails AAA for normal text.

Why does my HSL round-trip change by 1?

The tool keeps one colour as whole RGB numbers. Typing hsl(239, 53%, 59%) gives RGB 95, 97, 206, which shows as #5F61CE, not #5E60CE. The HSL boxes then show 239, 53% and 59% again. The shift is one step per channel and comes from rounding.

Why isn't CMYK print-accurate?

CMYK here is a plain formula with no colour profile. Real ink, paper and press settings decide the printed result, so cmyk(54%, 53%, 0%, 19%) can print differently on two presses. Ask for a proof before you print a brand colour.

What is 8-digit HEX?

It is #RRGGBBAA. The last two digits are the alpha channel: 00 is fully transparent and FF is fully opaque. #5E60CE80 is 94, 96 and 206 at alpha 0.5, because 80 in hex is 128 out of 255. Copy it as rgba(94, 96, 206, 0.5).