CSS colour palette generator — harmony colours and 50–900 shades as variables

How to use the CSS colour palette generator

1. Pick a Base colour, for example your brand colour.
2. Choose a Harmony: Complementary, Analogous, Triadic, Split-complementary, Tetradic (rectangle), Square or Monochromatic.
3. Keep Include 50–900 shades for each colour ticked for a full scale, or untick it for one variable per colour.
4. Choose the Value format and a Variable prefix (default color).
5. Look at the swatches, then copy the CSS or download it as palette.css.

What it does and when to use it

A palette built from colour theory gives you accent colours that sit well beside your brand colour, and a shade scale gives you the light backgrounds, borders and dark text versions every interface needs. The output is ready to paste under :root, so your components can use var(--color-1-100) for a pale panel and var(--color-1-700) for a hover state.

For more harmony options and a visual colour wheel, explore the colour harmonies tool. To build a shade ramp from any single colour, use colour shades, and to add other tokens beside the colours, the CSS variables generator.

How it works

Harmonies rotate the hue in HSL. Monochromatic is different: it keeps the hue and saturation and returns five colours at 20%, 35%, 50%, 65% and 80% lightness. With shades on, each harmony colour gets ten steps named 50, 100, 200 … 900, mixed towards white or near-black in OKLab. Variables are named --<prefix>-<colour number> or --<prefix>-<colour number>-<shade>. If you choose oklch(), note that MDN lists it as Baseline widely available since May 2023.

Worked examples

Red and its opposite. Base #ff0000, Complementary, no shades, HEX:

:root {
  --color-1: #ff0000;
  --color-2: #00ffff;
}

Teal neighbours in OKLCH. Base #0d9488, Analogous, prefix brand: --brand-1: oklch(58.38% 0.1575 149.96);, --brand-2: oklch(60.02% 0.1038 184.7); (your base) and --brand-3: oklch(46.23% 0.114 246.39);.

A blue brand with an amber accent. Base #2563eb, Complementary, shades on: 20 variables, from --color-1-50: #edf3ff; to --color-2-900: #47361b;, with the accent’s middle step --color-2-500: #ebad25;.

Limits and tips

• HSL hue steps are not equal to the eye. A rotated colour may look much brighter or duller than the base; adjust its shade choice rather than the hue.
• Monochromatic does not include your exact base colour, only the five fixed lightness steps.
• Shades of very light or very dark bases bunch up, because there is little room left towards white or black.