Colour Converter & Picker
HEX, RGB, HSL — plus a contrast check
Input
Result
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
Tints and shades (click to jump to that colour)
WCAG: body text needs 4.5:1 (AA), 7:1 for AAA. CMYK is indicative only — it ignores colour profiles.
Design tools speak HEX, CSS animations want HSL, and canvas code wants RGB channels. Pick a colour once and get every notation, along with the contrast figures that decide whether text on it will be readable.
How to use
- 1 Pick a colour, or paste a code in any format.
- 2 All the other notations appear at once.
- 3 Use the tint and shade scale to build a consistent palette.
- 4 Check the contrast ratios before using it behind text.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for body text and 3:1 for large text. AAA asks for 7:1. Below 3:1 the text is genuinely hard to read for many people, not merely suboptimal.
Why use HSL instead of HEX?
HSL separates hue from saturation and lightness, so making a colour 10% lighter is one number instead of guesswork across three channels. That is why design systems build their scales in HSL.
Is the CMYK value usable for print?
Only as a rough indication. Real conversion depends on the paper, the ink and the colour profile. For anything going to press, get the values from the printer rather than from a formula.