Colour Harmony Generator

Generate beautiful colour palettes using colour theory. Complementary, analogous, triadic, and more.

Base Colour

H: 239 S: 84% L: 67%

rgb(99, 102, 241)

Complementary

Two colours opposite each other on the colour wheel. High contrast and vibrant.

Analogous

Three colours next to each other on the wheel. Harmonious and pleasing.

Triadic

Three colours equally spaced around the wheel. Balanced and vibrant.

Split-Complementary

A colour plus two adjacent to its complement. Less tension than complementary.

Tetradic (Rectangle)

Four colours forming a rectangle on the wheel. Rich and complex.

Square

Four colours equally spaced. Balanced with maximum variety.

Monochromatic

Shades, tints and tones of a single colour. Clean and elegant.

Shades

A full range of 10 shades from dark to light, based on your colour.

CSS Variables

:root {
  --color-primary: #6366f1;
  --color-complement: #f2ef64;
  --color-light: #c2c3fa;
  --color-dark: #1317dd;
  --color-accent: #a864f2;
}

The Colour Harmony Generator builds a coordinated set of colours from a single base colour using the rules of colour theory. You pick or enter a starting colour, choose a harmony type, and the tool calculates the matching colours by rotating positions around the colour wheel. The result is a small palette you can read off as hex codes and drop straight into a design.

How to use it

Set your base colour, either with the colour picker or by entering a hex value such as #3B82F6.
Choose a harmony type: complementary, analogous, triadic, or split-complementary.
Read the generated colours from the swatches the tool produces.
Copy the hex code under any swatch to use it in your CSS, design file, or style guide.
Adjust the base colour and switch harmony types to compare options until the palette feels balanced.

How colour harmony works

Colour harmony treats the colour wheel as a circle of 360 degrees, where each hue sits at a fixed angle. A harmony is simply a recipe for which angles to combine, and the tool rotates around that wheel from your base hue to find them.

Complementary takes the colour directly opposite, 180 degrees away, for maximum contrast.
Analogous takes colours sitting beside the base, roughly 30 degrees to each side, for a calm, related feel.
Triadic takes two colours evenly spaced 120 degrees apart, giving a balanced, vivid trio.
Split-complementary takes the two colours either side of the complement, softening the clash while keeping contrast.

Because only the hue is rotated, the colours share a consistent relationship, which is what makes them sit together rather than fight.

FAQ

Which harmony should I pick?

Use complementary when you want a strong accent against a dominant colour, analogous for backgrounds and gentle gradients, triadic for playful or illustrative work, and split-complementary when you want contrast without it feeling harsh. Trying each against the same base is the quickest way to decide.

What is a base colour?

The base is the one colour you start from; every other colour in the palette is calculated relative to it. It is usually your brand colour or the dominant hue of a design. Change it and the whole palette shifts to stay in harmony.

Do I need to understand the colour wheel to use it?

No. The tool handles the angle maths for you, so you only choose a colour and a harmony name. Knowing the wheel just helps you predict why a result looks the way it does.

How do I apply the palette?

Copy the hex codes and assign roles: typically one dominant colour, one or two supporting tones, and an accent for buttons or links. Keeping one colour dominant and using the others sparingly usually reads better than splitting them evenly.