Tool — free, no account
Pick a base colour, choose a harmony, and get a palette you can defend — with contrast checked on every swatch and a ramp ready for a design system.
Drag any handle — the rest follow. Arrow keys nudge a focused handle; hold shift for ten degrees.
Harmony
The contrast of a complement without the shouting. A safe default for a brand palette.
Wheel
The additive wheel your screen actually mixes in. Red sits opposite cyan.
Palette
Vermilion
Emerald
Blue
CMYK here is an unmanaged conversion — the same arithmetic a browser does. Treat it as a starting point and let your print profile have the final say.
01Tints and shades
Eleven stops built from swatch 01, numbered the way a design system expects. The marked stop is the colour itself.
02Contrast
Every pairing in the palette, measured against WCAG 2.2. Decide what can hold type before anything gets laid out.
| Background | 01 | 02 | 03 | W | B |
|---|---|---|---|---|---|
| 01 | — | 1.9 | 1.4 | 4.2 | 5.0 |
| 02 | 1.9 | — | 2.7 | 2.1 | 9.8 |
| 03 | 1.4 | 2.7 | — | 5.8 | 3.6 |
| W | 4.2 | 2.1 | 5.8 | — | 21.0 |
| B | 5.0 | 9.8 | 3.6 | 21.0 | — |
03In context
Roles assigned automatically — lightest as surface, darkest as ink, most saturated as accent — so the palette has to prove itself somewhere real.
Case study
Body copy at a real size, on the lightest colour in the set, in the darkest. If this is uncomfortable to read here, it will be uncomfortable everywhere.
Poster
Colour that holds at three metres.
No colour in this palette clears 4.5:1 against its own lightest member, so the body text above falls back to black. That is a real finding, not a rendering quirk — a palette of five mid-tones needs a darker value adding before it can carry type.
04Export
Copy it into a stylesheet or take the swatch sheet into Figma. Nothing here is uploaded — the palette never leaves your browser.
:root {
--color-vermilion: #c65d3b;
--color-emerald: #3bc6a3;
--color-blue: #3b5fc6;
}A harmony is a rule for where a palette's hues sit relative to each other. None of them is more correct than another — they differ in how much tension they create, and tension is a decision, not a default.
It maps hue as a circle, so the distance between two colours becomes something you can measure. Harmonies — complementary, analogous, triadic and the rest — are just fixed distances around that circle, which is what makes a palette reproducible rather than a lucky guess.
Split complementary is the usual answer. It gives you a dominant hue plus two accents that contrast with it without the vibration a straight complementary pair produces at full saturation, and it leaves room for a neutral. Monochromatic is safer and less distinctive; tetradic is richer and much harder to balance.
Because there are two wheels. The RYB wheel is the subtractive one taught in art schools and mixed in ink, where red sits opposite green. The RGB wheel is the additive one your screen emits, where red sits opposite cyan. This tool offers both — pick the one that matches the medium the work ships in.
Not automatically. Harmony is about hue; legibility is about lightness. Two perfectly complementary colours at the same lightness have almost no contrast at all. Every swatch here shows its ratio against black and white, and the contrast grid checks every pairing against WCAG 2.2, so the failures are visible while you're still choosing.
No. Everything runs in your browser, and the palette lives in the page's address — copying the link is what saves it. There is no account, no upload and nothing to delete.
Brand work, campaign or marketing assets — let’s talk.