Color Scheme Generator
Generate harmonious color schemes: complementary, triadic, analogous, and split-complementary.
About this calculator
Choose a base colour and a harmony rule and get a matching scheme you can copy straight into your design.
Pairing colours by wheel position is faster and safer than guessing.
How to use it
- Pick the base colour.
- Choose the harmony type.
- Copy the swatches.
Colour harmonies
Colour harmonies are fixed positions on the colour wheel. Complementary: opposite hues (180° apart). Analogous: neighbours (±30°). Triadic: three hues 120° apart. Split-complementary: the base plus the two neighbours of its complement. Tetradic: two complementary pairs. Monochromatic: one hue in several lightness steps.
Worked example
Base hue 210° (blue)
| Complementary | 210° and 30° (blue and orange) |
| Analogous | 180°, 210°, 240° |
| Triadic | 210°, 330°, 90° |
| Split complementary | 210°, 0°, 60° |
Tips and common mistakes
- Use the 60-30-10 rule: 60% neutral, 30% secondary, 10% accent.
- Reduce saturation of large areas.
- Check text contrast.
- Limit your palette to 3 to 5 colours.
- Save tokens as CSS variables.
Frequently asked questions
What is a colour scheme?
A set of colours that work well together.
What is a complementary colour?
The colour opposite on the wheel.
What is the 60-30-10 rule?
A balance: 60% dominant, 30% secondary, 10% accent.
How many colours should a brand use?
Typically 3 to 5.
What is analogous?
Neighbouring colours, calm and harmonious.
Can I get hex codes?
Yes, each swatch shows it.