Types of color schemes: the 7 rules and where each fits in UI

Summary

A color scheme is a rule for choosing hues that relate to each other on the color wheel. There are seven that matter — monochromatic, analogous, complementary, split-complementary, triadic, tetradic and square — and every one of them is a rotation: take a seed hue, add some fixed angles, and the rule has picked the rest. That is the useful thing to understand, because it means the schemes are not seven aesthetics to memorize but one operation with seven settings, and the choice between them comes down to a single question: how many colors does this interface need to tell apart, and how much contrast should there be between them? This guide gives each scheme its angle, its strength, its failure mode and its interface use, then shows how to pick one.

• Every scheme is a seed hue plus fixed rotations on the HSL wheel.
• Fewer hues, less contrast: monochromatic → analogous → split-complementary → complementary is a contrast ladder.
• More hues: triadic (3), tetradic and square (4) are for categories, not emphasis.
• Most product interfaces want split-complementary; most charts want triadic.

The wheel, briefly

Design tools work in HSL — hue, saturation, lightness. Hue is an angle from 0° to 360°: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, magenta at 300°. A scheme fixes the hue of every color; saturation and lightness stay yours to tune, which is where a generator's output turns into a palette. Every scheme below lists its rotations, and the palette generator shows five of them side by side on one seed.

A scheme is also not a palette. An interface needs a background, a surface, a text color, a muted tone and a border as well as its brand hues, and those should be near-neutrals tinted toward the primary — not extra hues. The semantic palette guide covers the roles; here we are only choosing the hues.

1. Monochromatic — one hue

Rotation: none. Every color is the seed hue at a different saturation or lightness.

Strength: it cannot clash. A monochromatic palette is unified by construction, reads as calm and expensive, and is trivially accessible because contrast comes entirely from lightness.

Failure mode: it cannot signal. With no second hue there is no natural accent, no obvious success/error, no way to make one button jump except by making it darker.

In UI: the right scheme for a tool whose content brings its own color — a dashboard full of charts, a photo editor, a map — and for brand-heavy marketing where one color is the identity. The wrong scheme for a form-driven product that needs a status vocabulary. Tints and shades are the whole palette: the color pages show five of each for any named color.

2. Analogous — neighbors

Rotation: the seed, −30° and +30° (a wider spread of ±60° is also common).

Strength: harmony. Adjacent hues share undertones, so an analogous palette feels like one material — blue, blue-violet and violet; yellow, yellow-orange and orange.

Failure mode: no contrast. The three hues are so close that none of them stands out; emphasis has to come from weight, size and lightness instead.

In UI: good for immersive, editorial or "brand as atmosphere" interfaces, and as the background family of a palette — a blue product whose surfaces lean teal and whose shadows lean violet. Plan to earn every accent from lightness. The generator's analogous rule pushes the accent's lightness up for exactly that reason.

3. Complementary — opposites

Rotation: the seed and +180°.

Strength: maximum contrast. The complement is the color that makes the seed look most like itself, and against a page that is otherwise one hue family it is impossible to miss.

Failure mode: vibration. Used at equal weight, two opposites fight along every edge; used as text on each other they fail contrast while looking "high contrast". And a pair offers no room for a third signal.

In UI: one dominant color plus one scarce accent, roughly 80/20. It is the emphasis scheme. The complementary guide covers the weighting, the text rule and the dark-mode adjustments in detail.

4. Split-complementary — the complement's neighbors

Rotation: the seed, +150° and +210°.

Strength: nearly the contrast of a true complement with far less tension, plus two accents that are related to each other. The seed and its two partners form a narrow triangle rather than a line.

Failure mode: mild — the two accents can blur into one if they are too close in lightness, and the scheme is loud if all three are fully saturated.

In UI: the scheme most products actually want when they think they want complementary. It gives a primary, a secondary action color and a highlight, which is what a real interface has slots for. The generator's default rule for the color reference pages is split-complementary for this reason.

5. Triadic — the equilateral triangle

Rotation: the seed, +120° and +240°.

Strength: distinctness. Three hues that far apart read as three genuinely different categories, and they separate for most forms of color-vision deficiency when their lightness is staggered.

Failure mode: no hierarchy. Three equal, saturated colors cancel each other's emphasis and the page reads as a flag.

In UI: the data-visualization and category scheme — chart series, tags, kanban columns, status pills. Used as a brand scheme it needs 60/30/10 weighting. The triadic guide covers choosing the lead hue and checking the trio for deuteranopia.

6. Tetradic (rectangle) — two complementary pairs

Rotation: the seed, +60°, +180° and +240° — two complements, 60° apart.

Strength: the richest scheme, with a warm pair and a cool pair, and four distinct signals.

Failure mode: the hardest to balance. Four saturated hues at equal weight is chaos; even at uneven weight the two pairs compete unless one is clearly the lead. It is also sometimes called double complementary.

In UI: four-category data (four chart series, four priority levels) and little else. Pick one pair as brand and secondary, and use the other pair only as data or status colors at reduced saturation.

7. Square — four at right angles

Rotation: the seed, +90°, +180° and +270°.

Strength: like tetradic but evenly spaced, so all four are equally distinct — the four-color equivalent of a triad.

Failure mode: the same as tetradic, more so: four evenly loud colors with no natural lead.

In UI: four-way categorization where no category outranks another. Reduce three of the four to a muted version and keep one as the primary if the same palette must also carry the brand.

Choosing a scheme

The schemes line up on two axes: how many hues you need, and how much contrast you want between them.

Three questions settle it.

How many things must never be confused? One (the call to action): complementary or split-complementary. Three or four categories that must stay distinct: triadic or square. None — the content brings its own color: monochromatic.

Does the scheme need a status vocabulary? Error, success and warning are red, green and amber for everyone, whether you planned them or not. A blue-led split-complementary leaves those hues free; a red-led anything collides with them. Check the partners a rule produces against the status colors you will need before committing. Every page in the named-color reference lists the complement, split, triadic and analogous partners of a color, so the collision is visible before you build.

How much personality is wanted? Monochromatic and analogous are quiet; complementary is bold; the four-hue schemes are exuberant. Match the scheme's natural volume to the product rather than fighting it with saturation.

Turning a scheme into a palette

Whatever the rule, the same three steps make its output usable.

Assign roles, not equal shares. One hue is the primary and carries most of the color; the rest are secondary and accent at decreasing area. A generator that hands you three swatches has not made this decision — the palette generator does, by naming the roles and tinting the five neutrals toward the primary.

Tune saturation and lightness per role. Desaturate the accents that should not compete; stagger lightness so every pair separates in grayscale; never place two brand hues as foreground and background of each other.

Derive dark mode, do not redesign it. Hold the hues, lift the lightness, check every pair. The theme generator does this for the eight roles and emits the light and dark tokens together, so the scheme you chose survives the switch.

Q&A

Question: How many types of color schemes are there?

Short answer: Seven are in general use: monochromatic, analogous, complementary, split-complementary, triadic, tetradic (rectangle) and square. All are rotations of one seed hue on the color wheel; they differ in how many hues they produce and how far apart those hues sit.

Question: What is the difference between a color scheme and a color palette?

Short answer: A scheme is the rule — which hues relate to which. A palette is the finished set of specific colors, with saturation, lightness and roles decided, including the neutrals for backgrounds, text and borders that no scheme supplies.

Question: Which color scheme is best for a website or app?

Short answer: For most product interfaces, split-complementary: a primary plus two related accents, with high contrast and little tension. For dashboards and charts, triadic. For a brand that is one color, monochromatic. Complementary is best when one element must dominate.

Question: What is a tetradic color scheme?

Short answer: Four hues made of two complementary pairs — the seed, +60°, +180° and +240° — forming a rectangle on the wheel. It is the richest scheme and the hardest to balance; it suits four-category data more than branding.

Question: What is the easiest color scheme to get right?

Short answer: Monochromatic, because contrast comes only from lightness and nothing can clash. Its cost is that it cannot signal — add one accent hue and it becomes a complementary or analogous scheme, whichever direction you rotate.