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.
Brittany Anas is a Denver, Colorado-based freelance writer. She is a regular contributor to publications including Apartment Therapy, Forbes and Men’s Journal and previously was a reporter at the Daily Camera in Boulder and The Denver Post. She worked three years as a federal background investigator before transitioning into a full-time freelance role.
