Color harmony
Analogous colors, neighbouring hues, calm and cohesive.
Three to five hues that sit side by side on the wheel. The result reads as one family, which is why interfaces use it when nothing should shout.
Analogous palette
Neighbouring hues, calm and cohesive
Guide
What analogous colors are
Analogous colors are three or more hues that sit next to each other on the wheel, typically spanning about 30 to 60 degrees either side of a base: blue with blue-green and blue-violet, or red with red-orange and red-yellow. Because the hues share undertones, they never fight. The eye reads the group as one family with a direction, which is why the scheme appears wherever a design needs variety without tension.
The palette above starts from your base color and builds outward in both directions, giving the center hue plus its neighbours and a range of steps within each. Notice how differently it behaves from a complementary pair: nothing here is trying to win. Contrast has to come from somewhere else — from lightness, from size, from typography — and that constraint is exactly what makes analogous schemes feel calm rather than flat.
The risk is predictability. Three hues with shared DNA can blend into a single wash if they all sit at similar lightness and saturation. The scheme stays legible only when something separates the members: a light surface against a dark one, a pale tint carrying text and a deep tone carrying structure, or one member lifted in chroma to act as the accent the palette otherwise lacks.
When to use an analogous scheme
Analogous palettes suit interfaces where attention should stay on content: dashboards, documentation, product pages, and any screen with a lot of text. The lack of hue conflict keeps backgrounds quiet, so status colors, charts and calls to action can be introduced later and still be noticed — often by deliberately stepping outside the analogous range to borrow contrast from the opposite side of the wheel.
They also work well for themes built around a place or material: ocean blues into teals, forest greens into yellow-greens, dusk purples into warm reds. Because the hues share a light source in perception, photography and gradients drawn from the same family feel continuous rather than assembled.
Build the scheme by choosing the center hue first, then fixing lightness and saturation as constants while you move across the neighbors. That single discipline — hold two variables, vary one — is what makes the result look designed. When the group still reads as one color, spread lightness: keep the base mid, push one neighbor lighter for surfaces, and drop another for depth, then run the text pairs through the contrast checker before you commit.
Frequently asked questions
- What are analogous colors?
- Colors adjacent on the color wheel, usually within 30 to 60 degrees of a base hue — for example blue, blue-green and teal. They share an undertone, which is why they combine smoothly and produce low, harmonious contrast.
- How many analogous colors should a palette have?
- Three is the usual number: a base and one neighbor on each side. Five can work for larger systems, but the more hues you add, the more you need a lightness or saturation spread to keep them from blending into one wash.
- What contrast does an analogous scheme lack?
- Hue contrast. Since the hues are related, separation must come from lightness, saturation or size. If the palette needs a genuine accent, bring in a complementary or split-complementary hue for that one element and leave the rest analogous.