# Analogous colors: the easiest route to a calm palette

[Canonical HTML page](https://gradiently.design/guide/analogous-colors)

Pick three neighbours on the colour wheel and you almost cannot go wrong. The skill is in giving them enough contrast to stay interesting and knowing when to break the calm.

## The short version

- Analogous colors are hues that sit next to each other on the colour wheel, such as blue, teal and green.
- Because neighbouring hues share so much, analogous palettes feel calm and natural, and they are the easiest palettes to get right.
- Analogous colours make the smoothest gradients, because the blend between neighbours stays saturated instead of turning grey.
- The main risk is sameness, which you avoid by giving the palette a wide range of lightness.
- A small accent from the opposite side of the wheel gives an analogous palette a focal point without breaking its calm.

**Analogous colors** are hues that sit side by side on the colour wheel: blue, teal and green, or red, orange and yellow. Because each shares some of its neighbour, they look like they belong together, the way the colours of a sunset or a shallow sea do. An analogous palette is usually three to five hues spanning a small arc of the wheel, and it is the most reliable route to a calm, unified look.

This guide shows how to build one, how to keep it from going flat and why analogous colours make the best gradients. If the wheel is new to you, read [how to use the colour wheel](https://gradiently.design/guide/color-wheel) first.

## What makes colours analogous

There is no strict cut-off, but a useful guide is that analogous hues fit within about a quarter of the wheel, roughly 90 degrees of hue. A tight arc of 30 degrees feels almost monochromatic. Wider than 90 degrees and the ends start to contrast, and the palette begins to feel like part of a rainbow.

| Span on the wheel | Example | Feels |
| --- | --- | --- |
| About 30 degrees | Blue, blue-indigo | Nearly one colour, very quiet |
| About 60 degrees | Blue, sky, teal | Harmonious with gentle variety |
| About 90 degrees | Indigo, blue, sky, teal | Rich, still unified |
| More than 120 degrees | Violet to green | Starts to feel like a rainbow |

How the width of the arc changes the character of an analogous palette.

- Indigo: #4f46e5
- Blue: #2563eb
- Sky: #0284c7
- Teal: #0d9488

Four neighbours spanning roughly 70 degrees, from indigo round to teal.

## Analogous colour palettes, with codes

The easiest way to see analogous colours is as gradients, because that is where they shine. Each of these moves through neighbouring hues and gets lighter as it goes, which keeps it from feeling flat.

- Ember: rust, orange, amber: `linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #fbbf24 100%)`
- Lagoon: navy, teal, mint: `linear-gradient(135deg, #1e3a8a 0%, #0e7490 50%, #34d399 100%)`
- Berry: violet, magenta, pink: `linear-gradient(135deg, #4c1d95 0%, #a21caf 50%, #f472b6 100%)`
- Fern: forest, olive, lime: `linear-gradient(135deg, #14532d 0%, #3f6212 50%, #a3e635 100%)`
- Dusk: ink, indigo, periwinkle: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #818cf8 100%)`
- Citrus: green, gold, orange: `linear-gradient(135deg, #4d7c0f 0%, #ca8a04 50%, #f97316 100%)`

Six analogous gradients. Each spans a short arc of hue and a long range of lightness.

Notice that the warm palettes (Ember, Berry, Citrus) and the cool ones (Lagoon, Fern, Dusk) each keep to one temperature. That is most of their calm. Warm analogous palettes feel close, lively and appetising, which suits food, hospitality and events. Cool ones feel spacious and steady, which suits wellness, finance and technology. [Warm and cool colours](https://gradiently.design/guide/warm-and-cool-colors) goes further into temperature.

Many of the best analogous palettes come straight from nature, because light passing through air, water or leaves shifts gradually through neighbouring hues. A photo of a shoreline, a forest floor or an evening sky is a ready-made source; [pulling a palette from an image](https://gradiently.design/guide/color-palette-from-image) shows how to sample one without picking muddy colours.

## Why analogous colours make the smoothest gradients

When a gradient blends two colours, every point in between is a mix of them. Mix two neighbours and the mix is simply the hue between them, still saturated. Mix two opposites and the mix cancels towards grey. That is why [complementary gradients](https://gradiently.design/guide/complementary-colors) need a helping stop in the middle and analogous ones never do.

- Neighbours: blue to teal: `linear-gradient(90deg, #2563eb 0%, #0d9488 100%)`
- Opposites: blue to orange: `linear-gradient(90deg, #2563eb 0%, #ea580c 100%)`

The first stays clean all the way across. The second passes through a dull, greyish middle.

This makes analogous blends a safe choice for backgrounds behind text, brand fields and large surfaces. For more on the dull middle, see [muddy gradients](https://gradiently.design/guide/muddy-gradients).

## How to build an analogous palette

1. **Pick a dominant hue** Start with the colour that matters most. It will cover most of the design.
2. **Add one or two neighbours on each side** Stay within about 60 to 90 degrees. Leaning to one side gives the palette a direction: towards warm or towards cool.
3. **Spread the lightness** Make one colour deep and one light. This is what stops an analogous palette from looking like one colour smeared.
4. **Vary saturation** Quieten the supporting colours a little so the dominant one reads as the lead.
5. **Decide on an accent** If the design needs a focal point, add a small amount of a colour from the opposite side of the wheel.

## Adding an accent to an analogous palette

The calm of an analogous palette is also its weakness: nothing stands out. When you need a button, a price or a key word to be seen, borrow a colour from across the wheel and use very little of it. Designers sometimes call this analogous plus accent. The accent works precisely because everything else agrees.

- Deep navy: #0c1a3a
- Blue: #1d4ed8
- Teal: #0e7490
- Pale mint: #99f6e4
- Accent: apricot: #fb923c

A cool analogous family from navy to mint, with one warm accent from the opposite side.

A portrait product announcement with a headline set on a calm, blended background

Analogous fields carry type calmly, which suits product and editorial posts.

## Common analogous palette mistakes

### Avoid

- Every colour at the same lightness
- An arc so wide it becomes a rainbow
- Mixing a warm lean and a cool lean without a plan
- Text in a mid-tone from the palette

### Do

- A deep, a middle and a light colour
- Three to five hues within about 90 degrees
- One clear temperature
- Text in the darkest or lightest colour

If you want even more unity, narrow the arc to a single hue and you have a [monochromatic palette](https://gradiently.design/guide/monochromatic-color-scheme). If you want more energy, move to a [triadic palette](https://gradiently.design/guide/triadic-colors).

## FAQ

### What are analogous colors?

Analogous colors are hues next to each other on the colour wheel, such as blue, teal and green, or red, orange and yellow.

### How many colours are in an analogous scheme?

Usually three to five hues within about a quarter of the colour wheel, with one dominant and the rest in support.

### Why do analogous colours look good in gradients?

The mix between two neighbouring hues is simply the hue between them, so the blend stays saturated and never turns grey in the middle.

### How do I stop an analogous palette looking flat?

Give it a wide range of lightness, vary saturation a little and, if needed, add a small accent from the opposite side of the wheel.