Color & Design

Convert, sample, mix and check color. All 9 tools below run locally in your browser — nothing is uploaded.

Every Color & Design tool

About Color & Design tools

Colour work splits into three jobs: converting between the notations a codebase uses, checking that a pairing is actually legible, and building a set of colours that belong together. These tools cover all three, with a live preview at every step rather than a value you have to imagine.

The contrast checker scores against the published WCAG thresholds — 4.5:1 for body text, 3.0 for large text, 7.0 for AAA — and the colour blindness simulator shows the same palette through the common types of colour vision deficiency, which catches the pairings that pass a ratio test but still fail in practice.

Frequently asked questions

Where do I start when building a palette from one brand colour?

Palette Builder derives the harmonies from a single colour, and Colour Mixer fills in the steps between any two of them. Contrast Checker and Colour Blindness Sim then tell you which of the results survive as text and which only work as decoration.

Why does my colour fail contrast when it looks fine?

The ratio is measured on relative luminance, not on how vivid a colour looks. White on a mid-tone blue or orange is the classic case — legible on a good screen, but it lands near 2.7:1, well under the threshold, and fails for anyone on a phone in daylight.

How do I convert HEX to RGB or HSL?

The Colour Converter shows all three notations simultaneously with a live swatch, so editing any one of them updates the others.