Color Picker and Converter

Pick a colour and get it in HEX, RGB, HSL, HWB and OKLCH at once, with a WCAG contrast check and generated tints and shades. Free online tool.

Color

Every notation

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)
HWB: hwb(243 27% 10%)
OKLCH: oklch(51.1% 0.230 277.0)
CSS variables: --color: #4f46e5;

Contrast check

Against

Sample text

The quick brown fox

6.29 : 1

AA body textpasses
AA large textpasses
AAA body textfails
AAA large textpasses

Tints and shades

What this tool is for

One picker that gives every notation at once instead of making you convert between them, plus the two things a picker usually leaves out: a WCAG contrast check against your text colour, and a generated ramp of tints and shades you can lift straight into a design token file.

How to use it

Pick a colour from the wheel, or paste a value in any notation and it will be parsed.
Copy the format you need: HEX, RGB, HSL, HWB or OKLCH.
Set a background colour to check contrast against WCAG AA and AAA thresholds.
Use the generated tints and shades as a starting palette.

Frequently asked questions

What is OKLCH and why does it matter?

A perceptual colour space, supported by all current browsers. Changing lightness in OKLCH changes only perceived lightness, so a palette built by stepping the L value stays even, which is not true in HSL where a yellow at 50 percent lightness looks far brighter than a blue at the same number.

What contrast ratio do I need?

WCAG AA requires 4.5 to 1 for body text and 3 to 1 for large text. AAA raises those to 7 to 1 and 4.5 to 1. Interface elements and focus indicators need at least 3 to 1.