Color Converter

Convert a colour between every common format — including OKLCH — with WCAG contrast ratios included.

Color ToolsRuns in your browserFree, no sign-up

Colour (one per line)

All formats

Output appears here as you type.

Ctrl + Enter to run

About the Color Converter

Converts between HEX, RGB, HSL, CMYK and OKLCH, and shows the contrast of the result against black and white. Most day-to-day need is mundane — a designer supplies HEX, a chart library wants RGB, a stylesheet is written in HSL.

OKLCH is the one worth learning. HSL lightness does not track perceived brightness, so yellow and blue at the same lightness value look nothing alike and a palette built by rotating hue comes out uneven. OKLCH is built on a perceptual model, which makes a consistent palette arithmetic rather than trial and error.

Frequently asked questions

What is OKLCH and why should I care?

OKLCH is a perceptually uniform colour space: equal changes in its lightness value look like equal changes to the eye. That is not true of HSL, where hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) despite both claiming 50% lightness. The practical consequence is that a colour ramp built in HSL goes muddy in the middle, while one built in OKLCH stays even. It is supported in all current browsers and is what Tailwind v4 uses.

Which input formats are accepted?

Hex (3, 4, 6 or 8 digits), rgb()/rgba(), hsl()/hsla(), hsv()/hsb(), all 148 CSS named colours, and — because parsing falls back to the browser's own colour engine — newer syntaxes such as hwb(), lab() and color-mix() too.

Why does my CMYK conversion not match my printer?

Because true CMYK conversion is device-dependent and needs an ICC colour profile for the specific press, paper and ink. The naive formula used here (and by every web tool) is a mathematical approximation that ignores all of that. Treat it as a starting point, never as print-ready values.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold) and UI components. AAA requires 7:1. The ratios against white and black are shown for every colour, along with which of the two makes a more readable text colour.