Color Harmony Generator & Palette Calculator

simulator beginner ~7 min
Loading simulation...
Complementary pair — blue (210°) + orange (30°)

A blue base at 210° paired with its complement at 30° (orange) creates the most common and powerful color harmony — used in countless movie posters and brand designs.

Formula

Complementary: H₂ = (H₁ + 180) mod 360
Triadic: H₂ = (H₁ + 120) mod 360, H₃ = (H₁ + 240) mod 360
Split-complementary: H₂ = (H₁ + 180 − offset) mod 360, H₃ = (H₁ + 180 + offset) mod 360

The Science of Beautiful Combinations

Why do some color combinations look stunning while others clash? Color harmony theory, developed over centuries by artists and scientists from Newton to Itten to Munsell, reveals that pleasing combinations follow geometric patterns on the color wheel. Complementary pairs (180° apart) create vibrant contrast. Triadic schemes (120° apart) feel balanced and energetic. Analogous colors (adjacent on the wheel) evoke calm cohesion. These are not arbitrary rules — they reflect the structure of human color perception.

The Color Wheel as a Tool

The modern color wheel arranges hues in a circle, with complementary colors opposite each other. Johannes Itten's 12-part color wheel, published in 1961, became the standard teaching tool. The HSL color model maps naturally to the wheel: hue is the angle (0–360°), saturation is the distance from center, and lightness is the vertical axis. This geometric framework makes harmony rules simple: complementary is a diameter, triadic is an equilateral triangle, tetradic is a rectangle inscribed in the circle.

Harmony Rules in Practice

Each harmony type serves different design goals. Complementary palettes (blue-orange, red-cyan) create maximum impact and are the go-to for call-to-action buttons, movie posters, and sports branding. Analogous palettes (blue, blue-green, green) feel natural and are ideal for nature photography, wellness brands, and backgrounds. Triadic palettes (red, yellow, blue) offer versatility for illustration and children's products. Split-complementary provides the contrast of complementary with more nuance, popular in editorial design.

Beyond Basic Harmony

Modern color science extends classical harmony with perceptual uniformity. The CIELAB color space accounts for the fact that our eyes are not equally sensitive to all hues — a 30° shift in green looks different from a 30° shift in blue. Perceptually uniform color spaces like OKLCH allow designers to create harmonies with truly equal perceptual contrast. Meanwhile, data-driven approaches analyze millions of rated palettes to discover harmony patterns that classical theory misses, revealing cultural and contextual dimensions of color preference.

FAQ

What is color harmony?

Color harmony refers to color combinations that are visually pleasing and balanced. Harmony rules are based on geometric relationships on the color wheel: complementary colors are 180° apart, triadic colors are 120° apart, and analogous colors are adjacent. These relationships produce palettes that feel intentional and coherent rather than random.

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel (180° apart): red-cyan, blue-orange, green-magenta. They create maximum contrast and visual tension. When placed side by side, they make each other appear more vibrant. Most movie posters use blue-orange complementary palettes for this reason.

What is the difference between triadic and split-complementary?

Triadic harmony uses three colors evenly spaced at 120° intervals (e.g., red, blue, yellow). Split-complementary uses a base color and the two colors adjacent to its complement, creating a softer version of complementary contrast. Triadic is bold and balanced; split-complementary retains contrast while being easier to work with.

How do designers choose color palettes?

Professional designers start with a base color (often from brand guidelines or mood), then apply harmony rules to generate candidate palettes. They adjust saturation and lightness for hierarchy — primary actions get high saturation, backgrounds get low saturation. They test for accessibility (contrast ratios), cultural associations, and emotional impact before finalizing.

Sources

Embed

<iframe src="https://homo-deus.com/lab/color-science/color-harmony/embed" width="100%" height="400" frameborder="0"></iframe>
View source on GitHub