How to use
- Type or paste a color in any format: #0A6B6B, rgb(10, 107, 107), hsl(180, 82.9%, 22.9%), cmyk(90.7%, 0%, 0%, 58%) or a name such as teal. You can also use the color picker.
- Read every format at once, with a live swatch. Tap Copy next to the one you need.
- Check the contrast table to see whether text on this color passes WCAG AA or AAA. Add a second color to test a specific pair.
Everything runs in your browser.
How the conversion works
All formats describe the same sRGB color:
- HEX is the red, green and blue values (0–255) written as three pairs of hex digits.
- HSL and HSV describe hue (0–360°), saturation and lightness or value, using the CSS Color 4 and Smith (1978) formulas.
- CMYK uses the simple CSS Color 5 formula: K = 1 − max(R, G, B), then C = (1 − R − K) ÷ (1 − K), and so on. It is not a print profile.
Contrast follows WCAG 2.2: work out each color’s relative luminance L, then ratio = (L1 + 0.05) ÷ (L2 + 0.05), from 1:1 to 21:1.
Example
#FF5733 is rgb(255, 87, 51), hsl(10.6, 100%, 60%), hsv(10.6, 80%, 100%) and cmyk(0%, 65.9%, 80%, 0%).
| Color | On white | On black | Normal text on white |
|---|---|---|---|
| #FF5733 | 3.15:1 | 6.66:1 | Fail (AA large only) |
| #0A6B6B | 6.30:1 | 3.32:1 | AA pass |
| teal (#008080) | 4.77:1 | 4.39:1 | AA pass |
| #767676 | 4.54:1 | 4.62:1 | AA pass |
| #777777 | 4.47:1 | 4.68:1 | Fail |
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18 pt, or 14 pt bold) needs 3:1 and 4.5:1.
Rounding, transparency and color names
- Rounding: HSL, HSV and CMYK are shown to one decimal place, which converts back to the same HEX for every color. Contrast ratios are rounded down, because WCAG says 4.499:1 does not meet 4.5:1.
- Transparency: 4- and 8-digit HEX and rgba() keep their alpha. Contrast is then measured after blending the color over each background.
- Names: CSS has 148 color names for 139 distinct colors, because some are aliases, such as gray and grey.
Mixing colors by proportion, such as 3 parts blue to 1 part white? The ratio calculator scales the amounts.