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.
Embed this tool
Add this free tool to your own website — copy the code below. It stays up to date automatically.
More free tools
Image Resizer & Compressor
Shrink one photo or a whole batch to a target width and quality without uploading them anywhere.
Android Launcher Icon Generator
Turn text, an emoji or an image into a full set of Android launcher icons, ready to drop into your project.
Icon Library and Downloader
Search hundreds of thousands of open-source icons, recolour them and download SVG or PNG.
Background Remover
Cut out a plain or evenly-lit background and download a transparent PNG - no upload, no sign-up.
Photo Enhancer
Fix exposure and colour, sharpen, or one-click auto-enhance a photo - all in your browser.
Photo Collage Maker
Drop a few photos into a grid, set the spacing and shape, and download the collage as a PNG.