Color converter
Convert a colour between HEX, RGB, HSL, HSV and CMYK, and check whether two colours have enough contrast for readable text.
Runs entirely in your browser
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- CSS name
Contrast checker
Contrast ratio –
| Use | Needs | Result |
|---|---|---|
| Normal text, AA | 4.5:1 | |
| Normal text, AAA | 7:1 | |
| Large text, AA | 3:1 | |
| Large text, AAA | 4.5:1 | |
| Icons and UI parts, AA | 3:1 |
Reads HEX (3, 4, 6 or 8 digits), rgb(), hsl(), hsv(), cmyk() and CSS colour names; other CSS colour syntax is read by your browser where it can. HSL, HSV and CMYK are shown to one decimal place.
How to convert a colour
- Type or paste a colour in any common format, such as
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)ornavy, or pick one with the colour picker. - Copy the format you need from the list. Values update as you type.
- Under Contrast checker, enter a text colour and a background colour to see their contrast ratio and whether they pass WCAG AA and AAA.
Colour formats and contrast
HEX and RGB describe a screen colour as amounts of red, green and blue from 0 to 255; HEX simply writes each amount as two hexadecimal digits, with an optional third pair for opacity. HSL and HSV describe the same colours by hue (an angle around the colour wheel), saturation, and lightness or value, which makes it easier to pick a lighter or duller version of a colour. They are different coordinates for the same sRGB colours, so converting between them is exact apart from rounding.
CMYK is different: it describes ink, and the true conversion depends on the printing process. The figure shown is the naive formula (black is 1 minus the brightest channel, and the other inks make up the rest), useful for rough work but not a substitute for a print profile.
The contrast checker applies the WCAG 2 contrast formula, the one used in accessibility audits and by browser developer tools. It measures luminance contrast only, so it can't tell you about colour-blindness pairs such as red on green, and very thin or small fonts may need more contrast than the minimum.
Tips
- Need the colour of a pixel in a photo or screenshot? Use the Image colour picker.
- Making a QR code in brand colours? The QR code generator warns when the contrast is too low to scan.
- Converting hex numbers that aren't colours? Try the Number base converter.
Questions
Is the CMYK value right for printing?
Only roughly. The CMYK here is the simple formula that converts screen RGB without a colour profile, which is what most online converters use. Printers work with specific inks and paper, described by an ICC profile, so for print work convert in design software with the profile your printer gives you.
How is the contrast ratio calculated?
With the WCAG 2 formula: each colour's relative luminance is worked out from its sRGB values, and the ratio is (lighter + 0.05) divided by (darker + 0.05). It ranges from 1:1 (no contrast) to 21:1 (black on white). The current WCAG text uses a threshold of 0.04045 in the formula; older copies said 0.03928, which gives the same result for every 8-bit colour.
What ratios do AA and AAA require?
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, meaning at least 24 px regular or about 18.7 px bold, needs 3:1 for AA and 4.5:1 for AAA. Icons, input borders and other user-interface parts need 3:1 (WCAG 1.4.11). A ratio is not rounded up: 4.49:1 fails AA for normal text.
What happens with transparent colours?
A partly transparent text colour is blended with the background first, the way a screen shows it, and the blended colour is measured. A partly transparent background is assumed to sit on white. Channels are rounded to whole numbers after blending, as a display would show them.
Why do HSL values change slightly after converting back?
Screen colours have 256 levels per channel, so most HSL and HSV values don't land exactly on one of them. The converter keeps full precision internally and rounds only for display: HEX and RGB to whole numbers, HSL, HSV and CMYK to one decimal place.
Does it know CSS colour names?
Yes, all 148 named colours in CSS, such as rebeccapurple and cornflowerblue. Type a name to convert it; when a colour exactly matches a name, the name is shown too. Some colours have two names, such as aqua and cyan.