Complementary, Triadic, Split-Complementary: Color Harmony by Angle
Click "complementary" or "triadic" in a design tool and a plausible color combo pops out instantly — but the math running behind it is surprisingly simple. It's all about adding and subtracting angles on a 360-degree circle called the color wheel. This guide walks through the HSL angle arithmetic actually used by the Color Palette Generator, and explains why these particular angle arrangements look visually balanced.
1. The color wheel is a 360-degree circle — HSL's H value
Expressing color as RGB (red, green, blue) makes it hard to get a feel for how "harmonious" two colors are. HSL (Hue, Saturation, Lightness), on the other hand, expresses hue as an angle from 0 to 360 degrees, so relationships between colors can be handled intuitively as distances on a circle. 0 degrees is red, 120 is green, 240 is blue, and filling in the gradient between them gives the familiar color wheel. Color harmony theory ultimately boils down to a set of rules about "how many degrees apart on this circle should the colors be."
2. Complementary: maximum contrast from a 180-degree rotation
A complementary color sits exactly 180 degrees from the base hue — the opposite point on the circle. Since it's the farthest possible point on the wheel, placing the two colors side by side creates the strongest contrast. Red (0°) paired with cyan (180°) is the classic example. That's why complementary pairs show up so often for CTA buttons or accent colors that need a strong visual punch.
3. Triadic: an even three-way split at 120 degrees
A triadic scheme picks three colors spaced exactly 120 degrees apart — dividing 360 degrees into thirds, like drawing an equilateral triangle on the wheel. It's not as extreme a contrast as complementary, but because all three colors are evenly spaced, none of them dominates, producing a combination that feels lively without any single color overpowering the others. It suits logos or illustration palettes that need three or more colors.
4. Split-Complementary: the two neighbors of the complement, at 150 and 210 degrees
Instead of using the exact complement (180°), split-complementary uses the two points on either side of it — 150 and 210 degrees. In other words, it swaps one directly-opposite color for two colors near-opposite. This keeps contrast almost as strong as a true complementary pair while avoiding total reliance on one exactly-opposite hue, producing a softer, more forgiving combination. It's often recommended as an alternative when a straight complementary pairing feels too intense.
5. The actual code: how generateScheme() adds the angles
Looking at the Color Palette Generator's code shows this theory implemented directly. It pulls the base color's H, S, and L values with hexToHsl(), then inside generateScheme() adds a fixed number of degrees to H depending on the scheme type and takes the remainder modulo 360.
- Complementary:
(h+180)%360 - Triadic:
(h+120)%360,(h+240)%360 - Split-complementary:
(h+150)%360,(h+210)%360 - Tetradic:
(h+90)%360,(h+180)%360,(h+270)%360— an even four-way split at 90-degree intervals
The modulo operation exists to wrap angles that overshoot 360 (for example, a base hue of 300 degrees plus 120 equals 420, which needs to fold back into the 0–360 range). Once these angles are computed, they're converted back to HEX with hslToHex() and displayed as swatches — that's the whole pipeline.
6. A worked example: calculating from base color #c084fc
The Color Palette Generator's default base color is #c084fc (which, coincidentally, is the same value as modoohub.com's own CSS variable --purple). Feeding this color into hexToHsl() yields roughly H≈270°, S≈95%, L≈75%. Applying each scheme's angle arithmetic to that gives the following.
| Scheme | Calculation | Resulting H (degrees) |
|---|---|---|
| Base | H | 270° (purple) |
| Complementary | (270+180) % 360 | 90° (yellow-green family) |
| Triadic ① | (270+120) % 360 | 30° (orange family) |
| Triadic ② | (270+240) % 360 | 150° (green family) |
| Split-complementary ① | (270+150) % 360 | 60° (yellow family) |
| Split-complementary ② | (270+210) % 360 | 120° (green family) |
Starting from the very same purple, you can see how choosing a different scheme lands on completely different angles and completely different color families. For the actual HEX values with lightness and saturation applied, it's most accurate to enter your own color directly in the Color Palette Generator.
7. Angle alone isn't enough — lightness, saturation, and accessibility
Color harmony theory only deals with the H (hue) angle, but real design also has to account for S (saturation), L (lightness), and contrast against the background. A pair that's a perfect complementary angle can still tire the eye if there's no lightness difference between them, and if the colors are used as text on a background, you need to separately verify they meet WCAG contrast requirements (4.5:1 or higher for normal text). After picking colors, it's worth checking real-world readability with the Color Contrast Checker.
Frequently Asked Questions
Q. Should I use complementary or split-complementary colors?
Use complementary (180°) when you need strong contrast, and split-complementary (150°/210°) when you want to keep contrast but soften the feel a bit. Split-complementary is generally easier to work with in practice, since it doesn't rely on a single directly-opposite color.
Q. What's the difference between triadic and tetradic?
Triadic divides 360 degrees into three equal parts (120° apart) for three colors; tetradic divides it into four (90° apart) for four colors. More colors means a more varied palette, but also a harder combination to pull off.
Q. A HEX code doesn't directly show an angle — how is it calculated?
You have to convert HEX (#RRGGBB) into RGB, then run the RGB-to-HSL formula to get the H value (angle). Rather than calculating it by hand, it's faster and more accurate to use the HEX to RGB converter or the Color Palette Generator.
Q. What combinations should I avoid for color-blind users?
The most common form, deuteranopia (red-green color blindness), means you should avoid palettes that rely on red vs. green alone to convey information. Even a mathematically perfect complementary pair can become indistinguishable under color-blindness simulation, so check ahead of time with the Color Blindness Simulator.