Color code converter — HEX, RGB, HSL, CMYK, and contrast checker
Use this to turn colors from a design mockup into CSS code, or to check whether button text is readable by accessibility standards.
The file is never sent to a server — processed entirely in this browser
Contrast checker (WCAG)
The contrast ratio against the background when this color is used for text. Body text: AA 4.5:1, AAA 7:1 / Large text (24px or bold 18.7px+): AA 3:1, AAA 4.5:1.
Abc 123
White background6.29:1
✓ AA body text ✗ AAA body text ✓ AA large text ✓ AAA large text
Abc 123
Black background3.34:1
✗ AA body text ✗ AAA body text ✓ AA large text ✗ AAA large text
Abc 123
Custom color #FFFFFF6.29:1
✓ AA body text ✗ AAA body text ✓ AA large text ✓ AAA large text
Lighten/darken level
Click a cell to copy its HEX code.
Advertisement
How to use Color conversion
- 1Enter a color code or choose one with the color picker (#4f46e5, rgb(), and hsl() all work).
- 2Code for every format is shown, and clicking it copies it.
- 3Check the contrast ratio against white, black, or a custom color, whether it passes WCAG, and lighten/darken levels.
Frequently asked questions
What contrast ratio is required?
WCAG AA requires at least 4.5:1 for body text and 3:1 for large text; AAA requires at least 7:1 and 4.5:1, respectively.
The CMYK values don't match my print shop's.
The CMYK values here are a simple mathematical conversion. Actual printing varies by paper and ink profile, so follow your print shop's standards.
Advertisement