What this tool does
The same color looks different depending on the model used to describe it. HEX and RGB are device values; HSL is intuitive for tweaking; OKLCH is perceptually uniform, so lightness changes stay visually even. This converter shows all four and checks WCAG contrast in both directions.
How to use it
- Pick a color or paste a HEX value.
- Read the four color formats.
- Check contrast before using the color for text.
Questions
What is OKLCH?
A perceptual color space with lightness, chroma and hue. Equal lightness steps look equal, which makes palette work more predictable.
Which contrast standard is used?
WCAG 2.1: AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1.
Why is HSL not perceptual?
In HSL, equal lightness values do not look equally bright across hues — yellow and blue at 50% lightness look very different.