Design
Color Palette Generator
Generate harmonious palettes from a base colour and export CSS tokens.
Runs entirely in your browser. Nothing is uploaded.
How to use
- Pick a base colour with the picker or by hex.
- Choose a harmony, such as complementary, analogous or triadic.
- Read the generated palette and tweak the base to taste.
- Copy a single hex, or export the whole palette as CSS tokens.
Examples
- An analogous set from a teal base gives a calm, cohesive look for a brand or a grade reference.
- A complementary pair points you at a strong accent colour against your main hue.
- Exporting CSS variables drops the palette straight into a site or a motion-graphics template.
Frequently asked questions
What is a colour harmony?
It is a rule for picking colours that work together based on their position on the colour wheel. Complementary uses opposites, analogous uses neighbours, and triadic uses three evenly spaced hues.
How do I export to CSS?
The tool outputs the palette as CSS custom properties (variables) you can paste into a stylesheet, so each colour has a named token rather than a loose hex.
Is any of this uploaded?
No. The palette is generated in your browser and nothing is uploaded.
