Tool · Everyday
Convert colours and check contrast
Move a colour between HEX, RGB, HSL and OKLCH, build tints and shades, and test two colours against the WCAG contrast thresholds. It is all worked out on this page.
- Your colours go to
- Works offline
- Yes, once it has loaded
- Account
- None, and it is free
- Handles
- HEX, RGB, HSL, OKLCH and CSS colour names
Click any step to make it the current colour.
Large means 18.66px bold or 24px regular and up. A ratio of 4.5 clears AA for body text.
How to convert colours and check contrast
-
01Enter a colour
As hex, rgb(), hsl() or a name like rebeccapurple, or pick one from your screen.
-
02Read every format
HEX, RGB, HSL, OKLCH and a CSS variable, with tints, shades and harmonies.
-
03Check the contrast
Against a second colour, with a pass or fail for each WCAG level.
Questions about Colour Kit
How do I check colour contrast for accessibility?
Enter the text colour and the background colour. The ratio is shown with a pass or fail for WCAG AA and AAA, for normal and large text.
What contrast ratio does WCAG require?
4.5:1 for body text at level AA, and 3:1 for large text, which is 24px, or 18.66px in bold. Level AAA asks for 7:1 and 4.5:1.
Can it convert HEX to RGB or OKLCH?
Yes. Any colour you enter is shown as HEX, RGB, HSL, OKLCH and a CSS variable, each with its own copy button.
Can I pick a colour from my screen?
Yes, in browsers that offer the EyeDropper tool, which today means Chrome and Edge on a desktop.