Color Converter

Convert, preview, and check accessibility

Type a value into any of the three boxes — HEX, RGB or HSL — and the other two update as you type. A colour picker slider is there for when you would rather eyeball it, and a six-step shade palette is generated from your colour's hue.

What you get

• Three notations at once — `#c2410c`, `rgb(194, 65, 12)`, `hsl(19, 88%, 40%)`.
• Shade palette — six lightness steps built from the same hue and saturation, handy for hover states, borders and backgrounds.
• WCAG contrast ratios — the real maths (relative luminance, 1.05 offset) against white and against near-black, graded against the standards:
• 4.5:1 — AA for normal body text
• 3:1 — AA for large text (18.66 px bold or 24 px regular), borders and UI icons
• 7:1 — AAA body text

Why contrast checking matters

Low-contrast text is the most common accessibility defect on the web, and it is also a ranking-adjacent usability signal: users bounce from text they cannot read. Checking a brand colour before shipping a design costs seconds here.

Notes

• HEX accepts `#abc` and `#aabbcc` (with or without `#`). RGB accepts `r, g, b`. HSL accepts `h, s%, l%`.
• HSL rotation keeps saturation, so the palette stays recognisably the same colour family.
• Everything is computed in your browser — no upload, no tracking.

FAQ

What contrast ratio do I need?

4.5:1 for body text (AA), 3:1 for large text and UI elements, 7:1 for AAA body text. Aim higher than the minimum when you can.

Why does HSL look different from RGB?

They describe the same colour in different coordinate systems. HSL is easier for humans to tweak — change one number to rotate hue or lighten the colour.

Can I use the palette in a design?

Yes. Keep hue and saturation, vary lightness only — that is the standard way to build a consistent shade ramp.