Color Palette Generator
The Color Palette Generator builds a 5-color palette from any base color using color-theory harmonies — complementary, triadic, analogous, split-complementary, tetradic or monochromatic — and exports it as CSS custom properties.
About this tool
The Color Palette Generator builds a 5-color palette from any base color using color-theory harmonies — complementary, triadic, analogous, split-complementary, tetradic or monochromatic — and exports it as CSS custom properties.
How to use it
- Pick a base color with the color picker.
- Choose a harmony type, such as complementary or triadic.
- Review the five generated swatches.
- Click Copy as CSS Variables to paste the palette into your stylesheet.
Good to know
- Complementary colors sit 180° apart on the color wheel; triadic colors are spaced 120° apart.
- Analogous palettes use neighbouring hues (about 30° apart) and tend to feel calm and cohesive.
- Split-complementary pairs a base hue with the two hues on either side of its complement (±30°), giving contrast with less tension.
- Monochromatic palettes keep one hue and vary only saturation and lightness.
- The generator works in HSL, which rotates hue without changing a color’s lightness.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What is a complementary color palette?
A complementary palette pairs a hue with the one directly opposite it on the color wheel (180° away), such as blue and orange. It gives the strongest contrast of any harmony.
How many colors should a website palette have?
Most interfaces use one primary color, one or two accents and a set of neutrals. A five-color harmony is a good starting point that you can trim or extend with tints and shades.
What is the difference between triadic and tetradic?
Triadic uses three hues evenly spaced 120° apart. Tetradic uses four hues spaced 90° apart, forming a square on the wheel, which is richer but harder to balance.
Can I use the palette in CSS or Tailwind?
Yes. Copy the palette as CSS custom properties and reference them with var(), or paste the hex values into your Tailwind theme colors.