Convert colours between HEX, RGB, HSL and CMYK
Enter a colour in any format (or pick one) to get every other format, nine shades and tints, complementary and triadic harmonies, and its contrast ratio against black and white for accessibility.
How to use the Colour Converter & Picker
- Type or paste a colour in any common notation.
- Click Convert.
- Copy the format you need; click a swatch code to copy a shade.
Colour notations explained
HEX (#RRGGBB) is the web default: three bytes of red, green and blue written in hexadecimal, so #ff0000 is pure red. RGB gives the same three values in decimal (0–255). HSL describes hue (0–360° around the colour wheel), saturation and lightness, which is how designers think about "a darker version of this blue": keep hue and saturation, lower lightness. CMYK is the subtractive model used for print, where cyan, magenta, yellow and black inks absorb light; the conversion here is the standard formula and is only a preview, because real print output depends on the ICC profile of the press and paper.
Shades, tints and harmonies
Shades and tints keep the hue and saturation and step lightness from 90% down to 10%, which gives a usable palette for hover states, borders and backgrounds from a single brand colour. Harmonies rotate the hue: the complementary colour sits 180° opposite, triadic colours 120° apart, analogous colours 30° either side, and split-complementary at 150° and 210°.
Contrast for accessibility
WCAG 2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components. The tool reports the ratio against pure white and pure black; if your colour fails on both, it is a mid-tone that needs a darker or lighter partner rather than black or white text.
Frequently asked questions
Can I enter a CSS colour name?
Yes: any of the 148 CSS named colours (for example teal, coral, rebeccapurple).
Is the CMYK value print-accurate?
It is the standard formula conversion, adequate for choosing a starting point. Final print colours depend on the printer profile.
Why does my colour fail contrast on both black and white?
Mid-lightness colours (L around 40–60%) often do; use a much darker or lighter variant from the shades row for text.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.