Color Palette Generator

Build complementary, analogous, triadic, tetradic and monochrome palettes from one base colour.

November 3, 20261 min read

Runs in your browser — your text and files never leave your device.

Base colour

Hex value

Three- or six-digit hex, with or without the #.

Complementary

Analogous

Triadic

Tetradic

Monochromatic

Muted

Copy as CSS variables

/* Complementary */
--color-1: #6366f1;
--color-2: #f1ee63;

/* Analogous */
--color-1: #63adf1;
--color-2: #6389f1;
--color-3: #6366f1;
--color-4: #8463f1;
--color-5: #a763f1;

/* Triadic */
--color-1: #6366f1;
--color-2: #f16366;
--color-3: #66f163;

/* Tetradic */
--color-1: #6366f1;
--color-2: #f163ad;
--color-3: #f1ee63;
--color-4: #63f1a7;

/* Monochromatic */
--color-1: #0b0d75;
--color-2: #1114bb;
--color-3: #2c30ec;
--color-4: #7375f2;
--color-5: #b9baf9;

/* Muted */
--color-1: #8e8fc6;
--color-2: #7f81d5;
--color-3: #6366f1;

Click any swatch to copy its hex value.

Start with a colour you already use and see the harmonies that go with it — then copy a single swatch, or the whole palette as CSS variables.

How to use it

Pick a base colour, or type a hex value.
Read the palettes below it.
Click a swatch to copy its hex code, or copy the whole set as CSS variables.

Good to know

Harmonies are calculated in HSL — rotating the hue and stepping the lightness — which keeps every colour related to the one you chose.
Hex values are copied in uppercase with the #, ready to paste into CSS or a design tool.

Related tools: Gradient Generator · CSS Shadow Generator

Frequently asked questions

What is a complementary palette?

Two colours opposite each other on the colour wheel. The contrast is strong, which suits accents and calls to action.

Can I pick a colour from an image?

Type its hex value into the field. Picking colours out of an image is a separate tool that is not built yet.