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.