Color Converter
Convert colors between HEX, RGB, HSL, and CMYK, and check WCAG contrast ratios.
AA normal text: Pass · AA large text: Pass · AAA: Fail
The quick brown fox jumps over the lazy dog.
About the Color Converter
Every color format here describes the same light, just with different math. HEX and RGB both store three 0-255 channels — HEX writes them as two hex digits each (e.g. #3366cc is R=51, G=102, B=204), while RGB writes them as plain decimal numbers. HSL re-expresses those same channels as hue (0-360° around a color wheel), saturation (0-100% vividness), and lightness (0-100% from black to white) — easier to reason about when you want "the same color but darker" or "more muted". CMYK approximates how a printer would mix cyan, magenta, yellow, and black inks to produce the color, derived from RGB by first finding the darkest channel (K), then scaling the rest against it.
To use it: pick a color with the swatch or type a hex value directly, then set a background color to test contrast. The contrast ratio follows the WCAG formula — relative luminance of each color, compared as (lighter + 0.05) / (darker + 0.05) — and is checked against three thresholds: 4.5:1 for AA normal text, 3:1 for AA large text, and 7:1 for AAA. For example, #3366cc text on a #ffffff background gives a ratio around 5.1:1 — enough to pass AA for any text size, but not quite AAA for normal text.
What contrast ratio do I need for accessibility?+−
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Why does CMYK not exactly reproduce what I see on screen?+−
CMYK here is computed with a simple RGB-to-CMYK formula meant for approximating print output. Real print reproduction depends on the specific ink set, paper, and printer color profile, so treat these values as a starting estimate, not a calibrated proof.
What do the H, S, and L values in HSL mean?+−
Hue (0–360°) is the position on the color wheel, saturation (0–100%) is how vivid versus gray the color is, and lightness (0–100%) is how close to black or white it is — useful for tweaking a color while keeping its hue fixed.
How is the WCAG contrast ratio actually calculated?+−
Each color's relative luminance is computed from its gamma-corrected RGB channels, and the ratio is (L1 + 0.05) / (L2 + 0.05) using the lighter color as L1 — producing a value from 1:1 (no contrast) to 21:1 (black on white).
Can I paste a color name or an rgb()/hsl() string instead of hex?+−
This tool expects a hex value (e.g. #3366cc); if your input isn't valid hex it will flag it. Convert named colors or rgb()/hsl() strings to hex first if that's your starting format.
Why is my hex color shown as invalid?+−
Hex colors must be 3 or 6 hex digits after the #, using only 0-9 and a-f. Extra spaces, a missing #, or an alpha channel (8-digit hex) that this tool doesn't support will trigger the invalid-color message.