Picking colours feels like magic until you learn the handful of rules underneath. Then it feels like maths, which is much less stressful.

Start with one colour

Choose a single accent that carries your brand's personality. Everything else — backgrounds, text, borders — can be derived from neutrals. A restrained palette reads as intentional.

Contrast is non-negotiable

Aim for a contrast ratio of at least 4.5:1 between text and its background. This isn't just accessibility box-ticking; high contrast simply looks crisper.

Let the tools help

Modern CSS has color-mix(), which lets you generate tints and shades from your base colours without leaving the stylesheet. One source of truth, infinite variations.

Constraints make colour choices easier, not harder.