Color

Seven tools, and between them they cover most of what colour work needs. 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.

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