Color Palette Generator
Create harmonious colour palettes from one colour.
Use the Color Palette Generator tool
What this color palette generator does
Color Palette Generator builds a five-colour palette from a base colour. Each scheme applies a standard hue relationship: neighbouring hues for analogous, opposite hues for complementary, evenly spaced hues for triadic, and variations in lightness for monochrome.
Harmony rules are a starting point, not a guarantee of good design. Check contrast for any text you place on these colours, and adjust saturation and lightness by eye.
Why use it
- Get unstuck when choosing secondary and accent colours.
- Create a consistent set of CSS custom properties.
- Explore several harmonies from the same brand colour.
How to use it
- 1Choose a base colour.
- 2Select a harmony scheme and generate the palette.
- 3Copy individual hex values or the CSS variable block.
- 4Check text contrast for any colour used behind text.
Worked examples
Complementary
Input
Base #2f6fed
Output
Blues around the base plus a warm orange opposite hue.
Monochrome
Input
Base #2f6fed
Output
Five blues at different lightness levels for backgrounds, borders and text.
Common mistakes
- Using every palette colour at full saturation in one interface.
- Skipping contrast checks because the palette looks harmonious.
- Assuming a generated palette is accessible or brand-approved.
Frequently asked questions
How many colours are in a palette?
Five: the base colour and four related colours.
Can I lock colours and regenerate?
The generator starts from the base colour each time. Copy the values you want to keep before changing the base.
Does it check contrast?
Not directly. Copy a colour into the Color Picker tool to see its contrast against white and black.
Are the colours random?
The base colour can be randomised, but the other four follow deterministic hue and lightness rules.