Color converter
Paste a HEX, RGB, HSL or color name and get every format at once, with a WCAG contrast check.
- Runs on your device
- No sign-up
- Works offline
Accepts #rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() or a CSS color name such as rebeccapurple.
—————Normal text, 16px. The quick brown fox.
Large text, 24px
| Level | Normal text | Large text |
|---|---|---|
| AA | — | — |
| AAA | — | — |
Large text is 24px or more, or 18.66px and bold. Pass marks are checked against the exact ratio.
How to convert a color code
- Type a HEX, rgb(), hsl() or color name, or pick one with the swatch.
- Copy the format you need from the five results.
- Set a background to see the contrast ratio and whether it passes WCAG.
Questions
Why is the CMYK value only approximate?
CMYK depends on the ink, paper and color profile of the printer. This converter uses the plain arithmetic formula, which ignores all three, so a printed color will differ from the screen. Ask the printer for a proof before a large run.
How is the contrast ratio worked out?
WCAG 2.x takes the relative luminance of each color, from its red, green and blue values after gamma correction. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Black on white gives 21:1, the highest possible.
Which thresholds does the check use?
WCAG 2.x asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Large text is 24px or more, or 18.66px and bold.
Which color formats does the box accept?
Hex codes with three, six or eight digits, rgb() and rgba(), hsl() and hsla(), and CSS color names such as rebeccapurple. The browser reads the value, so anything it understands as a CSS color works.