Create · Color relationships

Color Harmony Explorer

Start with one color, move around the hue wheel, and compare six classic hue relationships. Every palette is calculated from the current base color and can be copied, saved locally, or opened in the Palette Generator.

Harmony is a starting point.Even mathematically related hues still need contrast, hierarchy, proportion, and context to become a useful design.

Base color

Choose a hue and tune the color

Click or drag around the hue ring. Arrow keys move 1°, Shift + Arrow moves 10°.

Base HEX

Hue217°

Saturation100%

Lightness61%

Harmony

Compare the relationship

Open in Generator

How harmonies are derived

Hue offsets create the relationship

Color harmonies are geometric relationships around the hue circle. Complementary colors sit 180° apart. Analogous colors stay close together. Triadic colors use 120° spacing. This tool keeps the current saturation and lightness for hue-based harmonies so you can see the relationship without unrelated value changes.

Tetradic mode uses a rectangular four-color relationship at 0°, 60°, 180°, and 240° from the base hue. Split-complementary uses 150° and 210° instead of the direct complement. Monochromatic mode keeps one hue and varies lightness.

Practical use

Treat the palette as roles, not equal slices

A complementary pair can create strong emphasis when one color dominates and the other is reserved for accents. Analogous palettes often feel cohesive for illustrations and branded surfaces. Triadic or tetradic palettes can support richer systems, but usually work better when one hue leads and the others have narrower jobs.

After choosing a relationship, move the palette into the Generator or Palette Visualizer and decide which colors should be background, surface, text, primary action, and accent.

Why harmony is not enough

Mathematics cannot choose hierarchy for you

Colors can be perfectly spaced on a hue wheel and still make poor interface choices. Equal saturation everywhere can feel noisy. Similar lightness can make controls difficult to distinguish. A beautiful accent may fail as text. Harmony describes hue relationships; it does not guarantee readability, accessibility, brand fit, or visual balance.

Check likely foreground/background pairs before shipping. Do not rely on hue difference alone to communicate state, error, selection, or meaning.

Six modes

Choose the relationship for the job

Complementary: Two hues 180° apart for strong contrast and accent relationships.
Analogous: Three neighboring hues at −30°, 0°, and +30° for cohesive color families.
Triadic: Three hues spaced by 120° for balanced variety.
Tetradic: Two complementary pairs forming a 60°/120° rectangle around the wheel.
Split-complementary: The base plus hues 150° and 210° away for contrast with less direct opposition.
Monochromatic: One hue and saturation with five lightness levels for restrained systems.