Color Converter

How the Color Converter works

The converter recognises HEX colours with 3, 4, 6 or 8 digits (the last two digits are alpha), rgb() and rgba() with numbers or percentages, hsl() and hsla() with hue in degrees, radians, gradians or turns, hsv() (also written hsb()), cmyk() with percentages, and all 148 CSS named colours such as rebeccapurple. Both the comma syntax and the modern space syntax with / alpha are accepted.

Every colour is converted to red, green and blue and then to each output format. Channels are rounded to whole numbers, so a conversion can differ from the input by a fraction. CMYK is a simple formula without a colour profile, so printed colours may differ. When the colour is exactly one of the named colours, its name is shown too.

Contrast is calculated with the WCAG 2.x relative luminance formula: (lighter + 0.05) ÷ (darker + 0.05), against white and black backgrounds. The ratio is truncated rather than rounded, so a colour never passes by rounding up. A partly transparent colour is first blended over the background, which is how it would appear on the page.

How to use the Color Converter

1. Type a colour such as #2447c4, rgb(36, 71, 196), hsl(227, 69%, 45%) or teal, or choose one with the Picker.
2. Read the converted values in the Formats table; the swatch and picker update as you type.
3. Select Copy next to the format you need.
4. Check the WCAG contrast table to see whether the colour passes AA or AAA as text on white or on black.

Example

Entering #2447c4 gives:

HEX   #2447c4
RGB   rgb(36, 71, 196)
HSL   hsl(227, 69%, 45.5%)
HSV   hsv(227, 81.6%, 76.9%)
CMYK  cmyk(81.6%, 63.8%, 0%, 23.1%)

Its contrast ratio is 7.57:1 against white, which passes AA and AAA for normal and large text, and 2.77:1 against black, which fails all four levels.

Common use cases

• Converting a brand colour from a design file in HEX to rgb() or hsl() for CSS.
• Turning a CMYK value from print guidelines into a HEX colour for the web.
• Checking that link or button text colours meet WCAG contrast requirements.
• Finding the HEX value of a CSS named colour such as cornflowerblue.

Common errors and how to fix them

Enter a colour, for example #2447c4, rgb(36, 71, 196) or rebeccapurple

The value was not recognised. Check for a missing # on a hex code, a typo in a named colour, or a stray character pasted with the value.

Remove the trailing comma

An rgb() or hsl() value ends with a comma just before the closing bracket. Delete it.

A round trip changes the colour very slightly

HEX and RGB store whole numbers per channel, while HSL uses rounded percentages, so converting to HSL and back can move a channel by one. Keep HEX or RGB as the source of truth in your stylesheet.

Frequently asked questions