Color Converter

Converts a color between ten notations, from HEX to oklch and Display-P3, and is honest when no exact conversion exists: some colors don't fit in sRGB.

We understand HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk() and CSS names — in the old comma notation and in the new space-separated one.

Convert a list of colors Collapse the list

Lines like --brand: #4f46e5; also work: we keep the variable name and convert only the color.

We pick the nearest color the way the standard tells us: reduce the chroma in oklch at the same hue and lightness until the color fits inside the gamut. Clamping channels at 255 is shorter, but it shifts the hue: a too-bright green becomes a different green after clamping, not the nearest one.

On input we accept HEX from three to eight characters, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), cmyk(), CSS color names, and a bare set of three comma-separated numbers, the way colors get pasted from design mockups. Both notations work: the old one with commas and the new one with spaces and alpha after a slash. On output you get the same ten formats, each copied with a click.

The CMYK conversion uses a formula, so the result is approximate: the real values depend on the print profile, paper, and ink. For a print-ready layout, set the color in the print shop's own profile. We show the formula value and say plainly that it is an estimate, a caveat you will not find in other converters.

Convert up to a hundred colors at once

Paste a list, one color per line, and pick the target notation. Lines like --brand: #4f46e5; are parsed as a whole: the variable name stays, only the color gets converted. The finished column is copied with one button, and the summary shows how many lines were converted and how many fell back because they were out of gamut.

What to do next

To pick shades and harmonies and check the contrast of a pair, see HTML color codes; to pull colors from a picture, use color palette from image; and to build a blend between colors, use CSS gradient generator.

Rate this tool

Help us get better

Other tools