Skip to content
en es

Color Converter

Type a color in any CSS format or use the picker and get it as HEX, RGB, HSL, HWB and OKLCH. Then check how readable it is on a background with the WCAG 2 contrast ratio.

Runs in your browser — nothing is uploaded.

HEX, rgb(), hsl(), hwb() or oklch(). Comma or space syntax, optional “/ alpha”.

This color is outside the sRGB range: the values above are the closest color a standard screen can show.

In every format

Contrast checker (WCAG 2)

The color above is the text color. Choose the background it sits on.

Large sample text

Normal sample text, the quick brown fox jumps over the lazy dog.

How to use it

  1. Type a color (#1e90ff, rgb(30 144 255), hsl(210 100% 56%), hwb(…) or oklch(…)) or choose one with the picker.
  2. Copy the format you need from the list.
  3. In the contrast section, set the background color: the tool shows the ratio and whether it passes AA and AAA for normal and large text.

Frequently asked questions

Which formats can I type?

HEX with 3, 4, 6 or 8 digits, rgb()/rgba(), hsl()/hsla(), hwb() and oklch(), with commas or spaces and an optional “/ alpha”. Percentages and hue units (deg, rad, turn) work too.

What is OKLCH?

A modern CSS color space where lightness, chroma (colorfulness) and hue behave much more like human vision than HSL. Colors outside the sRGB range are clipped to the closest displayable color and the page says so.

How is the contrast ratio calculated?

With the WCAG 2 formula: (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of each color. A ratio of 4.5:1 passes AA for normal text, 3:1 for large text and interface parts, and 7:1 passes AAA.

What counts as large text?

At least 24 px, or 18.66 px if bold. Smaller text needs a higher ratio.

What about transparency?

A translucent text color is blended over the background before measuring. The background is treated as opaque.