A colour-system workbench. Feed in your brand colours, and it builds an accessible palette, stress-tests every pairing against WCAG 2 and APCA, and shows you how they combine — contrasts, gradients, and how they hold up for colour-blind viewers.
Up to twelve. The first (lead) colour sets the neutral tint; drag the grip on a bar to reorder. Click a bar to copy its colour, or use the chips to copy it as HEX, RGB, HSL or OKLCH; the pencil opens the picker. Each bar also shows how the colour rates as text on light and on dark. Adding a colour picks the hue furthest from every colour already chosen; any that can't hold an accessible pairing gets a suggestion below. The derived system follows underneath.
CVD affects ~1 in 12 men and 1 in 200 women (GOV.UK). Each band above simulates the core colours under a different type of colour blindness — anything you signal with colour needs a second cue (a label, an icon, a lightness shift), never hue alone.
Your core colours on their own give a limited set of accessible pairings. I can derive a supporting palette from your brand — hue-tinted neutrals, soft pastels and deep shades — chosen to maximise the number of high-scoring contrast combinations you can safely use. Prefer to keep things tight? Skip it and work with your core colours alone.
The colours derived from your brand — hue-tinted neutrals plus a soft pastel and a deep shade for each — as one palette, in the same bars as your brand input. Click any bar to copy its hex.
You've switched the generated palette off — the contrast diagrams and gradient combinations are using your core colours only. Flip “Use in results” back to Include to bring them back.
Every colour pair that meets 3:1 or better, shown as a contrast diagram — the two colours side by side with a split circle so you see each one sitting on the other at a glance. The number is the WCAG contrast ratio, drawn in the opposing colour. Hover to reveal the hexes; click either half to copy it. Pairs are grouped by legibility below — the top AAA tier is open by default; expand AA and large-text (18+) as needed.
Every two-colour gradient your palette can make, woven into one field of mixtures. By default it shows the combinations of your core colours; set the Generated palette to “Include” in section 02 to fold the generated colours in too, and the field subdivides to fit. Hover a band for its endpoints; click to copy its CSS.