Marketing tool

Convert colours and check they pass.

HEX, RGB and HSL together, a full tint and shade ramp, and the WCAG contrast ratios against white and black so you know whether text on it is legible.

Free, no sign-up
Nothing is uploaded
No watermark, no limits

Colour converter

Free

Pick

Or type a hex

—On white

—On black

HEX

RGB

HSL

CSS custom property

Tints and shades click any to copy

Runs entirely in your browser. Nothing is uploaded.

Worth knowing

How to get this right.

01

What the contrast numbers mean
WCAG asks for 4.5:1 for normal text and 3:1 for large text — roughly 24px, or 19px bold. AAA raises normal text to 7:1. The panel grades both white and black text on your colour, so you can see immediately which one is legible on it. A brand colour that fails both usually needs to stay a background, with text sitting on a tint of it instead.
02

HSL is the format to think in
Hex is for pasting and RGB is for machines, but HSL maps to how people describe colour: hue, saturation, lightness. Building a palette is far easier when a darker version means lowering one number rather than guessing at three.
03

A ramp beats a set of unrelated colours
Most interfaces need one brand colour at eight or nine lightnesses rather than eight different colours. The tints and shades above are that ramp — enough for backgrounds, borders, hover states and text without introducing a second hue that has to be managed.

Questions

About this tool.

What is the difference between HEX and RGB?

None, other than notation. #2F5FFF and rgb(47, 95, 255) are the same colour written two ways. Hex is compact for CSS; RGB is easier when a value is being computed.

Does it support alpha or opacity?

Not currently — the converter handles opaque colours. For transparency, take the RGB values and write them as rgba() with your own alpha.

What does the contrast ratio actually measure?

The relative luminance of two colours compared as a ratio. It runs from 1:1 for identical colours to 21:1 for pure black on pure white.

Why does my brand colour fail contrast?

Mid-tone saturated colours — most blues, greens and reds at full saturation — sit too close to both white and black. That is normal. Use the colour for backgrounds and large shapes, and pick a much darker shade from the ramp for text.

More free tools