Color Harmony

Generate color harmonies: complementary, analogous, triadic, split-complementary, tetradic, and monochromatic

Base colour

Harmonies are computed in OKLCH, so every colour keeps the same perceived lightness and chroma. Click any swatch to make it the base.

Complementary

Opposite hues — maximum contrast.

Split complementary

Base plus the two neighbours of its complement.

Analogous

Neighbouring hues — calm and cohesive.

Triadic

Three evenly spaced hues — vibrant but balanced.

Tetradic (square)

Four evenly spaced hues — rich, needs a dominant colour.

Rectangle

Two complementary pairs.

Monochromatic

One hue, varied lightness.

Export

/* Complementary */
--complementary-1: #0d9488;
--complementary-2: #b46478;

/* Split complementary */
--split-1: #0d9488;
--split-2: #a66899;
--split-3: #b56855;

/* Analogous */
--analogous-1: #479264;
--analogous-2: #0d9488;
--analogous-3: #0c8fa7;

/* Triadic */
--triadic-1: #0d9488;
--triadic-2: #8e70b2;
--triadic-3: #ab7237;

/* Tetradic (square) */
--tetradic-1: #0d9488;
--tetradic-2: #6e7bbe;
--tetradic-3: #b46478;
--tetradic-4: #947f2c;

/* Rectangle */
--rectangle-1: #0d9488;
--rectangle-2: #4586ba;
--rectangle-3: #b46478;
--rectangle-4: #ab7237;

/* Monochromatic */
--mono-1: #cbede7;
--mono-2: #65d4c6;
--mono-3: #38ada0;
--mono-4: #0d9488;
--mono-5: #005d53;
--mono-6: #003932;

All Color Tools

Search EverydayTab

Related tools