Home / CSS & color / Colour Palette Generator
Colour Palette Generator
Pick one colour you like and let the harmony rules find the rest. Each scheme moves the hue by a fixed angle on the colour wheel, which is how designers build palettes that hold together instead of fighting.
How to use it
- Choose your base colour with the picker.
- Select a harmony: analogous, complementary, triadic or monochrome.
- Read the five hex codes under the swatches.
Examples
- Analogous from a warm yellow gives a calm palette that stays in one region of the wheel.
- Complementary pairs the base with its opposite for maximum contrast in a call to action.
- Monochrome gives five lightness steps of one hue, ideal for interface backgrounds.
Questions people ask
Which harmony should I choose?
Analogous for calm, cohesive designs. Complementary when something must stand out, used sparingly as an accent. Triadic for playful, energetic work. Monochrome when the content should lead and the colour should stay quiet.
How do I use five colours well?
Follow roughly 60-30-10: one dominant colour, one secondary, and a small accent, with the remaining tones reserved for text and surfaces. Palettes fail more often from equal use than from bad colour choices.
Related tools
Updated: 2026-08-07