Color converter
Paste any CSS color, or pick one, to get every format. Check its contrast against a background for accessible text.
Any CSS color: #2447c4, rgb(36 71 196), hsl(227 69% 46%), oklch(47% 0.2 265), rebeccapurple…
| Format | Value | Copy |
|---|---|---|
| HEX | — | |
| RGB | — | |
| HSL | — | |
| HWB | — | |
| OKLCH | — | |
| OKLab | — | |
| CMYK | — |
Contrast
The quick brown fox jumps over the lazy dog.
- Contrast ratio
- —
- AA normal text (4.5:1)
- —
- AA large text (3:1)
- —
- AAA normal text (7:1)
- —
- On white
- —
- On black
- —
Questions people ask
What contrast ratio do I need?
WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) at level AA, and 7:1 and 4.5:1 at AAA. Logos and decorative text are exempt.
Why use OKLCH?
OKLCH is designed so that equal steps look equally different to the eye. Changing only the lightness keeps the hue stable, which makes it good for building palettes and dark themes. All modern browsers support it in CSS.