Colour wheel relationships are the traditional starting point for palettes that feel balanced. Enter a base colour and pick a scheme (complementary, split-complementary, analogous, triadic, tetradic or monochromatic) and the tool works out the other colours and shows them as swatches with hex codes.
How to use it
- Enter a base colour.
- Choose a scheme.
- Look at the swatches.
- Copy the hex codes you like.
When it helps
- Choosing colours for a website or logo.
- Finding an accent that suits a brand colour.
- Building a presentation theme.
- Learning colour theory.
Good to know
- Complementary colours sit opposite each other and give strong contrast; analogous ones sit side by side and feel calm.
- Let one colour lead and use the others sparingly as accents.
- Treat the result as a starting point and adjust by eye.
The colour wheel and its rules
Colour harmony rules are based on angles around the hue wheel. Complementary colours are 180 degrees apart. Split-complementary uses the two colours either side of the complement. Analogous colours sit within 30 degrees, triadic ones are 120 degrees apart, and tetradic schemes use four colours.
The tool keeps your colour's saturation and lightness and only rotates the hue, so results feel consistent.
Worked example: a website palette
Start with a blue primary. A complementary scheme gives an orange accent for buttons that must stand out. An analogous scheme gives teal and violet neighbours for backgrounds and illustrations. Pick one scheme and use its colours at different lightness levels, plus neutrals.
The 60-30-10 rule suggests 60 percent a dominant colour, 30 percent a secondary and 10 percent an accent.
Checking contrast
Harmonious colours don't automatically have enough contrast. Check text against backgrounds for a ratio of at least 4.5 to 1. Often you'll need to darken the text colour or lighten the background beyond what the scheme suggests.
Colour schemes are suggestions. Adjust by eye, and test on real screens.
Mood and meaning
Warm colours such as red, orange and yellow feel energetic. Cool ones such as blue and green feel calm. Meanings vary between cultures: white signals purity in some places and mourning in others, and red can mean luck or danger.
Choose colours that fit your audience and purpose, and test with real users.
Combining harmonies with neutrals
A palette with only saturated colours is tiring. Add neutrals: white, black, a few greys, and perhaps a warm off-white. Neutrals carry most of the page, while the harmony colours give emphasis and personality.
Tint the greys slightly towards your main hue for a cohesive feel.
Documenting your palette
Record the hex codes, their role and where each is used, so anyone on the project can follow the plan. A short palette page saves later confusion.
Questions
What's a triadic scheme?
Three colours evenly spaced around the wheel.
Do these rules guarantee a good design?
No, always check contrast and adjust.