How it works
Type a color in any common format or use the picker. You get the same color as HEX, RGB, HSL and CMYK, its contrast ratio against white and black text with the matching WCAG level, and a row of lighter and darker shades you can tap to explore.
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is relative luminance
Reading the contrast levels
- AAA (7:1 or more): excellent readability for body text.
- AA (4.5:1 or more): the minimum for normal text on websites.
- AA Large (3:1 or more): only for large or bold headings and icons.
- Below 3:1: hard to read for many people.
Tips
- CMYK values are a simple conversion; printers use color profiles, so check proofs for exact print colors.
- 8-digit HEX and rgba() include transparency.
- Click any value to copy it.
Standards and sources
- Color values follow the CSS Color Module Level 4 (sRGB)
- Contrast ratios and levels follow WCAG 2.2 (W3C)
Last reviewed October 7, 2026
Frequently asked questions
How do I convert HEX to RGB?
Type the HEX code, such as #ff6600, and the RGB value appears instantly — rgb(255, 102, 0) in this case.
What contrast ratio do I need?
WCAG requires at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level. Large headings need 3:1.
Are the CMYK values exact for printing?
They are a direct mathematical conversion. Real printing depends on paper and ink profiles, so confirm with a proof.
Does it support transparency?
Yes. 8-digit HEX, rgba() and hsla() values keep their alpha channel.
How do I copy a value?
Click any HEX, RGB, HSL or CMYK value to copy it, or use the copy button for all of them at once.