Color harmony is the practice of choosing colors by their positions on a color wheel so they look deliberate together. Each classic scheme is a fixed hue rotation from one base color: complementary adds 180°, analogous adds and subtracts 30°, triadic adds 120° and 240°, and split-complementary adds 150° and 210°. Saturation and lightness stay the same, so a harmony gives you hues, and you then decide how much of each to use.
The base color and the HSL wheel
Every example below starts from #6366F1, an indigo that is rgb(99, 102, 241) and hsl(239, 84%, 67%). Its unrounded hue is 238.7°. Each harmony keeps saturation at 84% and lightness at 67% and only rotates the hue on the HSL wheel, which is the digital RGB wheel the color harmonies tool uses. This wheel has two handy properties that let you check results by hand: a 180° turn replaces each channel with (max + min − channel), and a 120° turn simply rotates the three channels.
Complementary and split-complementary
Complementary: 180°
The complement sits directly opposite the base. 238.7° + 180° = 58.7°, which gives #F1EE63, a soft yellow. You can verify it without a wheel: the base channels are 99, 102 and 241, the largest plus the smallest is 340, and subtracting each channel from 340 gives 241, 238 and 99, or #F1EE63.
Complementary pairs give the strongest hue contrast, which makes them the natural choice for a single call to action in an otherwise one-hue interface. Hue contrast is not luminance contrast, though. A complementary pair can still fail WCAG, so test any text pair in the contrast checker before you ship it.
Split-complementary: 150° and 210°
Instead of the direct complement, split-complementary takes the two hues on either side of it. Adding 150° gives 28.7°, #F1A763, a light orange; adding 210° gives 88.7°, #ADF163, a lime. You keep most of the tension of a complementary pair with a softer edge, and you get two accents instead of one. For many interfaces it is the easiest high-contrast scheme to live with.
Analogous and triadic
Analogous: ±30°
Analogous colors are the base's neighbors on the wheel. Subtracting 30° gives 208.7°, #63ADF1, a sky blue; adding 30° gives 268.7°, #A763F1, a violet. The three hues share a family resemblance, so analogous palettes read as calm and unified. They suit gradients, illustrations and section backgrounds, but they offer little contrast for an accent. Pair them with a neutral, and let one of the three carry interactive states.
Triadic: 120° and 240°
A triad spaces three hues evenly around the wheel. From the base you get 358.7°, #F16366, a coral red, and 118.7°, #66F163, a bright green. On the HSL wheel a 120° turn is just a rotation of the RGB channels: (99, 102, 241) becomes (241, 99, 102) and then (102, 241, 99). Triads are lively and balanced, but three saturated hues at equal weight is a lot for an interface. Most UI palettes use one as the primary and keep the other two for tags, charts or illustration.
Tetradic and monochromatic
Tetradic: two complementary pairs
A tetradic, or rectangle, scheme uses two complementary pairs. The tool rotates the base by 60°, 180° and 240°, which adds #EE63F1 (a magenta at 298.7°), #F1EE63 (the yellow complement at 58.7°) and #66F163 (the green at 118.7°). Four hues offer the most variety and are the hardest to balance, so let one dominate and mute the rest. Because the scheme contains two pairs of opposites, it is also the most likely to produce harsh, flickering edges where saturated complements touch; separate them with neutral space.
Monochromatic: one hue
Monochromatic keeps the hue and varies lightness and saturation. The tool's version holds 238.7° and steps lightness from 20% to 90%, lowering saturation toward the light end, which produces #080A5E at the dark end and #DDDDEE at the light end. Monochromatic ranges are the backbone of most design systems, because they cover surfaces, borders, text and states without any hue clashes. For finer control, build a full scale with the shades, tints and tones tool or the Tailwind palette generator.
Turning a harmony into a palette: the 60-30-10 rule
A harmony tells you which hues belong together, not how much of each to use. The 60-30-10 rule, borrowed from interior design, fills that gap: roughly 60% of the visual area in a dominant color, 30% in a secondary color and 10% in an accent. In an interface that usually means:
- 60%: neutral surfaces and backgrounds, often a near-white or near-black nudged slightly toward the base hue.
- 30%: the primary color family, used for navigation, headers, cards and secondary buttons.
- 10%: the accent from your harmony, reserved for primary actions, highlights and key data.
With the indigo base, that could mean a pale indigo-gray canvas, indigo for structure, and the split-complementary orange #F1A763 with dark text for the main call to action. Keep the accent rare: once it appears everywhere, it stops pointing anywhere.
Expect to adjust lightness before the palette feels balanced. Every harmony color above shares an HSL lightness of 67%, yet their perceived lightness differs widely: in OKLCH terms the indigo base sits at 58.5%, the yellow complement #F1EE63 at 92.6% and the triadic green #66F163 at 85.2%. Darken the light hues, such as yellow, green and lime, or lighten the base, until the colors carry similar visual weight.
HSL wheel vs the painter's RYB wheel
There are two common color wheels, and they disagree. The digital wheel used by HSL and by this site's tools is built from light: its primaries are red, green and blue, so red at 0° sits opposite cyan at 180°. The traditional painter's wheel, taught in art classes and used in Johannes Itten's influential color theory, uses red, yellow and blue as primaries and places red opposite green, blue opposite orange and yellow opposite purple.
Neither wheel is wrong; they model different media. For screens, the RGB wheel matches how colors are actually produced, and it is what CSS hue angles mean. If a brand guide or an illustrator's palette was built on the RYB wheel, its complement will differ from the one a digital tool computes, so treat tool output as a starting point and adjust by eye. HSL hue steps are also not perceptually even; for palettes where equal spacing matters, see RGB vs HSL vs OKLCH.
Try it: generate harmonies from your color
Enter any base color in the color wheel to see all six harmonies at once and copy the palette you want. To explore beyond fixed rotations, the palette generator lets you lock the colors you want to keep and press Spacebar to generate the rest.