Colour converter — HEX, RGB, HSL, HSV and contrast
Convert a colour between HEX, RGB, HSL and HSV, check its contrast against white and black, and pull a tint and shade scale from it.
Runs entirely in your browser — nothing is uploaded.
Accepts hex (#f80 or #ff8800), rgb(), hsl(), and CSS names like tomato.
Text contrast (WCAG 2.1)
Tints and shades
Same hue and saturation at nine lightness steps. Click any swatch to load it.
Contrast ratios use the WCAG 2.1 relative-luminance formula. AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
How to use
- Enter a colour. Hex, rgb(), hsl() or a CSS name like tomato — or use the picker.
- Copy any format. Each row has its own copy button, including CSS variable and Tailwind arbitrary-value forms.
- Check the contrast. Ratios against white and black, with WCAG AA and AAA pass or fail marked.
- Take a shade. Click any swatch in the scale to load it as the current colour.
Questions
What is the difference between HSL and HSV?
Both use hue and saturation, but the third value differs. HSL’s lightness goes from black through the pure colour at 50% to white at 100%. HSV’s value goes from black to the pure colour at 100% and never reaches white. HSL is more intuitive for building tint scales, which is why CSS uses it.
What contrast ratio do I need?
WCAG AA needs 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). AAA needs 7:1 and 4.5:1. Ratios run from 1:1 for identical colours to 21:1 for pure black on pure white.
Why does my colour pass on white but fail on black?
Contrast is not symmetrical around mid-grey — it depends on relative luminance, and the human eye is far more sensitive to green than to blue. A saturated blue can have plenty of contrast on white and almost none on black.
Does it support alpha?
Yes. 8-digit hex, rgba() and hsla() are all parsed, and the alpha is preserved in the output. Note that contrast ratios are calculated on the colour itself, ignoring transparency, since the actual result depends on what is behind it.