Color converter

Pick a color or type it in any format (HEX, RGB, HSL, OKLCH, a name such as "tomato"…) and instantly get its value in all the others, ready to paste into your CSS. Adjust the transparency and check whether it is readable on white and on black.

Color formats

HEX (#RRGGBB) is the most common format on the web: three pairs of hexadecimal digits with the amount of red, green and blue, from 00 to FF. RGB expresses the same in decimal, from 0 to 255. HSL describes a color by its hue (0-360°), saturation and lightness in percent, which makes it easy to create lighter or darker variants of the same color.

CMYK (cyan, magenta, yellow and black) is the printing model. The conversion from RGB is approximate: to print accurately you need the print shop's color profile.

Transparency, HWB and OKLCH

Transparency is set with a fourth value, the alpha channel: #FF880080 (8-digit HEX), rgba(255, 136, 0, 0.5) or, with the modern syntax, rgb(255 136 0 / 50%). 0 is fully transparent and 1 (or 100%) fully opaque.

HWB (hue, whiteness, blackness) and OKLCH (lightness, chroma, hue) are CSS Color 4 formats supported by all current browsers. OKLCH is perceptually uniform: two colors with the same lightness look equally light, which makes it ideal for building palettes and variants. HSV/HSB does not exist in CSS, but it is the model used by Photoshop, Figma and other design tools.

CSS also defines 148 color names (tomato, rebeccapurple, steelblue…). If your color has no name, we show you the closest CSS name.

Contrast and accessibility

The WCAG accessibility guidelines require a minimum contrast between text and background so that people with low vision can read it: 4.5:1 for normal text at level AA and 7:1 at level AAA (3:1 and 4.5:1 for large text). Contrast ranges from 1:1 (same color) to 21:1 (black on white).