Colors Triadic and Compound Schemes
Triadic schemes place three hues at even 120-degree intervals around the color wheel for vibrant balance, while compound (split-complementary) schemes pair a base hue with the two neighbors of its complement for strong contrast with less tension than a direct complement.
Triadic Color Schemes Explained
A triadic scheme selects three hues spaced evenly around the color wheel, 120 degrees apart from one another, so they form the points of an equilateral triangle if you draw lines between them. Because the hues are maximally spread out yet still evenly balanced, triadic palettes tend to feel vibrant and energetic even when built from fairly muted colors -- but that same spread makes them risky if used in equal amounts, since three loud hues competing for attention can look chaotic.
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--triadic-base: hsl(40, 70%, 55%);
--triadic-accent-1: hsl(160, 70%, 40%);
--triadic-accent-2: hsl(280, 70%, 45%);
}
.swatch-base { background-color: var(--triadic-base); }
.swatch-accent-1 { background-color: var(--triadic-accent-1); }
.swatch-accent-2 { background-color: var(--triadic-accent-2); }
</style>
</head>
<body>
<div class="swatch-base">Base</div>
<div class="swatch-accent-1">Accent 1</div>
<div class="swatch-accent-2">Accent 2</div>
</body>
</html>Compound (Split-Complementary) Schemes
A compound scheme -- often called split-complementary -- starts the same way a complementary scheme does, by locating the hue directly opposite the base, 180 degrees away. Instead of using that opposite hue directly, it swaps in the two hues sitting on either side of it, roughly at base + 150 and base + 210 (about 30 degrees to each side of the true complement). The result keeps most of the punch of a complementary pairing, since you're still pulling from the far side of the wheel, while softening the harshest, most vibrating contrast that a direct 180-degree complement can produce -- giving more contrast than an analogous scheme but less tension than a full complementary one.
- Pick a base hue for the dominant color.
- Locate its true complement by adding 180 degrees (you won't use this hue directly, just as a reference point).
- Take the hue roughly 30 degrees counter-clockwise from that complement -- base + 150.
- Take the hue roughly 30 degrees clockwise from that complement -- base + 210.
- Use the base hue for most of the design and the two split-complement hues as contrasting accents.
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--compound-base: hsl(0, 70%, 50%);
--compound-accent-1: hsl(150, 70%, 40%);
--compound-accent-2: hsl(210, 70%, 45%);
}
.swatch-base { background-color: var(--compound-base); }
.swatch-accent-1 { background-color: var(--compound-accent-1); }
.swatch-accent-2 { background-color: var(--compound-accent-2); }
</style>
</head>
<body>
<div class="swatch-base">Base</div>
<div class="swatch-accent-1">Accent 1</div>
<div class="swatch-accent-2">Accent 2</div>
</body>
</html>- Analogous: lowest contrast, most harmony -- neighbors within about 30 degrees of the base.
- Compound (split-complementary): moderate-to-high contrast with some relief from the base hue -- base, base + 150, base + 210.
- Triadic: high contrast and maximum spread with three hues 120 degrees apart -- vibrant, but needs a dominant color to stay balanced.
- Complementary (base + 180): the most tension and the highest contrast of the group, best reserved for small, deliberate accents.
Exercise: Colors Schemes in Depth
What defines a 'split-complementary' color scheme?
