Color converter

The same color, in the language each tool speaks

Designers give you a hex code, a stylesheet wants HSL, a print job asks for CMYK, a design token uses OKLCH and an image editor talks in RGB. A single color has many faces, and moving between them by hand is error-prone. This converter takes any color you can write in CSS and shows all the common representations at once.

The formats

• HEX is the most common on the web: #3b82f6, with an alpha pair for transparency.
• RGB gives the red, green and blue components from 0 to 255, in modern space-separated syntax and in the older comma form.
• HSL describes a color by hue, saturation and lightness, which is easier to reason about when you want a lighter or a duller version of the same color.
• HSV or HSB is the model behind many color pickers, with value or brightness instead of lightness.
• HWB mixes a hue with an amount of white and black.
• CMYK is the print model, in cyan, magenta, yellow and key (black). The conversion here is the simple mathematical one, not the result of a print profile, so it is for guidance rather than for press.
• OKLCH is a modern perceptual model in which equal steps look equally different, so it is good for building consistent palettes. CSS supports it natively.

What you can type

Anything the browser understands as a CSS color: hex in three, six or eight digits, with or without the hash, rgb() and hsl() in either syntax, hwb(), lab(), lch(), oklab(), oklch(), color() and the 140 or so named colors. A picker is also provided. The swatch shows the color, with a checkerboard behind it so that transparency is visible.

Contrast at a glance

Two figures show the contrast ratio of the color against white and against black, using the WCAG formula. It gives a quick idea of which text color to put on top: a ratio of 4.5:1 or more is needed for normal text to be considered accessible. For a full check of a text and background pair, use the contrast checker.

What it does not do

Rounded values can differ by one unit from what another program shows. Colors outside the standard RGB range, such as those in wide-gamut spaces, are converted to the nearest representable one. There is no color management or profile, so CMYK values should be checked in your print workflow.