Color Converter

Convert between HEX, RGB, HSL, HWB and OKLCH, build tints and shades, and check WCAG contrast.

Color (HEX, rgb(), hsl(), hwb() or a CSS name)

Picker

HEX

RGB

HSL

HWB

OKLCH

Tints & shades

Click a swatch to copy its HEX value.

Text (foreground)

Background

–contrast ratio

Large text — 24px regular or 18.66px bold

Normal body text. The quick brown fox jumps over the lazy dog.

AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. Semi-transparent text is blended over the background first.