Color

Not sure which tool?

The converter moves a colour between HEX, RGB, HSL, CMYK and the CSS named colours, which is the everyday job when a brand guide is in one notation and your stylesheet is in another.

The contrast checker is the one that matters for anything anyone else will read. It gives the ratio between a text colour and its background against the WCAG thresholds — 4.5:1 for body text, 3:1 for large text. It is worth checking before a palette is settled rather than after, because a light grey on white that fails at 2.8:1 usually cannot be rescued without changing the design.

Three of them build a set out of a colour you already have. Shades and tints takes one colour and spreads it into a ready-made lightness scale, which is the shape a design-token file usually wants. Mixer blends two colours at an adjustable ratio and gives you the hex of the result. Scheme works round the colour wheel — complementary, triadic, analogous, tetradic — for when the brand colour is fixed and the ones beside it are not.

To build a scheme from a photograph, a screenshot or an existing piece of branding you have no source files for, the image palette among the image tools pulls the dominant colours out of a picture, with each one's share of the image. The random palette is the opposite situation: no starting point at all, and reacting to five colours is easier than facing an empty swatch.