Core Color Schemes (1): Complementary and Analogous Colors

In the previous article, we broke the color wheel down into three layers: primary, secondary, and tertiary colors. You now know where colors sit on the wheel. But position alone does not tell you how to combine them — any two colors placed together form some kind of pairing. The real question is what effect you want that pairing to produce.

The color wheel's answer is distance: the farther apart two hues are, the stronger the contrast and the greater the visual impact; the closer they are, the more unified and quieter the result. Every classic color scheme is a variation on this rule. This article covers the two ends of that distance spectrum: complementary colors (180° apart) and analogous colors (30°–60° apart).

First, Check Which Color Wheel You Are Using

Before calculating any angle, there is one trap to avoid: the same complementary pair is not the same pair of colors on the RYB wheel and the RGB wheel.

If you work on the web or in interfaces, always calculate on the RGB/HSL wheel — that is hue + 180°. Applying RYB intuition to screen colors gives you a pair that looks complementary but is not. Every calculation below uses HSL.

Complementary Colors: Maximum Contrast at 180°

How to calculate

In HSL, a complementary color changes only the hue. Saturation and lightness stay the same:

For example, #2563EB converts to hsl(221, 83%, 53%), so its complement is hsl(41, 83%, 53%), which renders as amber (about #EBAC24). Pairings like blue and orange were not invented by designers guessing — they are calculated from the wheel.

Why complementary colors feel harsh

Complementary colors intensify each other. Placed side by side, simultaneous contrast makes each look more saturated than it does alone, and the boundary produces slight visual vibration. It gets worst when three conditions hold at once:

• Both are highly saturated (S above 80%)
• Their lightness is close (L differs by less than 10%)
• The areas are comparable and large (roughly half and half)

This is why pure red with pure green is hard to use: their lightness values are nearly identical, so neither one yields.

Fix 1: Control the area

Let one color dominate. The common ratio is 60-30-10 (dominant 60%, secondary 30%, accent 10%). For emphasis you can push further — 90% dominant, with the complement at 10% on buttons, tags, and key numbers. Complementary colors work best as accents.

Fix 2: Separate the lightness

Push one darker and the other lighter. Once the lightness gap exceeds 30%, the colors stop fighting even though their hues are opposed. This is why a dark background with a bright accent almost never fails.

Fix 3: Reduce saturation

Drop one color's S to 30%–50%, or replace it with a tertiary color — swap pure green #00FF00 for blue-green or yellow-green, for instance. The conflict comes mostly from saturation, not from the hue itself.

Fix 4: Separate them with a neutral

Put white, light gray, beige, or dark gray between the two complements. A neutral breaks the direct adjacency and the simultaneous contrast effect disappears. The most common interface version of this: light gray background, blue dominant, orange button.

Palettes you can use directly

Scheme A: Deep blue × amber (admin systems, B2B products)

Deep blue carries the background and large areas; amber appears only on the primary button and key hints.

Scheme B: Teal × coral (health and lifestyle apps)

Teal is darkened to serve as the dominant color, coral is accent only, and light pink backgrounds keep large areas from becoming highly saturated.

When to use complementary colors

Analogous Colors: Minimum Conflict at 30°–60°

How to calculate

Analogous colors take the neighbors on either side of the dominant hue:

For example, #0EA5E9 is hsl(199, 89%, 48%); ±30° gives hsl(169, 89%, 48%) (teal-green) and hsl(229, 89%, 48%) (blue). Together they form a typical analogous scheme.

The smaller the gap, the more unified the result; the larger the gap, the more variation. Keep the total span of three hues within 60° and the result rarely gets out of hand. Past 90° you are close to a triadic scheme, which needs the rules in the next article.

Strengths and traps

The strength is straightforward: it is hard to get wrong. Close hues are harmonious by nature and resist harshness however you tune them, which suits fast turnarounds.

The trap is equally clear: the result easily blurs into one mass. When three hues are close and their saturation and lightness are close as well, the image loses hierarchy — it looks colorful, but you cannot tell where the emphasis is. Large areas also tend to feel stuffy, with no room to breathe.

Fix 1: Build hierarchy with lightness, not hue

Separate adjacent steps by at least 20% in lightness. Within a single blue family, hsl(210, 70%, 25%), hsl(205, 75%, 50%), and hsl(200, 80%, 80%) produce hierarchy immediately. This is the most effective move for analogous schemes.

Fix 2: Establish dominance

Distribute 70-20-10. Giving three hues equal weight is the fastest route to blandness; hierarchy creates rhythm.

Fix 3: Bring in a neutral

White, light gray, or dark gray for the background and whitespace. Neutrals do not participate in the color relationship, but they make the colored parts read as clean and give the eye somewhere to rest.

Fix 4: Add a small complementary accent

Put one complementary color into the analogous scheme, kept under 10% of the area. That small amount of contrast pulls out the emphasis without breaking the overall unity. It is the most common way to rescue a flat analogous palette.

Palettes you can use directly

Scheme A: Blue → cyan → green (tech and utility products)

Scheme B: Violet → magenta → pink (creative and social products)

Choosing Between the Two

Common Mistakes

• Splitting complementary colors evenly: half and half is the worst distribution. Use 90-10.
• Two complements both highly saturated at the same lightness: break at least one of those conditions.
• Using pure #FF0000 with pure #00FF00: switch to desaturated versions or tertiary colors.
• Three analogous colors too close in lightness: hierarchy disappears and the result looks flat.
• Every pixel colored: no neutral left, so the eye has nowhere to land.
• Calculating screen palettes on the RYB wheel: the complementary relationship comes out wrong.

A Reusable Workflow

1. Pick the dominant color: set hue H, then tune S and L, and decide what role it plays.
2. Choose the relationship: +180° for impact, ±30°–60° for unity.
3. Allocate area: decide the share for dominant, secondary, and accent.
4. Adjust lightness and saturation: open up the lightness gap; desaturate one color if needed.
5. Add neutrals: white, gray, or black for background, whitespace, and separation.
6. Check contrast: verify text against background using WCAG — AA body text needs 4.5:1.

This workflow applies to both schemes. Only step two differs.

"Complementary and analogous are not two styles but two settings on the contrast dial. The decision is not which one looks better, but how much contrast this particular image needs."

The next article covers the middle of the distance spectrum: triadic colors (three hues 120° apart) and split-complementary colors (150°/210°). When complementary feels too hard and analogous too soft, the answer is almost always one of those two.