Color Converter

Hex, RGB, HSL, CMYK and OKLCH, with a contrast check.

Every format

Examples

Questions

Which color formats can I type in?

Hex (#36c, #3366cc, or #3366ccaa with alpha), rgb() and rgba() in comma or space syntax, hsl() and hsla(), and oklch(). CMYK is output only.

Why is CMYK output only?

There's no common web syntax for typing a CMYK color. The CMYK shown uses the standard formula, which gives a rough idea of ink. For real print colors, use your printer's color profile.

What is OKLCH, and why use it over HSL?

OKLCH is a CSS color space where equal lightness looks equally light. In HSL, yellow and blue at 50% lightness look very different. OKLCH is better for building color scales.

Why check contrast against white and black only?

The most common question is whether white or black text works on a color. For any two colors, use the Contrast Checker tool.

What do the WCAG contrast labels mean?

3:1 is the minimum for large text (AA). 4.5:1 is AA for normal text. 7:1 is AAA for normal text. Below 3:1 fails at every size.

What are the tints and shades?

Your color's hue and saturation, stepped from dark to light. Use them for hover, active or disabled states. Click a swatch to copy its hex.