Color & Design

Color Palette Generator

Start from one color and generate a matching palette using classic color-wheel harmonies, then copy the whole set as CSS variables.

Color & design

Build a palette

Local only

Base colorOr type a valueHarmony

The base color and its opposite on the color wheel.

:root {
  --color-1: #2563eb;
  --color-2: #ebac25;
  --color-3: #7ca1f3;
  --color-4: #1a45a5;
  --color-5: #f2c971;
}

Generated on your device

Palettes are calculated locally from color-wheel maths — no API, no account.

Which harmony should you use?

Complementary: The base color and its opposite on the color wheel.
Analogous: Neighbouring hues that feel calm and cohesive.
Triadic: Three hues spaced evenly for balanced contrast.
Tetradic: Two complementary pairs for rich, varied palettes.
Split complementary: Softer contrast than a straight complementary pair.
Monochromatic: One hue at several lightness levels.

Making a palette usable

Use one color for the main action, one or two as supporting accents and the remaining tones for backgrounds and borders. Always verify text contrast on your chosen background before shipping.

Good to know

Frequently asked questions

How are the palettes calculated?

The base color is converted to HSL and the hue is rotated by fixed angles for each harmony, with extra tints and shades added for balance.

Can I export the palette?

Yes. Copy the HEX list, the RGB list, or a ready-to-paste block of CSS custom properties.

Are these palettes accessible?

Harmony is about aesthetics, not contrast. Run your text and background pair through the contrast checker before using it.

Can I start from a brand color?

Yes — paste your brand HEX as the base and every generated color will relate to it.

Build a palette

Which harmony should you use?

Making a palette usable

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter

RGB to HEX Converter

HEX to HSL Converter

Gradient Generator