JiffyGadgets
All tools / CH 10 · Color Converter

10Color converter

Type any color in any common notation. Every other notation appears alongside it, with contrast ratios for accessibility.

HEX
RGB
HSL
On white
On black

How it works

HEX and RGB describe the same thing in different notation — three channel values, base 16 or base 10. HSL is a different model: a hue angle on the color wheel, a saturation percentage and a lightness percentage, which makes it far easier to nudge a color by hand.

The contrast figures use the WCAG formula: each channel is linearised, weighted for how sensitive the eye is to it, and the two resulting luminances are compared. A ratio of 4.5:1 is the AA threshold for body text, and 3:1 covers large text at 24px or 19px bold.

Common questions

Which notation should I use in CSS?

All three work everywhere. HEX is the most compact for fixed values; HSL is far more pleasant when you want a slightly lighter or less saturated version of the same color, since you change one number.

What contrast ratio do I need?

4.5:1 for normal body text under WCAG AA, 3:1 for large text, and 7:1 if you are targeting AAA. Icons and interface borders need 3:1.

Why does my color pass on black but fail on white?

Contrast is relative. A mid-tone amber is bright against a dark background and washed out against a light one — which is exactly why both ratios are shown here.

Are alpha and transparency supported?

Input with an alpha channel is accepted but the alpha is ignored, because contrast against a transparent color depends on whatever sits behind it.