#7C3AEDComplementary2 colors
Bluish Purple
Two colors opposite each other on the color wheel. Pick a base color and a harmony, then export to CSS, SCSS or JS.
Base color
Harmony
Complementary
262° 82°
Click any swatch to copy HEX6 harmonies
Export code
2 complementary colors.
Format
Color values
variables.css
:root {
--complementary-1: #7C3AED;
--complementary-2: #ABED3A;
}
Every harmony
All six for this base color. Pick one to use it.
How it works
See the complementary, triadic, tetradic, analogous, and split complementary sets for any color, computed on the color wheel.
The five harmony types
Complementary takes the hue 180 degrees opposite. It gives the strongest contrast available at the same lightness, which makes it good for a single accent and bad for large adjacent areas, where it vibrates.
Analogous takes neighbours within about 30 degrees. Low tension, naturally cohesive, and the safest choice when you want a scheme to feel like one thing.
Triadic spaces three hues 120 degrees apart, tetradic uses two complementary pairs, and split complementary swaps the direct complement for its two neighbours to keep the contrast while dropping the vibration.
Applying a harmony without it looking loud
Harmony sets give you hues, not a design. The usual failure is using all of them at equal weight. Weight them instead: roughly 60 percent dominant, 30 percent secondary, 10 percent accent. Most palettes that look wrong are correctly harmonised and badly proportioned.
Frequently asked
4 questions people ask about the color harmony generator.
1What is the difference between complementary and split complementary?
Complementary uses the single hue directly opposite on the wheel. Split complementary uses the two hues either side of it instead. You keep most of the contrast but lose the optical vibration that direct complements cause when placed adjacent.
2Which color harmony should I use for a website?
Analogous for a calm, cohesive feel, with one complementary accent for buttons and links. That gives you cohesion across the page and one color that unambiguously means 'click this'.
3Do color harmonies guarantee good contrast?
No. Harmony is about hue relationships and says nothing about lightness. Two complementary colors at the same lightness can be nearly unreadable together. Check any text pairing with a contrast checker.
4What is a triadic color scheme?
Three hues spaced evenly at 120 degrees around the wheel. It is vivid and balanced, but needs one clearly dominant color with the other two used sparingly, or it reads as chaotic.