Hex Color Tools

How these fit together

A hex color is three bytes: red, green and blue, each from 00 to FF. Every tool here is a different way in and out of that same fact.

Use RGB when you need to calculate with a color — opacity, gradients, image processing. Use HSL when you need to change a color, because adjusting darkness means moving one number instead of recomputing three. Use hex to record and ship the result.

A working order

Most color work follows the same path, and picking the right tool for each step saves a lot of guessing.

1. Choose a base color with the picker, or paste one you already have.
2. Check contrast straight away. Every tool here reports the WCAG ratio, and a color that fails is a color you will have to change later — cheaper to know now.
3. Build variants in HSL. Hover, active, disabled and tint states are one number apart from the base, which keeps a palette coherent.
4. Convert back to hex to ship, since that is what stylesheets, design tools and brand documents expect.

Why contrast is on every page

Perceived brightness and measured contrast are unrelated, and eyes are unreliable here. Pure yellow on white scores 1.07:1 and is close to unreadable despite looking vivid; pure blue on white scores 8.59:1 and reads comfortably. WCAG asks for 4.5:1 for body text and 3:1 for large text.

Because that judgement cannot be made by looking, the ratio is reported by every converter in this section rather than hidden behind a separate checker.

Hex, RGB or HSL in your stylesheet

All three are valid CSS and none is faster to render. Hex is the most compact for a fixed value and the format every design tool exports. RGB is the one to reach for when you need channel arithmetic or opacity. HSL is the easiest to maintain when colors relate to each other, because a whole palette can key off one hue.

Spelled colour outside the US — but the CSS property is color, and so is every hex code you will meet in a stylesheet.

Every color tool