Color
Color Palette Generator
Pick one seed colour to see the harmonious palettes built from it, with every colour's code.
What this is
A colour palette generator builds a set of colours that work together from one seed, by rotating the hue around the colour wheel according to harmony rules long used in design. A complementary palette takes two colours opposite each other, analogous takes neighbours, triadic takes three evenly spaced. These rules are not laws, but they give a far better starting point than picking colours one at a time until something feels right.
How it works
Analogous palettes are the safest for an identity, because neighbouring colours do not compete, though they can read flat unless one is clearly set apart. Complementary palettes give the strongest contrast and suit buttons and calls to action, but two opposite colours used in equal measure look noisy.
A useful working rule: let one colour carry most of the surface, one act as the accent, and the rest support in small amounts. Palettes usually fail not because the colours are wrong but because they were used in equal proportions.
Every colour here also shows the safe text colour to place on it, chosen between black and white by contrast ratio. That matters because a colour that looks good in a palette is not necessarily usable as a background for text.
How to use it
- Pick your seed colour Use the picker, or paste the hex code of your brand colour.
- Compare each harmony All five palettes are built at once, so you can judge them side by side.
- Copy the colours you will use Click any colour to copy its hex code.
Common questions
- How many colours should a brand palette have?
- Most identities work with one primary colour, one accent and two or three neutrals. Going beyond that makes consistent application hard, because every addition raises a new question about which colour belongs where.
- What is the difference between complementary and analogous?
- A complementary palette uses two colours opposite each other on the wheel, giving the high contrast that suits drawing attention to one element. An analogous palette uses neighbours, giving a calmer and more unified look — though it needs one distinguishing colour to avoid reading flat.
- Are the generated palettes accessible?
- Not automatically — harmony and contrast are different things, and two colours that suit each other can still have too little contrast for text. Each colour here shows the safe text colour to sit on it, and for a full check use the dedicated contrast checker.
Notes
- The calculation runs in your browser. Nothing is sent to a server.