Color converter & contrast checker
Pick or paste a color to get HEX, RGB and HSL, a shade scale, and a WCAG contrast check against another color.
Shade scale
Contrast check
Color formats and accessibility
Web colors are written as HEX (#ff6b57), RGB (rgb(255 107 87)) or HSL (hsl(8 100% 67%)). Designers like HSL because adjusting one number changes brightness or vividness predictably, while developers tend to meet HEX in style sheets.
Contrast matters because roughly one in twelve men and one in two hundred women have some color-vision deficiency, and everyone struggles with pale text in sunlight. The contrast checker uses the WCAG formula so you can tell at a glance whether a combination passes.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA asks for 7:1 and 4.5:1. Aim for AA at minimum.
What is the difference between HEX, RGB and HSL?
They describe the same color. HEX and RGB mix red, green and blue. HSL uses hue (angle on the color wheel), saturation and lightness, which is easier to adjust by hand: raise lightness to tint, lower it to shade.
Why do 3-digit HEX codes work?
#f60 is shorthand for #ff6600: each digit is doubled.
How are the shades generated?
They keep the hue and saturation and step the lightness from 95% down to 10%, which gives a usable light-to-dark scale for UI palettes.