Color Schemes Explained: Complementary, Analogous, Triadic & More
Complementary, analogous, triadic, monochromatic and more — every color scheme explained with examples, hex codes and CSS you can copy.
On this page▾
Color schemes are the small set of rules designers use to pick colors that look intentional together instead of random. Almost every scheme — complementary, analogous, triadic, monochromatic and the rest — is just a recipe for where to stand on the color wheel. This guide walks through every type with real hex codes you can copy, the math behind each one, and the CSS to ship it.
What a color scheme is
A color scheme (or color harmony) is a deliberate relationship between hues. Instead of eyeballing colors one at a time, you fix a base color and derive the others by their position on the color wheel — a circle of hues that loops from red through yellow, green, blue and back.
There are two wheels in common use, and they disagree about opposites:
- The RYB (artist's) wheel uses red, yellow and blue as primaries — the model you learned mixing paint. On it, the opposite of red is green and the opposite of blue is orange.
- The RGB / HSL (digital) wheel uses red, green and blue as primaries — the model behind every screen, color picker and CSS color. Hue is an angle from 0 to 360°, and the opposite of a color is the hue 180° across from it.
CSS, design tools and the widgets on this site all use the digital wheel, so every scheme below is built by rotating the hue angle in HSL while keeping saturation and lightness fixed. That single idea generates all of them.
| Scheme | Hue pattern (degrees from base) |
|---|---|
| Monochromatic | one hue, vary lightness only |
| Analogous | 0, ±30 |
| Complementary | 0, 180 |
| Split-complementary | 0, 150, 210 |
| Triadic | 0, 120, 240 |
| Tetradic (rectangle) | 0, 60, 180, 240 |
| Square | 0, 90, 180, 270 |
Throughout this guide the base color is the same blue, #3B82F6 (hue 217°), so you can see how each recipe reshapes one starting point. Grab your own base in the Color Picker, then read on.
Monochromatic
A monochromatic color scheme uses a single hue and varies only its lightness and saturation. You get a range of tints (toward white) and shades (toward black) of one color — no second hue anywhere.
Take the base blue and walk it lighter and darker:
| Step | Hex | Role |
|---|---|---|
| Lightest tint | #CEE0FD | page background |
| Tint | #9DC1FB | hover surface |
| Tint | #6CA1F8 | borders |
| Base | #3B82F6 | primary |
| Shade | #2C62B9 | hover/active |
| Shade | #1E417B | headings |
| Darkest shade | #0F213E | body text |
Because every value shares the same hue, the result is calm and unmistakably cohesive — which is exactly why it can also feel flat. The fix is contrast through lightness: pair the lightest tint with the darkest shade for text, and the eye reads them as clearly distinct even though they are "the same color."
Monochromatic is the backbone of most UI systems. Build the full ramp from any base with the Shade & Tint Generator — it does the tint/shade math shown above in one step.
Analogous
An analogous color scheme uses colors that sit next to each other on the wheel, typically the base plus its neighbours about 30° to each side. Because the hues are so close, the scheme feels harmonious and organic — think of a sunset sliding from red to orange to yellow, or foliage moving through greens.
Rotating the base blue by ±30°:
| Hex | Hue | Note |
|---|---|---|
#3BE0F6 | 187° cyan | −30° neighbour |
#3B82F6 | 217° blue | base |
#513BF6 | 247° indigo | +30° neighbour |
Analogous schemes are low-contrast by nature, so pick one color to dominate and let the others support it rather than splitting attention three ways. They are a safe, attractive default for backgrounds, illustrations and gradients. For a deep dive into one popular analogous family, see what colors go with sage green.
Complementary
A complementary color scheme pairs two hues directly opposite each other — 180° apart. This is the highest-contrast relationship on the wheel, which makes complements vibrate against each other and pull the eye. It is the classic "accent color" formula.
| Role | Hex | Hue |
|---|---|---|
| Base | #3B82F6 | 217° blue |
| Complement | #F6AF3B | 37° amber |
That blue-and-amber pairing is everywhere for a reason: a cool, trustworthy blue interface with a warm orange call-to-action button is one of the most reliable combinations in product design.
The catch with complementary pairs is intensity. At full saturation they can clash or buzz, especially as large adjacent blocks or as colored text. Use one as the dominant color and the other only as an accent — a button, a link, a highlight — and desaturate or darken one side if the contrast feels harsh. Find any color's exact opposite with the Complementary Color Finder, and read the full breakdown in our complementary colors guide.
Split-complementary
A split-complementary scheme keeps the energy of a complementary pair but softens it. Instead of the single direct opposite, you take the two hues on either side of the complement — 150° and 210° from the base.
| Role | Hex | Hue |
|---|---|---|
| Base | #3B82F6 | 217° blue |
| Split (+150°) | #F6513B | 7° red |
| Split (+210°) | #E0F63B | 67° yellow-green |
You still get strong contrast against the base, but the two accents also relate to each other, so the palette is easier to balance and less likely to clash than a raw complement. It is a great choice when you want a colorful, confident scheme without the visual tension of true opposites — common in editorial design, data visualization and playful brands.
Triadic
A triadic color scheme uses three hues spaced evenly around the wheel, 120° apart. The even spacing gives you maximum hue variety while staying balanced, so triadic palettes feel vibrant and lively without any one color dominating by accident.
| Role | Hex | Hue |
|---|---|---|
| Base | #3B82F6 | 217° blue |
| +120° | #F63B82 | 337° rose |
| +240° | #82F63B | 97° green |
Blue, rose and green is high-energy — think of bold poster art, kids' brands, or a flat-illustration style. To keep it from looking like a clown suit, let one hue lead (say 60% of the design), use the second as support (30%), and reserve the third for accents (10%). Muting the supporting colors a little also helps a triad read as designed rather than default.
Tetradic / square
Four-color schemes use two complementary pairs at once, which gives the richest palettes — and the hardest ones to balance. There are two common shapes.
Square spaces all four hues evenly, 90° apart:
| Role | Hex | Hue |
|---|---|---|
| Base | #3B82F6 | 217° blue |
| +90° | #F63BE0 | 307° magenta |
| +180° | #F6AF3B | 37° amber |
| +270° | #3BF651 | 127° green |
Rectangle (tetradic) uses two complementary pairs at unequal spacing — here 0°, 60°, 180° and 240° — so two hues sit closer together and two further apart:
| Role | Hex | Hue |
|---|---|---|
| Base | #3B82F6 | 217° blue |
| +60° | #AF3BF6 | 277° violet |
| +180° | #F6AF3B | 37° amber |
| +240° | #82F63B | 97° green |
With four hues in play, the old advice doubles down: choose one dominant color, keep warm and cool balanced, and don't use all four at full strength. Four loud colors fight; one lead color with three supporting accents sings.
Achromatic plus warm and cool schemes
Two more "schemes" are less about wheel geometry and more about overall temperature.
Achromatic
An achromatic scheme has no hue at all — pure blacks, whites and grays (0% saturation). It reads as clean, serious and timeless, which is why so much editorial and luxury design leans on it. In practice most "neutral" UI grays carry a faint hue to feel less sterile; the cool slate ramp below is tinted very slightly blue:
| Hex | Role |
|---|---|
#F8FAFC | background |
#E2E8F0 | surface |
#94A3B8 | border / muted text |
#475569 | secondary text |
#0F172A | body text |
A neutral ramp like this pairs with any accent color, which is why every scheme above also needs one.
Warm and cool
Splitting the wheel down the middle gives two families. Warm colors — reds, oranges, yellows — advance, feel energetic and grab attention. Cool colors — greens, blues, purples — recede, feel calm and read as trustworthy.
| Warm | Cool | ||
|---|---|---|---|
#EF4444 red | #10B981 emerald | ||
#F59E0B amber | #3B82F6 blue | ||
#FACC15 yellow | #6366F1 indigo |
A warm or cool scheme is really a constraint you lay over any of the others: an analogous warm palette, say, or a triadic palette that you nudge cool. Temperature is also a fast lever for mood — warm palettes read as energetic and urgent, cool ones as calm and dependable.
How to pick the right scheme
The same wheel serves very different goals, so start from the job, not the geometry.
For web and product UI, restraint wins. Reach for a monochromatic or analogous base for the interface, plus a single complementary accent for primary actions. That gives you a calm, readable surface where the one thing you want clicked actually stands out. Avoid triadic and tetradic as your core UI palette — they create competing focal points that make interfaces feel busy. (More on the full process in how to choose a website color scheme.)
For brand and marketing, you can be bolder, because the goal is recognition and feeling rather than dense legibility. Split-complementary and triadic schemes give a brand a distinctive, ownable palette while staying balanced.
For art, illustration and data viz, the four-color schemes earn their keep. When you genuinely need many distinguishable hues — categories in a chart, characters in a scene — square and rectangle palettes provide variety that still hangs together.
Whatever you choose, run the result through a contrast check before you commit, especially for text. A beautiful scheme whose text fails WCAG contrast is not finished.
Turning a scheme into CSS
A scheme is a handful of hues; a usable palette expands each hue into tints and shades and stores everything as variables. Here is a complementary scheme plus an achromatic neutral ramp, ready to paste:
:root {
/* Complementary brand pair */
--brand: #3B82F6; /* blue, hue 217° */
--accent: #F6AF3B; /* amber, hue 37° — complement */
/* Achromatic neutral ramp */
--bg: #F8FAFC;
--surface: #E2E8F0;
--border: #94A3B8;
--text: #0F172A;
}
.button-primary {
background: var(--brand);
color: #fff;
}
.button-cta {
background: var(--accent);
color: var(--text);
}
For full control you usually want a numbered ramp per hue, like Tailwind's 50–950 scale, so you can pick --blue-100 for a tint or --blue-700 for a border without guessing. Generate that ramp in OKLCH and the lightness steps stay perceptually even:
:root {
--blue-100: oklch(0.93 0.05 260);
--blue-300: oklch(0.78 0.12 260);
--blue-500: oklch(0.62 0.19 260); /* ≈ #3B82F6 */
--blue-700: oklch(0.46 0.16 260);
--blue-900: oklch(0.30 0.10 260);
}
You don't have to compute any of this by hand. Drop a base color into the Color Palette Generator, pick a harmony — monochromatic, analogous, complementary, triadic and the rest are one click each — and it builds the exact scheme, ready to copy as hex or CSS variables. That is the fastest path from "I like this blue" to a working palette.
Frequently asked questions
What are the main types of color schemes?
The core types are monochromatic, analogous, complementary, split-complementary, triadic, and tetradic (rectangle or square), plus achromatic and warm/cool groupings. Each is defined by how its hues are spaced around the color wheel.
What's the difference between analogous and triadic?
Analogous schemes use three neighbouring hues about 30° apart for a calm, low-contrast look. Triadic schemes use three hues spaced evenly 120° apart for high contrast and balance. Analogous harmonises; triadic energises.
Which color scheme is best for websites?
Most websites work best with a monochromatic or analogous base for the interface plus one complementary accent for calls to action. That keeps the UI calm while making the action color stand out.
How many colors should a scheme have?
A scheme defines two to four base hues. In a finished UI you expand each into a ramp of tints and shades, so a working palette is usually one brand color, one accent, and a neutral ramp — roughly five to ten usable tokens.
What is a split-complementary scheme?
A base color plus the two hues on either side of its complement, 150° and 210° away. It keeps the contrast of a complementary pair but is easier to balance because you avoid the harsh direct opposite.