Complementary vs Analogous vs Triadic: Color Harmony Basics

Most palette tools use the same six words: complementary, analogous, triadic, split-complementary, tetradic, monochromatic. They’re not decoration: each one names a fixed relationship on the color wheel, and each sets up a different amount of tension. This guide covers what each one does in a design and where it breaks, checked against the 104 hand-picked palettes on our Color Palettes by Theme page. The short version: finished palettes lean on one or two hue families plus neutrals far more than textbook diagrams suggest.

One wheel, six recipes

Every harmony scheme is a hue relationship. Hue is the H in HSL, an angle from 0 to 360° around the wheel. Opposite hues, 180° apart, are complementary; neighbors about 30° apart are analogous; three hues 120° apart form a triad. The schemes differ only in how far apart their hues sit: small gaps read as calm, large gaps as energetic.

The arithmetic belongs in a tool. The Color Harmony Generator builds all six schemes from any base color, and the page lists the exact angle rule for each. This article covers the design side, and why the raw output rarely ships unchanged.

What 104 finished palettes actually use

To see how often the textbook shapes appear in finished work, we measured the 520 colors in the themes collection: 104 five-color palettes, from Christmas and Bauhaus to Matcha Latte. Three patterns stand out.

• Neutrals are part of the scheme. 156 of the 520 colors are near-neutral (creams, charcoals, grays, inks), and 83 of the 104 palettes include at least one. Harmony diagrams leave them out; finished palettes rarely do.
• Close hues dominate. Of the 533 pairs of colored swatches that share a palette, 26% sit within 15° of each other, where random hues would land only 8% of the time. And 32 of the 97 palettes with two or more colored swatches keep all of them within 60°, something random hues manage 7% of the time.
• Most wide gaps are rarer than chance. The 90° step of the square tetradic scheme falls furthest below chance (9% against 17%); near-exact complements sit close to chance (7% against 8%).

Matching each palette against the six shapes, with 15° of slack per hue, gives the same picture: 21 palettes stay within one hue family, 17 are analogous, 8 complementary, 6 split-complementary, 2 triadic, and none tetradic. Four have no colored swatch at all. The other 46, nearly half the collection, fit none of the six.

Christmas is typical of that last group. Its cranberry red sits at 354° and its pine greens at 136° and 144°, about 150° away rather than a true complement, and the gold ribbon at 39° falls between every textbook slot. The palette works because each color has an obvious job, not because it lands on a diagram.

How we measured

We converted every color with the same formulas our tools use. A color with OKLCH chroma below 0.04 counts as neutral, since its hue angle carries almost no visible information, which leaves 364 colored swatches. Hue is the HSL angle, the same wheel the generator rotates. A palette fits a scheme when some rotation of that scheme puts every colored swatch within 15° of one of its points and uses every point; simpler schemes are tested first. Random figures come from uniformly random hues with the same number of colored swatches per palette. Near-complementary means 165–180° apart; blue is HSL 195–245° and warm 15–60°. With 10° or 20° of slack, 44 or 62 palettes fit one of the six (54 at 15°), and measuring hue in OKLCH instead gives 52; one hue family and analogous lead in every version. This is one curated collection, not a census of design.

Complementary (180°) — maximum tension

Opposite hues produce the strongest hue contrast a pair can have, which is why complementary pairs are a staple of sports branding and movie posters (the infamous teal-and-orange). They also make the boldest ink pairs for a duotone effect. Many of the best-known pairs are also warm/cool splits, such as teal against orange or indigo against gold, so color temperature is doing as much of the work as the hue angle.

In the collection, 28 palettes contain a near-complementary pair, 39 pairs in all, and 26 of the 39 are a blue against an orange, gold, or brown, like the navy and brass of Law Firm. The two sides are rarely equals. In 31 of the 39 pairs the warmer member is the lighter one, partly because yellows are lighter than blues at equal saturation. The median lightness gap is 0.27 on the OKLCH scale (0 is black, 1 is white), and the weaker color keeps about 70% of the stronger one’s chroma. Raw generator pairs built from the same colors differ in lightness by only 0.10, and the weaker side keeps about 87%.

Where it fails: an even split at equal lightness. When we fed each of the 364 colored swatches into the generator, only 2 of the resulting complementary pairs reached 4.5:1 against each other. Darken the cool side and lighten the warm one, as 31 of the 39 measured pairs already do, then let the deep cool color take the large surfaces and keep the light warm color small.

Analogous (±30°) — calm and cohesive

Neighboring hues share an undertone, so they can fill a layout at similar strength without competing, which suits calm, editorial, and nature-led design. Together with single-hue palettes, they form the largest group in the collection that fits a textbook shape: 38 of the 104. Deep Ocean spreads five blues across just 50°.

Don’t count on a photo to hand you an analogous scheme, though. In our eight home-page photos, only Sea Foam stays inside one hue family. Five contain a near-complementary pair, and four of those set a blue against a warm brown, orange, or gold; in three of them, the blue is the sky. Eight photos is a small sample, so read this as a caution rather than a rule. If you start from an image in the Palette Extractor, expect to prune.

Where it fails: built-in contrast. From the same 364 base colors, the generator’s analogous trio never produced a pair that reaches 4.5:1. Finished palettes fix this with lightness rather than hue: Deep Ocean runs from near-black navy #03045E to pale #CAF0F8, a 14.65:1 spread. You’ll usually still want a neutral or a small opposing accent so buttons and links have somewhere to live.

Triadic (±120°) — vivid but balanced

Three hues spaced evenly around the wheel. Triadic schemes are lively without being chaotic, since the spacing guarantees variety while keeping the tension symmetric. Think children’s brands, games, illustration systems.

Strict triads are rare in finished work: 2 of the 104 palettes. Mardi Gras is the clearer one, its traditional purple, green, and gold landing at 277°, 148°, and 45°. The painter’s triad does not survive the trip to a screen wheel. Our Bauhaus palette uses the classic red, yellow, and blue, which sit at 3°, 45°, and 212° on the HSL wheel, closer to a split-complementary shape than to three equal gaps. Red, yellow, and blue are the primaries of the traditional painter’s (RYB) wheel; screen tools use a wheel built on red, green, and blue light, where red’s evenly spaced partners are green and blue.

Where it fails: at full saturation a triad looks like a carnival, and fully softened it can’t carry text. Fairycore, the collection’s other triad, is all pastels: no two of its five colors reach more than 1.67:1. Mardi Gras takes the middle path. It adds a much darker purple, #3D1B57, which reaches 12.04:1 on the palette’s cream, so the vivid three can stay accents. To build that range for your own triad, expand each hue into light and dark steps with the Shades & Tints Generator.

The other three

• Split-complementary (150° and 210°). Instead of the exact opposite, take the two hues flanking it. Six palettes fit this shape, among them Law Firm and Real Estate, where a burgundy supplies the third point, and Bauhaus. Per degree of wheel, the 150° step is about as common as the exact complement, so a split-complementary shape is no rarer than a true complement. It’s the easiest way to get complementary energy with room to balance it.
• Tetradic (two complementary pairs). Four hues, maximum variety, hardest to control. Not one of the 104 palettes fits the square version. If you use it, keep a strict hierarchy: one dominant, three supporting.
• Monochromatic (one hue, many lightnesses). Technically the absence of a hue scheme, and the most reliable look in interface design. 21 palettes stay within one hue family, 8 of them in Food & Drink; Honey & Oat spans just 9°.

Which scheme for which job

The categories show the same pattern. Food & Drink palettes have a median hue span of 21° and not one near-complementary pair; Nature & Places sits at 52° (palettes with two or more colored swatches). In Professions & Industries, 9 of the 14 palettes contain a near-complementary pair, 6 of them a blue against gold, orange, or brown.

• Product UI, dashboards, docs: one hue family plus neutrals, the most common fit in the collection, with a single contrasting hue for interactive states.
• Marketing pages, posters, packaging: complementary or split-complementary, where the tension is the point.
• Professional services and finance: a deep blue for structure and one warm gold, brass, or orange accent.
• Illustration, games, kids’ brands: triadic, with two of the three muted.
• Editorial, photography-led sites: colors sampled from the imagery, narrowed to one or two hue families for the interface.

A worked palette from relationship to roles

Suppose a project starts with an indigo and needs to feel energetic without looking juvenile. A full triad’s red and green would compete with it, so split-complementary is the safer choice: indigo as the brand anchor, a softened orange and a yellow-green as its partners. Then assign jobs before touching individual HEX values. A very light indigo tint covers the page, a deep indigo carries headings and navigation, the original indigo marks links and selected controls, the muted orange labels categories, and the clearer yellow-green is reserved for the one action that genuinely needs emphasis.

Test the result in a rough component, not as isolated swatches. If the button disappears, increase its lightness difference from the surface before rotating to a new hue; if every small label shouts, reduce chroma. Many apparent harmony failures are actually role failures. You are also allowed to discard a partner that has no job: 44 of the 104 theme palettes spend two or more of their five slots on neutrals instead.

Proportion is the real secret

A hue relationship fixes which colors belong together, not how much of each appears. Even the theme palettes show their five colors at equal width, so area is a separate decision. The 60-30-10 rule is one way to make it. Applied to Hanukkah, the pale neutrals would take the largest share, the deep blue the middle share, and the gold the smallest. The full role-assignment method is in How to Choose a Color Palette from a Photo, and it applies to wheel-generated schemes the same way.

The percentages are a planning model, not a pixel count. Repetition changes proportion too: one orange button is an accent, but the same button in every card becomes a field of color. View the page as a thumbnail, and if the accent dominates from a distance, reduce its area before changing the scheme.

How to adjust a harmony without breaking it

Real palettes rarely use the raw wheel output unchanged. Treat the fixed angles as a scaffold and make adjustments in this order:

1. Correct lightness first. Make each swatch light or dark enough for the surface it has to work on. A readable label matters more than identical lightness across the scheme.
2. Reduce chroma where area grows. A vivid color that suits a small icon can be unbearable across a large panel.
3. Nudge hue only when the context demands it. Brand colors, photographs, print limits, and nearby neutrals can make an exact partner feel slightly wrong. A small rotation does not erase the relationship.
4. Check colors in pairs and in the complete set. A secondary hue can look excellent beside the base yet clash once the accent appears.
5. Remove ambiguous colors. Two close blues with no distinct roles create hesitation. Keep the one that does its job better.

The theme palettes show how far these edits usually go. Their median lightness range is 0.55 on the OKLCH scale (0.33 counting only colored swatches), while raw generator output from the same 364 colors spans only 0.09 to 0.15, depending on the scheme. A five-color palette has more room to spread than a two-color pair, but even the four-color tetradic output stays at 0.14. And 83 of the 104 palettes contain at least one pair at 4.5:1 or better.

Cases where the wheel is not the main constraint

Some palettes begin with requirements that outrank geometry: chart categories that must stay distinguishable, status colors that cannot rely on hue alone, a limited ink set, a product photographed under warm light. Start with the functional constraint, then use harmony to make the valid options feel related. Neutrals need the same care: a cool gray reinforces an indigo scheme, and a warm cream softens a blue-and-orange complement.

Harmony is not accessibility

A scheme can be beautiful and unreadable at the same time. Reading contrast depends on luminance, and a hue rotation holds HSL lightness fixed without holding luminance fixed. Red and green are the classic trap. They feel like opposites, but on the HSL wheel they are a triadic step apart (120°), and at equal HSL lightness the triad’s red #D65B5B and green #5BD65B measure 2.04:1 against each other, well under the 4.5:1 that WCAG AA asks of normal-size text. Before shipping, put your actual text-on-background pairs through the Contrast Checker; WCAG Contrast Ratios Explained covers what to aim for. Remember, too, that red-green pairs collapse for the roughly 1 in 12 men of Northern European ancestry who have red-green color vision deficiency.

Color should not be the only carrier of meaning. Pair an error hue with an icon and clear label; pair a selected data series with a line style, marker, or direct annotation. Harmony makes the presentation feel intentional, but it cannot make two equally light colors readable. Accessibility checks happen after role assignment, with the exact foregrounds, backgrounds, states, and text sizes that will ship.

Treat the wheel as a starting point, not a verdict: pick the relationship that matches the mood, add the neutrals, separate the lightness, mute what needs muting, weight it 60-30-10, and verify the text still reads.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.