Color Converter
Convert any color between HEX, RGB, HSL and HSV. Use the picker or type into any field — the others update live. Includes a WCAG contrast checker for accessible color pairs.
Useful for translating design system colors, picking accessible foreground/background pairs and matching values across tools.
WCAG contrast checker
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
WCAG thresholds
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
The ratio is computed from relative luminance per WCAG 2.1, using the linearized sRGB channels and the weights 0.2126·R + 0.7152·G + 0.0722·B.
Format notes
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
FAQ
Why don't HSL and HSV match my Photoshop / Figma values exactly?
Rounding. Hue, saturation and lightness are continuous; tools round them differently. A 1° hue or 1% saturation difference is expected and visually identical.
Does the contrast checker include alpha (transparency)?
No. WCAG ratios assume fully opaque colors. If you have a semi-transparent foreground, blend it against the background first and check the resulting opaque color.
What about APCA, the new contrast algorithm?
APCA is a candidate replacement for the WCAG 2.x ratio in WCAG 3.0 (still in draft). For shipping work today, the WCAG 2.1 ratio is what auditors and Lighthouse check.
Is anything sent to a server?
No. All conversion and contrast math runs in your browser.