Color theory: why some combinations just work
Complementary, analogous, triadic, split-complementary — color harmonies are not arbitrary. They are computed from the color wheel using simple geometry, and they feel good for reasons rooted in how the human visual system works.
The color wheel and the HSL model
Every color harmony is computed on a color wheel — a circular arrangement of hues where neighbouring colors blend into each other. The model behind it is HSL: Hue, Saturation, Lightness.
- Hue — an angle from 0° to 360°. Red is at 0°, green at 120°, blue at 240°, and the circle closes back at red at 360°.
- Saturation — how vivid the color is, from 0 % (grey) to 100 % (full color).
- Lightness — how bright it is, from 0 % (black) through 50 % (pure color) to 100 % (white).
Once you represent color as an angle, computing harmonies becomes simple geometry: rotate by a fixed number of degrees around the wheel. The five harmonies Zapia offers are each a different rotation pattern.
Tints — same hue, different lightness
A tint palette keeps the hue constant and varies saturation and lightness to produce a range of shades from very light to very dark. It is the most conservative harmony — you are technically staying on a single point of the color wheel and just moving up and down the brightness axis.
S₂ ≈ S₁ (slight adjustments for readability)
L varies: 90 % → 70 % → 50 % → 35 % → 20 %
Why it feels good
Tints feel cohesive and safe. The brain groups them as "the same thing at different intensities", so there is no visual tension. They are ideal for backgrounds, states (default, hover, active) and text hierarchies within a single brand color.
Complementary — the color directly opposite
A complementary color is exactly 180° away on the wheel. If your brand color is blue (220°), its complement is orange (40°).
Why it feels good
The human visual system processes color through opponent channels: red vs. green, blue vs. yellow. Complementary pairs sit on opposite ends of these channels, creating the maximum possible contrast. This is why the combination feels electric — your eye is stimulated on two opposite channels simultaneously.
It is also why, if you stare at a red square for 30 seconds then look at a white wall, you see a cyan afterimage: your red-sensitive cells are fatigued and the green/blue channels fire unbalanced.
Analogous — neighbours on the wheel
Analogous colors are adjacent on the wheel, typically within ±30° of the base hue. A blue base (220°) gives you cyan-blue (190°) and indigo (250°) as its analogous partners.
H₃ = (H₁ − 30 + 360) % 360
Why it feels good
Nature is full of analogous palettes — the gradient of a sunset, the greens of a forest, ocean depths. Because the hues share a common "parent", the eye reads them as a unified family rather than competing colors. Analogous palettes feel calm, natural and approachable. They are excellent for backgrounds, illustrations and UI surfaces where you want warmth without distraction.
The trade-off is low contrast between the colors themselves. Always pair an analogous background with a neutral (white, dark grey) for text.
Triadic — three equidistant points
A triadic palette places three hues exactly 120° apart, forming an equilateral triangle on the color wheel. Starting at blue (220°), you get red-orange (340°) and yellow-green (100°).
H₃ = (H₁ + 240) % 360
Why it feels good
Triadic palettes are vibrant and balanced at the same time. Because the three hues are evenly spaced, no single color dominates perceptually — the eye moves between them in a triangular rhythm. Artists and graphic designers often use this scheme for playful, energetic work.
In UI, let one color be dominant (60 %), one secondary (30 %), and use the third sparingly as an accent (10 %). This "60-30-10 rule" keeps it lively without becoming chaotic.
Split-complementary — the softer opposite
Split-complementary takes the complement (H + 180°) and splits it ±30°, giving you two colors flanking the direct opposite instead of the opposite itself. For blue (220°), rather than orange (40°) you get red-orange (10°) and yellow-orange (70°).
H₃ = (H₁ + 210) % 360
Why it feels good
This is the most versatile harmony. You get almost the same visual tension as complementary — still strong contrast, still a dynamic feel — but the two warm colors are less aggressive against each other. The split removes the "staring contest" between pure opposites.
It is particularly good for products that want to feel bold and modern but not harsh. Many successful tech interfaces land here: a dominant cool color with two warm accents that guide attention without clashing.
How to choose the right harmony
- Tints — start here. Every palette needs a tint scale for states and backgrounds.
- Complementary — use when you need a strong call-to-action that pops against the brand color. Handle with care at large sizes.
- Analogous — ideal for calm, editorial, or nature-inspired interfaces. Pair with a dark neutral for body text.
- Triadic — great for playful or consumer products. Apply the 60-30-10 rule to avoid visual noise.
- Split-complementary — the safe default when you want contrast without tension. Works well for most SaaS and productivity tools.
There is no objectively correct harmony — the "right" one is the one that fits the tone of your product and the expectations of your audience. What color theory gives you is a principled starting point so you are not guessing.