Colour Scheme Generator
Complementary, analogous, triadic and monochrome palettes with contrast ratios.
About this tool
Choose a base colour and the tool computes the classic colour-wheel harmonies plus shades and tints. Every swatch shows its hex code and contrast ratio against white and black, with a tick when it passes 4.5:1 for text. Click to copy a colour, or copy the palette as CSS variables.
Choosing a palette that holds up
Colour harmonies are the rules of thumb designers use to get a set of colours that belong together: complementary (opposites, high energy — use one dominant, one accent), analogous (neighbours, calm), triadic (three evenly spaced, lively), split complementary (the safer complementary), tetradic (two pairs, hard to balance) and monochrome (one hue in shades and tints, always safe). The tool computes them in HSL from your base colour, which is honest maths, not taste — the harmony gives you candidates, and you still choose. The contrast ratios are the practical addition: WCAG asks for 4.5:1 between text and background (3:1 for large text), and a palette that ignores this produces unreadable buttons. Extract a starting colour from a photo with the colour palette extractor, convert formats with the colour converter, check the set with the colour-blindness simulator, and build a gradient with the CSS gradient tool.
Frequently asked questions
What is a complementary colour?
The colour opposite on the wheel — 180° away in hue. Blue's complement is orange; they intensify each other, so use one sparingly.
What contrast ratio do I need?
WCAG AA: 4.5:1 for normal text, 3:1 for large text and UI components; AAA: 7:1. The swatches show the ratio against white and black; check your actual pairing with the colour converter.
Why do some schemes look muddy?
Harmonies keep the saturation and lightness of the base; a dull base gives dull companions. Try a more saturated base and adjust lightness with the shades row.
Can I export for Figma or CSS?
Copy the CSS variables block, or click swatches to copy hex codes one at a time.