Color Harmonies
See the complementary, triadic, split-complementary, and analogous colors for any base color, computed by rotating hue in HSL space — the color-theory relationships designers actually use, made precise.
Complementary
Analogous
Triadic
Tetradic
Split-complementary
How it works
Traditional color-wheel harmony rules translate directly into hue rotation: complementary is +180° (maximum contrast, the two colors that together would neutralize each other if mixed as pigment), analogous is a narrow ±30° band (colors that sit near each other and read as a family), triadic is three colors 120° apart (evenly spaced, high contrast but softer than a single complement), and split-complementary takes the base plus the two colors adjacent to its complement (±150°) rather than the complement itself, giving strong contrast with slightly less tension than a pure complementary pair. All of these are rotations of the same base hue at constant saturation and lightness, which is what keeps a generated harmony looking coherent rather than arbitrary. It's worth noting these rules predate digital color entirely — Michel Eugène Chevreul's 1839 treatise on simultaneous color contrast, written while he was a dye chemist investigating why certain fabric colors seemed to clash, is the direct ancestor of the complementary/analogous vocabulary still used in design software today, over 180 years later.
Worked example
For a base violet at HSL(270°, 55%, 50%): its complementary sits at 90° (a yellow-green), its triadic partners at 30° and 150° (an orange and a green), and its split-complementary pair at 60° and 120° (a gold and a leaf green) — each relationship trades off contrast strength against visual harmony differently, which is why color theory offers more than one rule rather than a single 'correct' pairing. A base at the opposite, warm end of the wheel makes the tradeoffs concrete in a different direction: HSL(20°, 70%, 50%) (a saturated burnt orange) has its complementary at 200° (a steel blue), triadic partners at 140° and 260° (a teal-green and a violet), and split-complementary at 170° and 230° (a cyan-leaning teal and a blue) — notice the split-complementary pair here stays visually calmer than the single complementary blue, even though both options are legitimate 'high contrast' choices for the same starting orange.
When to use this tool
Use this when you want to understand and compare the different classical color-theory relationships for one base color side by side, rather than getting a single fixed five-color output — it's the more exploratory, educational counterpart to the Palette Generator, which commits to one specific combined set. It's a genuinely useful teaching tool too: if you're new to color theory and have only ever heard the term 'complementary colors' without a clear mental model of what that means numerically, watching the complementary swatch update in real time as you drag a hue slider builds an intuition that's hard to get from a static color-wheel diagram alone. If you just want a ready-made palette without weighing the different harmony rules yourself, the Palette Generator or Goes-With Generator get you there faster.
Precision & accuracy
Every harmony relationship here is a fixed-degree hue rotation applied with floating-point precision, only rounded for the final HSL/hex display values — the fixed offsets (30°, 120°, 150°, 180°) are the textbook color-theory definitions, not approximations, so the results match what you'd get manually rotating a physical color wheel by those exact angles. It's worth being precise about a real limitation, though: hue-wheel harmony rules were developed for pigment mixing and don't account for the human eye's non-uniform hue sensitivity (we discriminate small hue differences far more precisely in some parts of the wheel, greens especially, than in others) — a genuinely more perceptually rigorous harmony tool would compute equal steps in a uniform space like OKLCH rather than raw HSL degrees, which is a real, documented gap between traditional color theory and modern perceptual color science that this tool, like most classical harmony generators, doesn't close.
FAQ
What's the difference between triadic and analogous?
Triadic colors sit 120° apart on the hue wheel (maximum even spread, high contrast); analogous colors sit close together, within about 30°, and read as a cohesive family rather than a contrast set.
Which harmony should I actually use?
Analogous palettes read as calm and cohesive (good for backgrounds and large surfaces); complementary and split-complementary create visual pop for calls-to-action and accents; triadic gives you three well-separated brand/category colors without any two competing directly.
Does this account for how the eye actually perceives contrast, not just hue distance?
Hue rotation alone doesn't guarantee equal perceptual contrast — two hues 120° apart can look more or less distinct depending on saturation and lightness, so always sanity-check a generated harmony visually, not just by the hue-degree math.
What's a tetradic (double-complementary) harmony?
A four-color scheme using two complementary pairs — this tool focuses on the three most commonly used relationships (complementary, triadic, analogous/split-complementary); a tetradic scheme can be approximated by combining two separate complementary lookups.
Where do these harmony rules actually come from?
They trace to 19th-century color theory, most notably French chemist Michel Eugène Chevreul's 1839 work on simultaneous color contrast — long before digital color spaces existed, which is why the rules are defined in simple hue-wheel degrees rather than a more modern perceptual color model.
Why does split-complementary look calmer than plain complementary to me?
Split-complementary trades a small amount of contrast strength for two moderately-related accent hues instead of one maximally-opposed one, which most viewers perceive as less visually tense than a pure 180° complementary pairing, even though all three colors involved are still legitimately high-contrast relative to the base.