Analogous Colors: How to Build Calm, Cohesive Palettes

Analogous colors sit next to each other on the color wheel, like orange, red-orange and yellow-orange, or blue, teal and green. Because they share so much of the same hue, they blend almost without effort. Analogous palettes look natural, calm and unified, which is why you see them so often in landscapes, food photography and quiet interiors.

Understanding Color Harmony: 7 Ways to Combine Colors covers analogous colors in a short section. This guide goes deeper into the decisions the rule leaves to you: how wide a slice of the wheel to use, which color should lead, and how to add the contrast an analogous palette lacks on its own.

What analogous colors are

An analogous scheme takes a base hue and adds its neighbors on one or both sides. Most schemes use three to five colors from one slice of the wheel. The ColorOverflow generator uses five: the base, two hues 15 degrees either side (shown as lighter tints) and two hues 30 degrees either side.

That pattern gives a slice 60 degrees wide. Every color is close to the base, so the palette holds together, and the two ends are far enough apart to feel like different colors.

How wide should the range be?

The width of the slice is the main choice you make with an analogous scheme. There's no fixed rule, but these ranges behave in predictable ways.

• Around 30 degrees: the colors are so close that the palette reads almost as one hue. It's very calm, close to a monochromatic scheme.
• Around 60 degrees, as in the generator: clearly different colors that still belong together. A good default.
• Around 90 degrees: more variety, such as yellow through orange to red. Still unified, but the ends start to feel like separate families.
• Much wider than 90 degrees: the ends begin to contrast with each other, and the palette loses the easy unity that makes analogous schemes useful.

Watch the temperature too. A slice of reds and oranges stays warm, and a slice of blues and greens stays cool. A slice that crosses the boundary, such as yellow-green or red-violet, mixes the two, which can be lovely but needs more care. Our guide to warm and cool colors explains why temperature changes the mood so much.

Choose a dominant hue

Analogous colors are similar in strength, so without a clear lead they blur into one another. Decide which hue carries the design and give it the most space. The others then support it in smaller areas.

• The middle hue is the usual lead. It sits between the others, so both neighbors relate to it.
• An end hue can lead when you want a direction, such as a palette that runs from a dominant blue toward green.
• Give the lead around 60% of the colored area, a second hue around 30%, and use the rest in small touches.
• Use the most saturated version of a hue for the lead or for small accents, not for both.

The problem: not enough contrast

The quality that makes analogous colors harmonious also makes them weak at separating things. Neighboring hues at the same lightness are nearly identical in contrast. In the generator's cool palette below, the base #0284c7 and its neighbor #417ed5 measure 1.00:1 against each other: different hues, no lightness difference at all. In the warm palette, #ea580c and #ef5849 measure 1.04:1.

Three ways to add contrast

1. Lightness steps

Add a very dark shade and a very light tint of the lead hue. They stay inside the same family, so the palette still feels analogous, but they give you readable text and clean backgrounds. A deep navy and an icy blue around a sky-blue palette are a typical example.

2. Neutrals

Off-whites, grays and near-blacks let the analogous colors breathe. Tint the neutrals slightly toward the palette's temperature: a warm cream for a red and orange scheme, a cool gray for blues and greens.

3. One accent from across the wheel

A small amount of a hue from the opposite side gives the eye somewhere to land, such as an orange button on a blue and teal page. Keep it small. If it grows beyond a few accents, the palette becomes a complementary scheme instead.

• White text on the deep navy #013550: 12.91:1.
• Navy #013550 text on the icy background #ebf5fb: 11.67:1.
• Navy text on the teal #41c8d5: 6.42:1.
• Near-black #111827 text on the orange accent #f47825: 6.38:1. White text on it is only 2.77:1.
• White text on the sky blue #0284c7 is 4.09:1, fine for large headings but short of 4.5:1 for body text.

Example palettes and where they work

Warm

Warm analogous palettes feel energetic and inviting. They suit food and drink, hospitality, autumn campaigns and anything that should feel friendly. They get intense quickly, so pair them with plenty of cream or warm gray. For text, dark warm tones work well: #1c1917 on the light orange #efab49 reaches 8.82:1, and white on the red #ea0c2f reaches 4.57:1, only just over the line.

Cool

Cool analogous palettes feel clean, calm and trustworthy, which is why they are common in technology, health and anything to do with water. The cobalt end is dark enough for white text (10.26:1), and the sea green end takes near-black text well (8.22:1).

Nature

Greens with yellow-greens and olives echo foliage, so they suit outdoor brands, gardening, sustainability and interiors with wood and linen. The neighbors here differ more in lightness than in the other two palettes (#4d7c0f and #659d4b measure 1.54:1), but that's still nowhere near enough for text. Forest green #177c0f on a warm off-white #f7f3ee reaches 4.84:1.

Analogous, monochromatic or complementary?

• Choose analogous when you want calm with some variety, such as a soft brand or a nature-themed site.
• Choose monochromatic when you want calm and maximum unity, and are happy to rely on lightness alone. Our guide to monochromatic color palettes covers it.
• Choose complementary or split complementary when one element has to stand out strongly.

Drag the base color around the Color Wheel Explorer to see how the analogous slice moves, and notice how much the mood changes between a warm slice and a cool one.

Quick checklist

1. Keep the slice around 60 degrees unless you have a reason to go wider or narrower.
2. Pick one lead hue and give it most of the colored area.
3. Add a dark shade and a light tint of the lead for text and backgrounds.
4. Use neutrals tinted to the palette's temperature.
5. If one thing must stand out, add a small accent from across the wheel.
6. Check text pairs for contrast. Neighboring hues alone almost never pass.

Analogous palettes often look better in a real layout than as swatches, because the lead color and neutrals take over most of the space. Try yours on a website, an app screen or a room before you settle on it.