What is a color harmony?

A color harmony is a set of colors chosen by their position on the color wheel, a classic way to get combinations that look balanced together. Complementary colors sit opposite each other, analogous colors are neighbors, triadic colors are evenly spaced a third of the wheel apart, and split complementary, tetradic and square schemes are variations on those. A monochromatic scheme keeps the same hue and changes only the lightness. This generator rotates the hue of your base color to build each harmony and lets you copy the palette as HEX, RGB or HSL.

Examples

Using a palette in code, and rotating a hue to build one yourself:

CSS

:root {
  --color-primary: #2563eb;
  --color-accent: #ebad25;  /* complementary */
}

Sass

$primary: #2563eb;
$complement: adjust-hue($primary, 180deg);
$triad: adjust-hue($primary, 120deg);

JavaScript

// rotate the hue of an hsl() color
const rotate = ({ h, s, l }, deg) => ({ h: (h + deg + 360) % 360, s, l });
rotate({ h: 221, s: 83, l: 53 }, 180); // { h: 41, ... }

Python

import colorsys

h, l, s = colorsys.rgb_to_hls(37 / 255, 99 / 255, 235 / 255)
complement = colorsys.hls_to_rgb((h + 0.5) % 1, l, s)

Use Cases

Choosing an accent color

Start from your primary brand color and use its complementary or split complementary colors for calls to action and highlights.

Charts with several series

Triadic, tetradic and square palettes give clearly distinct colors for chart series that still feel like they belong together.

Calm, cohesive interfaces

Analogous and monochromatic palettes keep a layout quiet and unified, good for dashboards and reading-heavy pages.

Exploring a starting point

Try every harmony on the same base color to compare moods quickly before committing to a palette in your design tool.

Frequently Asked Questions

Which color wheel does this use?

The RGB wheel that HSL is built on, the same one CSS and screen design tools use. Painters' wheels based on red, yellow and blue (RYB) place complements differently, for example blue opposite orange instead of yellow.

What's the difference between tetradic and square?

Both use four colors made of two complementary pairs. Square spaces them evenly, 90 degrees apart. Tetradic, or rectangle, uses pairs 60 degrees apart, which usually gives one dominant pair and is easier to balance.

Will these colors be accessible together?

Not necessarily. A harmony is about hue, not contrast, and two harmonic colors can have very similar lightness. Check any text and background pair with the Contrast Checker before using it.

How are monochromatic colors chosen?

The hue and saturation stay the same and the lightness moves proportionally toward black and white: two darker and two lighter versions around the base color, so the steps stay visible even for very light or very dark bases.

Is my data sent to a server?

No. Every palette is calculated in your browser with plain JavaScript. Nothing you enter is transmitted or stored.

Color Palette Generator