About the Color Converter
Design tools use HEX, CSS uses RGB or HSL, and print shops want CMYK. Type a value into any field and every other format updates instantly, including CSS code with transparency (alpha).
The tool also calculates the contrast ratio between text and background colors and shows AA and AAA badges for the Web Content Accessibility Guidelines (WCAG 2.1), the standard referenced by the ADA, Section 508 and the European EN 301 549.
How to use
- Tap the large swatch to pick a color, or type a code into any of the HEX, RGB, HSL, HSV or CMYK fields.
- Move the opacity slider to get 8-digit HEX plus rgba and hsla codes.
- Under Contrast ratio, check the ratio against white, black and a color of your choice.
- Tap a color in Tints & shades to copy its HEX code, or copy all CSS at the bottom.
Color code formats
| Format | Example | What it means |
|---|---|---|
| HEX | #4f46e5 | Red, green and blue as two hex digits each; with 8 digits the last two are opacity |
| RGB | rgb(79, 70, 229) | Each channel from 0 to 255 |
| HSL | hsl(243, 75%, 59%) | Hue (0โ360ยฐ), saturation and lightness; easy to adjust by hand |
| HSV (HSB) | hsv(243, 69%, 90%) | The model used by the color pickers in Photoshop and Figma |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Ink percentages for printing |
WCAG contrast requirements
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | at least 4.5:1 | at least 3:1 |
| AAA (enhanced) | at least 7:1 | at least 4.5:1 |
Large text means at least 18pt (about 24px) or 14pt bold (about 18.66px). Most accessibility laws and audits require level AA for body text. Contrast ratios range from 1:1 (same color) to 21:1 (black on white).
FAQ
Why do printed colors look different from the screen?
Screens mix light (RGB) while printers mix ink (CMYK), so they can reproduce different ranges of color. The CMYK values here come from the simple conversion formula and will differ from values using a printer profile such as GRACoL or SWOP. Ask for a proof for important print jobs.
What is an 8-digit HEX code?
It is #RRGGBBAA, where the last two digits set opacity: 80 is about 50%, CC is 80% and FF is 100% (opaque). All modern browsers support it.
How is contrast calculated for transparent colors?
A transparent color looks different on every background, so the tool ignores opacity and calculates the ratio using the solid color.
Can I type color names?
Yes. Enter any of the 148 standard CSS color names, such as red, navy, skyblue or tomato, in the HEX field.