About this tool
Enter a colour as HEX (#12808c or #abc), rgb(18, 128, 140) or hsl(186, 78%, 31%) and instantly see it in all three formats, plus its WCAG contrast ratio against white and black text, and a small complementary/analogous palette to pair it with. Useful when a design spec gives you one format and your code needs another, or when you need to check a colour is accessible. Runs entirely in the browser.
How to use it
- 1 Type or paste a colour value into the input.
- 2 The HEX, RGB and HSL equivalents, contrast ratio and palette all update together.
- 3 Check the AA/AAA badge to see if the colour is accessible as text on white or black.
- 4 Click any value or palette swatch to copy it.
Frequently asked questions
Which input formats are accepted?
3- and 6-digit HEX (with or without #), rgb()/rgba(), and hsl()/hsla(). The alpha channel is ignored.
Are the conversions exact?
HEX and RGB are exact. HSL is rounded to whole degrees and percentages, which is standard for CSS.
Does it work offline?
Yes, once the page has loaded.
What does the AA/AAA badge mean?
It is the WCAG accessibility standard for text contrast: AA (4.5:1+) is the common minimum, AAA (7:1+) is the stricter level, and "AA Large" (3:1+) applies only to large headings.
Guide
Embed this tool
Add this free tool to your own website — copy the code below. It stays up to date automatically.
Tools for your site →