Color harmony: 6 schemes for combining colors
Color harmony is a way of picking colors that work together based on where they sit on the color wheel. There are six classic schemes: complementary (two opposite colors, 180° apart), analogous (neighbors, about 30° apart), triadic (three colors 120° apart), tetradic (a rectangle or square of four colors), split-complementary (the base plus the two neighbors of its opposite, at 150° and 210°) and monochromatic (a single hue at different lightness levels).
On their own, these schemes don't guarantee a good color palette, but they give you a coherent starting point. What turns geometry into a polished result is proportion (the 60-30-10 rule), careful saturation and lightness adjustments, and a contrast check. This guide walks through each scheme with HEX examples, when to use it and how to avoid the most common mistakes.
How the color wheel defines harmonies
Every color harmony is a relationship between angles. In the HSL model, hue is measured in degrees from 0° to 360°: 0° is red, 120° is green and 240° is blue. Adding or subtracting degrees from a color's hue gives you its harmony partners. If your base color has a hue of 205°, its complement sits at 205 + 180 = 385, which wraps around to 25° (you always subtract 360 once you pass a full turn).
To keep the examples in this guide comparable, they all start from the same base color: #2280C3, which is hsl(205 70% 45%), a medium blue. The other colors in each scheme keep the same saturation (70%) and lightness (45%) and only change the hue.
The RGB/HSL wheel vs. the RYB wheel
One detail trips up a lot of people: there's more than one color wheel. Digital tools use the RGB/HSL wheel, built on the primary colors of light (red, green and blue). The RYB wheel (red, yellow and blue) is the traditional one from fine arts and painting classes. Because they space the hues differently, their complements differ too:
- On the RYB wheel, blue pairs with orange, red with green and yellow with purple.
- On the RGB/HSL wheel, blue pairs with yellow, red with cyan and green with magenta.
Neither is "wrong"; they're models built for different jobs. The angles in this guide use the HSL wheel, because that's what you work with in CSS, in Figma and in the color palette generator. That's why the complement of our blue comes out as a burnt orange at 25°, not the painter's orange you might expect. For a deeper look at the two models, read the color theory and color wheel guide.
The 6 schemes side by side
The table sums up the geometry of each harmony, how many colors it produces, how much hue contrast it creates and where it tends to work best.
| Scheme | Angles from the base | Colors | Hue contrast | Best for |
|---|---|---|---|---|
| Complementary | 0° and 180° | 2 | Maximum | Calls to action, sports, signage |
| Analogous | 0°, −30° and +30° | 3 | Low | Backgrounds, illustration, calm brands, photography |
| Triadic | 0°, 120° and 240° | 3 | High | Playful brands, kids' content, infographics |
| Split-complementary | 0°, 150° and 210° | 3 | High, softer than complementary | Interfaces that need emphasis without harshness |
| Tetradic (rectangle/square) | 0°, 60°, 180° and 240° / 0°, 90°, 180° and 270° | 4 | Very high | Multi-category systems, dashboards, games |
| Monochromatic | 0° (only lightness and saturation change) | 3 to 6 | None (lightness only) | Understated interfaces, minimalist brands, UI states |
Complementary and split-complementary
Complementary (180°)
Two colors directly opposite each other on the wheel. With our base, the pair is #2280C3 (205°) and #C36522 (25°). Placed side by side, complementary colors intensify each other, an effect the chemist Michel-Eugène Chevreul described in the 19th century as simultaneous contrast. That's why this scheme grabs so much attention.
Use the complement as an accent, not as an equal split. A page that's half blue and half orange is tiring to look at and loses its hierarchy. A layout that's mostly blue (plus neutrals) with orange buttons or badges works far better.
Watch out: a difference in hue is not a difference in lightness. In this example, #2280C3 and #C36522 have identical HSL lightness, and the WCAG contrast ratio between them is only 1.05:1. Orange text on that blue background is practically unreadable for people with low vision or color blindness.
Split-complementary (150° and 210°)
Instead of the exact opposite, you use the two colors on either side of it. With the base at 205°, the partners land at 355° and 55°: #2280C3, #C32230 (a red) and #C3B622 (a mustard yellow). You keep the vibrant contrast of a complementary pair with more nuance and less tension. It's a great choice if you're just starting out, because it handles uneven proportions well.
Analogous and monochromatic
Analogous (±30°)
Neighboring colors on the wheel, usually 30° apart. From our base: #22C3B6 (175°, a sea green), #2280C3 (205°) and #2230C3 (235°, an indigo blue). Analogous palettes feel the most "natural" because they echo what we see in landscapes: the sea shifting from green to blue, a sunset moving from yellow to red.
The risk is a lack of focus. Since the hues are close, nothing stands out. Pick one of the three as dominant, use another for support and save the third, or a very dark neutral, for text and highlights. Analogous colors also make excellent gradients, since the transition between nearby hues doesn't pass through muddy grays; try it in the gradient generator.
Monochromatic
A single hue at different lightness levels (and, optionally, saturations). Keeping the hue at 205° and saturation at 70% while moving lightness from 20% to 90% gives you: #0F3957, #175582, #2280C3, #52A5E0, #93C7EC and #D4E8F7.
This is the safest scheme for interfaces: it's almost impossible to get the combination wrong, and hierarchy comes from lightness differences, which is exactly what matters for readability. For instance, #0F3957 on #D4E8F7 has a contrast ratio of about 9.6:1. The downside is monotony; many brands fix that with a single accent color from outside the hue.
Triadic, rectangle and square
Triadic (120°)
Three colors evenly spaced around the wheel. With the base at 205°: #2280C3, #C32280 (325°, a magenta) and #80C322 (85°, a lime green). A triad is vibrant and balanced at the same time. At full saturation it recalls toys and cartoons; with the secondary colors desaturated or lightened, it becomes much more refined.
Rectangle tetradic (0°, 60°, 180° and 240°)
Two complementary pairs forming a rectangle on the wheel: #2280C3 (205°), #6522C3 (265°), #C36522 (25°) and #80C322 (85°). It offers plenty of variety, which helps when you need to tell categories apart, such as four data types on a dashboard.
Square (0°, 90°, 180° and 270°)
Four evenly spaced colors: #2280C3 (205°), #B622C3 (295°), #C36522 (25°) and #30C322 (115°). It has the most hue contrast of any scheme, and it's also the hardest to balance.
With four-color schemes, the golden rule is: one color leads, the rest follow. Choose a dominant color, lower the saturation or shift the lightness of the others and use them in small areas. Four saturated colors in equal amounts almost always end up as visual noise.
Proportions: the 60-30-10 rule
Choosing colors is only half the job; the other half is deciding how much of each one appears. The 60-30-10 rule, borrowed from interior design, is a practical shortcut:
- 60% for the dominant color, usually a neutral or a very light or dark version of the main color (backgrounds, large surfaces).
- 30% for the secondary color (headers, cards, section blocks, illustrations).
- 10% for the accent color (buttons, links, alert icons, prices).
Applied to the complementary example on a website: 60% #D4E8F7 and white for backgrounds, 30% #175582 for the header, footer and headings, and 10% #C36522 for the buy buttons. The orange stands out precisely because it's rare on the page. The numbers aren't sacred (70-20-10 or 60-35-5 work too); the point is to keep two colors from fighting for the lead. The guide on how to choose a color palette for your website shows how to turn this into CSS tokens.
Fine-tuning, contrast and accessibility
Vary saturation and lightness
The examples above use the same saturation and lightness for every color to make the geometry obvious, but real palettes are almost never like that. A few techniques that make a "mathematical" harmony look professional:
- Build a scale for each color: a dark version for text, a mid version for graphic elements and a very light one for backgrounds.
- Desaturate the supporting colors and keep full saturation for the accent only.
- Compensate for perceived lightness: at the same HSL lightness value, yellows and greens look much lighter than blues and purples. Adjust by eye or use a perceptual color space such as OKLCH.
- Add neutrals. Grays with a slight tint of the main hue tie the palette together without competing with it.
Check the contrast
Harmony doesn't guarantee readability. WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (level AA). White on #2280C3 comes in at about 4.25:1, which only passes for large text; darkening it to #175582 raises it to about 7.9:1, which passes even at level AAA. Check every text and background pair with the contrast checker and read the color contrast and accessibility guide to understand the criteria.
Think about color blindness
About 8% of men and 0.5% of women of European descent have some form of color vision deficiency, most often trouble telling red from green. Schemes like triadic and square can put those hues right next to each other. Never rely on color alone to convey information: pair it with labels, icons or patterns, and preview your palette in the color blindness simulator.
Summary and next steps
- Complementary for maximum emphasis, using the opposite color sparingly.
- Split-complementary for contrast with less tension.
- Analogous for calm compositions and smooth gradients.
- Monochromatic for understated interfaces that are easy to maintain.
- Triadic and tetradic for variety, always with one dominant color.
- Use uneven proportions (60-30-10), adjust saturation and lightness and check the contrast.
To put it into practice, generate these schemes automatically with the color palette generator, grab a base color from a photo or logo with the image color picker and build transitions between your colors in the gradient generator. If the palette is for a brand, it's also worth reading about color psychology. And for inspiration from specific colors, explore pages like navy blue, terracotta, teal or the full color catalog.