Convert a colour between HEX, RGB, HSL and OKLCH, generate an eleven-step tone scale, and check its contrast against white and black by the WCAG criteria.
OKLCH is the format worth knowing: it is built so that the same lightness is perceived as the same lightness whatever the hue, which HSL does not manage at all. That is why building coherent scales in it is so much easier.
How to use it
- Pick a colour with the swatch or type it in any format.
- Copy whichever format you need.
- Check the contrast table before using it for text.
Frequently asked questions
- What contrast do I need?
- 4.5:1 for normal text and 3:1 for large or bold text, which is level AA. AAA asks for 7:1. Below 3:1 the text is hard work for a lot of people.
- Why do yellow and blue at the same HSL lightness look so different?
- Because HSL takes no account of how the human eye perceives light, which is far more sensitive to green and yellow. OKLCH corrects for that.
- What input formats does it take?
- HEX of three, four, six or eight digits, rgb(), hsl(), and CSS colour names such as “tomato” or “rebeccapurple”.
Related tools
Minify CSSCSSO: it restructures and merges rules, not just strips spaces.
Minify JavaScriptTerser in the browser, with optional name mangling.
Count words and charactersA live count, reading time and the limits each platform imposes.
Change letter caseUPPERCASE, lowercase, Title Case, camelCase, snake_case and more.
Sort and clean up linesSort, drop duplicates and blanks, number or reverse a list.