Analogous colors (and how to use them in design)

4 min read
Brittany Anas
  •  Aug 7, 2020
Link copied to clipboard

The next time you’re outside, play a game of eye-spy: Notice how a sunrise paints the sky shades of red, red-orange, and orange. Or watch a peacock strutting at the zoo with its vibrant blue-green feathers. Study succulents, noting their excellent use of blue, blue-green, and green hues.

Ever wonder why these color groupings seem so harmonious? Well, these sights are all natural occurrences of analogous color schemes, or a scheme with colors next to each other on the color wheel. Because they’re especially pleasing on the eye (and easy to come up with), designers often draw inspiration from these color schemes for product designs.

How to create an analogous color scheme 

Picking any color at any point of the wheel and note its direct next-door neighbors, to either the right or left. And, there you have it: An analogous color scheme. It’s like taking a small, three to five hue-slice out of the color wheel. One way to pick out an analogous scheme is to start with a primary color (i.e. red, yellow, or blue) and use the secondary and tertiary colors as accents.

Analogous colors examples

Analogous colors means the color grouping has similarities. These color scheme types have close relationships to one another.

Here are a few examples of analogous color schemes:

  • Yellow, yellow-green, green
  • Violet, red-violet, and red
  • Red, red-orange, orange
  • Blue, blue-violet, violet

A notable example of an analogous color scheme is Dropbox’s recent redesign. Their scheme uses shades of pink, purple, and blue.

Dropbox uses bold colors that feel like they shouldn’t work together—but they do!

Analogous colors palette

In the most traditional sense, an analogous color palette is three colors. But it could go up to four or five colors. Designers can rely on an analogous palette to give their designs a temperature. A warm analogous color palette with four colors would be composed of red, red-orange, orange, and yellow-orange. A cool palette would include blue, blue-green, green, and yellow-green.

The Velocity UI kit in an analogous color palette

Want to see how an analogous color palette looks like in a test UI? Try Muzli’s Colors tool.

Analogous colors in art 

Not only can you spot analogous color schemes in nature, but also in the work of famous artists who turn to serene outdoor settings as muses.

For example, Vincent Van Gogh used a cool analogous color scheme of green, blue-green, blue and blue-purple in his “Irises in a Vase” painting. Known for having a knack for color, a cool analogous color scheme can also be picked up on in his oil painting, The Olive Trees. For another case study in analogous colors, take a look at Claude Monet’s The Water-Lily Pond painting.

Monochromatic colors 

Analogous color schemes create a slightly monochromatic look since they use colors similar to one another. However, a monochromatic scheme relies on a base color with different shades, tones, and tints to create a visually cohesive look. Designers often use a monochrome palette when they want to create a simple, clean aesthetic—perhaps because a page is information-heavy and more colors would make it look busy.

Analogous colors consideration

When deciding on an analogous color scheme, it’s always important to consider accessibility. For example, certain analogous color palettes may be exclusionary to those with color blindness or color vision deficiency (CVD).

“Don’t just rely on colors to do the work,” Luis Gonzalez, senior brand designer at InVision says. “You may leave behind a good portion of your users, and that’s just not a good user experience.

Collaborate in real time on a digital whiteboard