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.
We could not parse this notation. Valid examples: #f60, rgb(255 102 0), oklch(0.7 0.2 40), orange.
Click a value to copy it.
What to know about this color
Convert a list of colors Collapse the list
Lines like --brand: #4f46e5; also work: we keep the variable name and convert only the color.
| Input | Output |
|---|
Ready-made column
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
Tell us what was missing.
Other tools
HTML Special Characters
487 characters in twelve sections, with click-to-copy.
Visual HTML Editor
Type as in a text editor and get ready-made HTML.
HTML Color Codes
Color codes in HEX, RGB, HSL and HSB, with a contrast check
Glassmorphism CSS Generator
Frosted glass with a text readability check and a fallback
CSS to SCSS
Flat CSS becomes SCSS with nesting, and back, verified against your source.
CSS Grid Generator
A grid for three screens, with ready HTML and a block-order check
CSS Gradient Generator
Gradients without a gray middle, with a text readability check
Box Shadow Generator
Layered shadows, previewed on two backgrounds with a visibility check