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.
On this page
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 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 |
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.
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 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 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 need a helping stop in the middle and analogous ones never do.
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.
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.
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. If you want more energy, move to a triadic palette.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
