Color Converter & Contrast Checker
Convert between HEX, RGB, and HSL, and check WCAG contrast for any two colors.
| Format | Value | |
|---|---|---|
| HEX | #3ddc97 | |
| RGB | rgb(61, 220, 151) | |
| HSL | hsl(154, 69%, 55%) |
Contrast ratio: 15.78 : 1
| Level | Normal text | Large text |
|---|---|---|
| WCAG AA | Pass | Pass |
| WCAG AAA | Pass | Pass |
About the Color Converter & Contrast Checker
This tool does two related jobs for designers and frontend developers. The converter takes a color in any common CSS format, HEX, RGB, or HSL, and shows it in all three, with a live swatch so you can confirm it is the color you meant. The contrast checker takes a text color and a background color and tells you whether the combination meets WCAG accessibility requirements.
HEX is the compact form most design tools export. RGB maps directly to how screens produce color. HSL is often the most useful for adjustments, because hue, saturation, and lightness are separate: you can darken a color for a hover state by lowering its lightness without changing what color it is.
Contrast matters because text that looks fine to one person can be unreadable to another. WCAG AA requires a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, which is 18pt and above, or 14pt bold. AAA raises those thresholds to 7 to 1 and 4.5 to 1. Meeting AA is the accepted baseline for production interfaces, and many public sector sites are legally required to.
Everything runs in your browser. Brand palettes and unreleased design work stay on your machine.
Reach developers and designers who use these tools every day. Privacy-first, no trackers.
Frequently asked questions
What contrast ratio do I need for accessibility?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt and above, or 14pt bold). WCAG AAA requires 7:1 and 4.5:1 respectively. AA is the standard baseline for production interfaces; AAA is recommended for body text in reading heavy applications.
When should I use HSL instead of HEX or RGB?
Use HSL when you need to adjust a color rather than just specify it. Making a color darker for a hover state, less saturated for a disabled state, or generating a palette of tints all become simple arithmetic on the lightness or saturation value, while the hue stays the same.
Why do my colors look different on other screens?
Screens vary in color gamut, calibration, and brightness. The numeric values here are exact, but how they render depends on the display. Contrast ratios are calculated from the values themselves, so accessibility results are reliable regardless of screen.
Does the checker handle transparency?
No. Contrast is calculated for fully opaque colors, which is what WCAG defines. If your text or background uses transparency, the effective color depends on what is behind it; flatten it to the resulting solid color first.
Are my colors uploaded anywhere?
No. Parsing, conversion, and contrast math all run in your browser. Unreleased brand colors and design work never leave your machine.