Guide

Color Harmony Schemes: Monochromatic, Analogous, Complementary, Split, Triadic, Tetradic, Square & Achromatic

The palette generator on the home page rotates around the color wheel using classical harmony rules. This guide covers every common scheme — from one-hue monochromatic to four-hue square and tetradic — with the exact hue angles, hex examples, and when each one fits.

Last reviewed on 2026-10-03

The wheel underneath everything

Every hue-based scheme is a set of angles. Pick a starting hue — anywhere from 0° to 360° — and the scheme tells you which other angles to grab. The math is the same as the one in the HSL guide: hue is an angle on a circle, so adding or subtracting degrees moves you to a related hue.

Saturation and lightness are usually held roughly steady inside a single palette so the colors feel like siblings rather than strangers. The home palette generator nudges saturation and lightness within a small range — enough variation to make swatches distinct, not enough to break the family resemblance.

All color harmony schemes at a glance

Every example below starts from the same base, hsl(210 65% 55%) (#428CD7), and keeps saturation and lightness fixed so only the hue changes. Monochromatic varies lightness instead, and achromatic drops hue altogether.

Offsets are added to the base hue and wrapped at 360°, so 210° + 180° = 390° becomes 30°. Rotate the base and every scheme rotates with it. You can paste any of these values into the converter to get RGB and HSL.

Monochromatic

A monochromatic palette uses a single hue and varies only lightness and saturation: tints (add white), shades (add black), and tones (add gray). It is the scheme people mean when they say a "homogeneous" palette.

Example. Hue 210° at 65% saturation, stepping lightness 25% → 40% → 55% → 70% → 85%: #164069 #2466A8 #428CD7 #81B2E4 #C0D9F2.

Feel. The most cohesive scheme there is. Quiet, elegant, unmistakably on-brand, and easy to get right.

Use it for:

• UI color scales: one hue from background tint to pressed-state shade.
• Single-metric data visualization (sequential heat maps, choropleths).
• Minimal brands and portfolios where the content should carry the interest.

Watch out for: monotony and weak status signalling. With only one hue, all contrast comes from lightness, so check text pairs carefully. Add one accent hue (often the complement) for alerts and calls to action.

Analogous

Analogous palettes pick three to five hues that sit next to each other on the wheel — typically 30° apart. Imagine sliding a small fan across the wheel: every hue under the fan is included.

Example. Starting at 200° (sky blue): 170°, 200°, 230°, 260°, 290° — a journey from teal through blue into violet. A tighter three-hue set from the table above: #42D7D7 #428CD7 #4242D7 (180°, 210°, 240°).

Green and blue. A palette of greens and blues is the textbook analogous scheme on the painter's wheel, where blue-green sits between them. On the RGB/HSL wheel pure green (120°) and pure blue (240°) are a full 120° apart, so the closer the hues (a teal-green and a sea blue, say), the more clearly the pair reads as analogous.

Feel. Calm, cohesive, low contrast. Analogous palettes look intentional and rarely clash. They're a default choice when the color itself shouldn't be the loudest part of the design.

Use it for:

• Backgrounds, gradients, and ambient illustrations.
• Editorial content where typography should lead.
• Long-form interfaces (dashboards, docs) that need calm chromaticity.

Watch out for: low internal contrast. If two analogous swatches need to communicate different statuses (success vs warning), analogous may be too subtle. Pair with a single accent color from across the wheel to mark exceptions.

Complementary

Complementary palettes use two hues sitting opposite each other on the wheel — exactly 180° apart. Red and cyan. Yellow and blue. Magenta and green.

Example. 30° (orange) paired with 210° (sky blue). Or 265° (violet) paired with 85° (lime).

Feel. High energy, high contrast, instantly readable as "two things." Complementary pairs are how a single accent color can pop against a dominant brand color.

Use it for:

• Call-to-action buttons that have to stand against a brand-coloured surface.
• Data visualisations that compare two opposing categories (gain vs loss, before vs after).
• Sports, games, and editorial covers where the design needs to shout.

Watch out for: vibration. Two fully-saturated complements at the same lightness produce a flickering edge that's exhausting to read. Drop one's saturation, raise the other's lightness, or insert a neutral between them.

Triadic

Triadic palettes pick three hues spaced evenly around the wheel — 120° apart. Red, yellow, blue is the canonical example. Orange, green, violet is another.

Example. 0° (red), 120° (green), 240° (blue). Rotating the entire trio by any offset gives another valid set: 30° (orange), 150° (mint), 270° (violet).

Feel. Balanced and playful. Three equal voices — no single hue dominates.

Use it for:

• Children's products, education brands, illustration-heavy surfaces.
• Categorical data where you have exactly three groups and want each to feel equally important.
• Logo systems where each sub-brand inherits one of the three hues.

Watch out for: circus energy. Three saturated equals can feel chaotic if used at full strength everywhere. Designate one as the dominant (largest area), one as secondary (accents), and one as a tertiary (rare highlights). The 60-30-10 rule applies here.

Split-complementary

Split-complementary takes a base hue and pairs it with the two hues adjacent to its complement — 150° and 210° away from the base. It is complementary's quieter cousin.

Example. Base at 0° (red): pair with 150° (spring green) and 210° (azure) instead of 180° (cyan). From the table: #428CD7 #D74242 #D7D742 — a 210° blue with 0° red and 60° yellow, the neighbors of its 30° orange complement.

Feel. The drama of complementary minus the visual fight. The two "complements" reinforce each other but don't directly oppose the base.

Use it for:

• Brand palettes that need vivid contrast without going eye-watering.
• Illustration where you want a clear focal hue and supporting cast.
• Data viz where one main series is contrasted by two related comparisons.

Watch out for: too-similar complements. The two "split" hues sit only 60° apart, so they can blur together. Differentiate them with lightness or saturation if they need to read as distinct.

Split-complementary vs triadic

Both are three-hue schemes, so they get confused. The difference is the spacing:

Think of split-complementary as a complementary pair with one side softened, and triadic as an equilateral triangle. If you widen the split from ±30° to ±60° around the complement, you get a triad.

How many split-complementary harmonies does one complementary pair give?

Two. A complementary pair has two hues, and either one can act as the base. Take blue 210° and its complement orange 30°:

• Blue as base: keep 210° and split orange into its neighbors 0° and 60° → #428CD7 #D74242 #D7D742
• Orange as base: keep 30° and split blue into its neighbors 180° and 240° → #D78C42 #42D7D7 #4242D7

Splitting both sides at once (180°, 240°, 0°, 60°) gives a four-hue scheme sometimes called double split-complementary — a tetradic variant, covered next.

Tetradic (rectangle and double-complementary)

A tetradic palette is two complementary pairs. Draw a rectangle inside the wheel: its four corners are the hues. The most common layout is 0°, 60°, 180°, 240° — two pairs 60° apart.

Example. From a 210° base: 210°, 270°, 30°, 90° → #428CD7 #8C42D7 #D78C42 #8CD742.

Naming. "Tetradic," "rectangle" and "double-complementary" are used loosely and often interchangeably. Some sources reserve "double-complementary" for two adjacent hues plus their two complements (for example 0°, 30°, 180°, 210°), which behaves more like a widened complementary scheme. Some palette tools label the four-hue option simply "tetrad." The rule underneath is always the same: two pairs of opposites.

Feel. Rich and varied — the most hue variety of any classical scheme while staying structured.

Use it for: categorical charts with four series, games and illustration, seasonal or multi-product brand systems.

Watch out for: balance. Four strong hues compete hard. Let one dominate, use one as support, and keep the other two for small accents; desaturate the warm pair or the cool pair so the palette has a temperature lead.

Square

A square palette is the special case of tetradic where the four hues are evenly spaced, 90° apart: 0°, 90°, 180°, 270°. Every hue has a complement in the set and two neighbors a quarter-turn away.

Example. From a 210° base: 210°, 300°, 30°, 120° → #428CD7 #D742D7 #D78C42 #42D742.

Feel. Bold and evenly balanced. Even more "everything at once" than a rectangle because no two hues are close.

Use it for: playful brands, kids' products, four-way categorical data where each category must be clearly separate.

Watch out for: the same balance problem as tetradic, amplified. Square schemes usually work best with one saturated hue and three muted ones, or with large neutral areas between them.

Achromatic and neutral

An achromatic palette has no hue at all: black, white, and the grays between them (in HSL, saturation 0%). Example: #1A1A1A #595959 #999999 #F2F2F2.

Strictly achromatic palettes are rare in practice. More common is a neutral palette: grays with a whisper of hue (saturation around 3–10%), plus beiges, taupes and off-whites. A neutral base with one saturated accent is one of the most reliable schemes in UI and interior design.

Use it for: editorial and luxury brands, photography portfolios, the 60% "dominant" layer of almost any interface.

Watch out for: flatness. Neutral palettes depend on texture, typography and lightness contrast; and pure #808080-style grays look dead next to a tinted brand color, so warm or cool your grays toward the accent.

Decision criteria — picking the right scheme

How to identify a color scheme

Given a palette and asked whether it is analogous, monochromatic, complementary, split-complementary, triadic, square or tetradic, convert each color to HSL (the converter does this) and look at the hue angles only:

1. All saturations near 0%? Achromatic.
2. One hue (all within a few degrees), different lightness → monochromatic.
3. Hues all within about 90° of each other → analogous.
4. Two hues about 180° apart → complementary.
5. Three hues: evenly spaced about 120° → triadic; one hue plus two hues about 60° apart opposite it → split-complementary.
6. Four hues: evenly spaced about 90° → square; two complementary pairs with unequal gaps → tetradic (rectangle).

Real palettes are rarely exact. Allow ±10–15° of tolerance, ignore near-neutral colors (they are usually the background, not part of the scheme), and decide based on the saturated colors.

Example: #E63946, #2A9D8F, #F1FAEE. In HSL their hues are roughly 355°, 173° and 105°, but the third color has 96% lightness: it is an off-white. Ignore it, and the two saturated hues are about 183° apart: complementary.

The 60-30-10 distribution

Whatever scheme you pick, the proportion in which colors are used matters as much as the colors themselves. A common rule:

• 60% of the surface is one dominant color (often a near-neutral).
• 30% is a secondary color that supports the dominant.
• 10% is the accent — the color that earns attention.

The proportions don't have to be exact; the principle is that one color leads, one supports, one punctuates. Triadic and complementary palettes especially benefit from this discipline — used in equal proportion they overwhelm.

Saturation, lightness, and the missing dimensions

Color harmony schemes describe hue relationships only. Two palettes built from the same scheme can feel completely different depending on how saturated and how light their members are. A muted analogous palette of slate, mauve, and dusty blue conveys something very different from the same hue trio at full saturation.

For digital interfaces, lightness usually does most of the work — you'll have a 50%-lightness "brand" version of each hue plus tints (lighter) and shades (darker) for backgrounds, hovers, and disabled states. The HSL guide explains how to construct these scales without losing the relationship between hues.

Accessibility — the constraint that overrides taste

A palette that looks beautiful in a moodboard can fail at the moment text lands on it. Two adjacent colors that look distinct to most viewers can be invisible to a viewer with color vision deficiency. Build the palette, then validate the actual text-on-background pairs in the contrast checker, and audit critical pairs with a color-blindness simulator. Detail is in the WCAG contrast guide.

Color harmony in interior design

The same schemes apply to rooms, with two practical differences. First, the dominant 60% is usually a neutral (walls, large floors), so most interiors are "neutral + scheme" rather than a pure scheme. Second, light changes everything: a north-facing room shifts colors cooler and a warm bulb shifts them warmer, so test paint samples in place at different times of day. Analogous and monochromatic schemes are the usual choice for calm spaces such as bedrooms; complementary accents (a blue sofa against warm wood, say) add energy to living areas.

Harmony modes in design tools

Most palette tools implement these same rules. Adobe Color, for example, offers harmony rules including analogous, monochromatic, triad, complementary, split complementary, square, compound and shades; "compound" and "shades" are tool-specific variations rather than classical scheme names. Other tools and design-system palette builders use "tetrad" for the four-hue rectangle. Because tools may compute hue on different wheels (RGB, RYB, or a perceptual space), the same base can give slightly different suggestions in different apps.

Does color harmony theory have experimental support?

Partly. The schemes on this page come from artistic tradition, not from controlled experiments, and research on color combinations does not cleanly confirm them. Work such as Schloss & Palmer (2011), "Aesthetic response to color combinations: preference, harmony, and similarity," found that people tend to rate pairs of similar hues as more harmonious, and that lightness contrast strongly affects how much a pair is liked. Quantitative color-harmony models such as those by Ou & Luo likewise give considerable weight to lightness and chroma, not just hue angle. Preferences also vary by person, culture, and context.

The practical reading: analogous and monochromatic relationships are a safe bet for "harmonious," complementary relationships are better described as high-contrast than as inherently pleasing, and lightness contrast matters at least as much as which hue angles you pick.

A practical workflow

1. Pick a base hue that fits the brand or mood you want.
2. Pick a scheme based on the decision criteria above.
3. Use the home palette generator to spin candidate sets quickly.
4. Lock the palette in HSL so you can produce tints and shades systematically.
5. Validate every pair you intend to use as text-on-background with the contrast checker.
6. Apply the 60-30-10 distribution rather than using all colors equally.

Common mistakes

• Picking a scheme without picking a job. The scheme follows what the design needs to communicate, not the other way around.
• Equal-weight everywhere. Three hues at 33% each will fight; commit one to lead.
• Saturation as the only lever. Two saturated complements clash; one saturated and one muted complement sing.
• Forgetting neutrals. Every palette needs grays for backgrounds, dividers, and disabled states. Choose them with the same hue family — a slightly purple gray reads better in a violet palette than pure neutral gray.

Frequently asked questions

What are the main color harmony schemes?

The classic schemes are monochromatic (one hue), analogous (neighboring hues, about 30° apart), complementary (two hues 180° apart), split-complementary (a base plus the two hues 150° and 210° away), triadic (three hues 120° apart), tetradic or rectangle (two complementary pairs, e.g. 0°, 60°, 180°, 240°), square (four hues 90° apart), and achromatic (black, white and grays only).

What is the difference between split-complementary and triadic?

Both use three hues. Triadic spaces them evenly at 0°, 120° and 240°, so no hue dominates. Split-complementary uses 0°, 150° and 210°: the two partner hues sit only 60° apart, close to the base's complement, so one hue leads and two related hues contrast with it.

Starting with one complementary pair, how many split-complementary harmonies can you make?

Two. Either hue of the pair can be the base. With a 210° blue and 30° orange pair, keeping blue as the base gives 210°, 0° and 60°; keeping orange as the base gives 30°, 180° and 240°. Each split replaces the other hue with its two 30° neighbors.

What are the 4 major color harmonies in digital media?

There is no single official list. Most design courses and tools name complementary, analogous, triadic and split-complementary as the core four, with monochromatic often counted as a fifth. Tetradic and square schemes are four-hue extensions of the complementary idea.

Is a homogeneous color palette the same as an analogous palette?

No. A homogeneous palette normally means a monochromatic one: a single hue in different tints, tones and shades. An analogous palette uses several different hues that sit next to each other on the wheel, such as blue, blue-green and green.

What is the color scheme of green and blue called?

Green and blue together are usually called an analogous scheme, because they are neighbors on the traditional artist's color wheel with blue-green between them. On the RGB/HSL wheel pure green (120°) and pure blue (240°) are 120° apart, so softer greens and blues closer together on the wheel read as more clearly analogous.

What is a monochromatic color scheme?

A monochromatic scheme uses one hue and varies only its lightness and saturation, for example hsl(210 65% 25%) through hsl(210 65% 85%). It is the most cohesive scheme and relies on lightness contrast rather than hue contrast.

Is there experimental evidence that complementary or analogous colors are more harmonious?

The evidence is mixed. Studies such as Schloss and Palmer (2011) found that people tend to rate pairs with similar hues as more harmonious, and that lightness contrast strongly affects how much a pair is liked. That supports analogous-style relationships more than the claim that complements are inherently the most harmonious. Treat the schemes as useful starting points, not laws.