Color Palette Generator

Build a harmonious color scheme from any base color using color-wheel rules, and export it as CSS variables.

How to use the Color Palette Generator

  1. Choose a base color or press "Random palette".
  2. Select a harmony rule such as analogous, complementary or triadic.
  3. Click a color to copy its HEX code, or copy the whole palette as CSS variables.

Color harmony rules

  • Analogous: colors next to each other on the wheel. Calm and cohesive; good for backgrounds and illustrations.
  • Monochromatic: one hue in several lightness levels. Clean and safe for interfaces.
  • Complementary: two colors opposite each other. High contrast; ideal for a main color and an accent.
  • Split-complementary: a base color plus the two neighbours of its opposite. Strong contrast with less tension.
  • Triadic: three colors evenly spaced around the wheel. Vibrant and balanced.
  • Tetradic: four colors in two complementary pairs. Rich, but works best when one color dominates.

Using a palette well

A common guideline is the 60-30-10 rule: use the dominant color for about 60% of the design, a secondary color for 30% and an accent for 10%. Always check text and background pairs with a contrast checker so the result is readable.

Frequently asked questions

What is a complementary color?

The color directly opposite on the color wheel, 180° away. Blue and orange are a complementary pair.

How many colors should a palette have?

Three to five is usually enough: a dominant color, one or two supporting colors and an accent.

How do I use the palette in CSS?

Copy the CSS variables into your stylesheet and reference them, for example color: var(--color-1).

Related tools