Colour Palette Generator
Build a harmonious colour palette from one base colour using five colour theory schemes. Export as CSS variables or Tailwind config.
Build a harmonious palette from one base colour - complementary, analogous, triadic and more.
Palette
:root {
--color-1: #5fecfc;
--color-2: #5f9efc;
--color-3: #6f5ffc;
--color-4: #bd5ffc;
--color-5: #fc5fec;
}About the colour palette generator
Colour harmony schemes come from positions on the colour wheel. Complementary uses opposites for maximum contrast, analogous uses neighbours for a calm scheme, triadic spaces three colours evenly for balanced variety, and monochrome varies only lightness.
Starting from one brand colour and deriving the rest is far more reliable than picking colours individually and hoping they agree.
How to use it
- 1Pick your base colour, usually the brand colour.
- 2Choose a harmony. Analogous is the safest for interfaces.
- 3Set how many colours you need.
- 4Export as CSS variables or a Tailwind config block.
Questions
Which harmony should I use for a website?
Analogous or monochrome for the interface itself, with one complementary colour reserved for calls to action. Full triadic schemes are usually too loud for a UI.
How many colours does an interface need?
Fewer than people expect. One brand colour, one accent, and a neutral scale covers most products. Extra colours are for status states.
Will these colours pass contrast checks?
Not automatically. Harmony and contrast are different things. Run each text and background pair through the contrast checker.