It describes a color by perceived lightness (L), chroma or colorfulness (C) and hue angle (H). Unlike HSL, two colors with the same L in OKLCH look equally bright, which makes it reliable for design systems.

Why does my OKLCH color look different in HEX?

OKLCH can describe colors outside the sRGB range that HEX and RGB can show. When that happens, the tool converts to the nearest sRGB color and tells you.

Which contrast standard does this use?

The WCAG 2.x contrast formula based on relative luminance, which is what accessibility guidelines and audits reference today.

Free developer tool

Color Converter: HEX, RGB, HSL and OKLCH

Convert colors between HEX, RGB, HSL and OKLCH, and check WCAG contrast against white and black text.

ColorHEX, rgb(), hsl() or oklch()

Try:

HEX	#2e4fe8
RGB	rgb(46 79 232)
HSL	hsl(229 80% 55%)
OKLCH	oklch(51.02% 0.2322 267.3)

Shades with the same hue

Even steps of OKLCH lightness. Click one to load it.

AaSample text

Color on white6.18:1

AAAA largeAAA

AaSample text

Color on black3.40:1

AAAA largeAAA

AaSample text

White on color6.18:1

AAAA largeAAA

AaSample text

Black on color3.40:1

AAAA largeAAA

For text on this color, white reads better (6.18:1).

Every color format, plus contrast

Enter a color as HEX, rgb(), hsl() or oklch(), or use the picker, and get it in all four formats, ready to copy into CSS. The tool also shows the WCAG 2 contrast ratio of the color against white and black, with AA and AAA results for normal and large text.

OKLCH is the newest of these formats and is supported in all modern browsers. Its lightness value matches how bright a color looks to people, which makes it easier to build consistent palettes and readable color schemes.

Contrast rules of thumb

AA, the usual legal and accessibility target, needs 4.5:1 for body text.
Large text (24px, or 18.66px bold) needs 3:1 for AA.
AAA needs 7:1 for body text and 4.5:1 for large text.
Contrast ignores transparency here; a semi-transparent color will have lower real contrast.

Frequently asked questions

What is OKLCH?: It describes a color by perceived lightness (L), chroma or colorfulness (C) and hue angle (H). Unlike HSL, two colors with the same L in OKLCH look equally bright, which makes it reliable for design systems.
Why does my OKLCH color look different in HEX?: OKLCH can describe colors outside the sRGB range that HEX and RGB can show. When that happens, the tool converts to the nearest sRGB color and tells you.
Which contrast standard does this use?: The WCAG 2.x contrast formula based on relative luminance, which is what accessibility guidelines and audits reference today.