Color is a powerful force in the hands of a designer. It draws your eye, evokes emotion, and communicates meaning. To give you an idea of how important color is, in a widely cited study titled The Impact of Color on Marketing, researchers discovered that for some products, 90% of snap decisions people make about products could be based on color alone.

So effectively using color is important to designs. But coming up with different color combinations is also hard. Each color has its own meaning, and there are an infinite number of combinations out there.

This article is designed to serve as a guide to help you come up with color palettes for your designs. It encourages you to explore more with color, which will help you develop an intuitive sense for good color combinations.

As you explore more with color, you’ll develop an intuitive sense for good color combinations.

Choosing a color palette

4Vr3RzSwaQ1-6onWD2zcDMX9D0bEBvqX81MB
Pretty fly for a color palette

Sometimes a color palette is the result of sudden inspiration. But most of the time, it comes from taking a systematic approach.

Identify purpose

Before doing anything else, first identify the purpose of your design. Good design aligns its color palette with its purpose.

Ask yourself the following questions:

  • What is the message that you want to convey with your design?
  • What is the purpose of your design? To be informative? To convince?
  • What emotions do you want your design to evoke?

The purpose of your design should serve as a guide for you as you choose your color palette.

Identify your audience

iHlvcEhILuDGFSslHB5DLzpC7MggJ37GDIke
Who is your audience and how does that affect your design?

People perceive colors differently. As Fairchild put it, color is a psychological phenomenon that arises within the observer. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences. As such, in order to understand how people will react to your design, you need to identify your audience.

While some meanings of color are universal across audiences, others are not. Green universally represents nature as it’s the color of vegetation. However, a color like red is interpreted differently across cultures. In the western world, red is associated with fire, violence, and warfare. It is also associated with love and passion. However, countries like China associate red with prosperity and happiness.

yMZJ9L1BR5nltLn-3RLwa7UPV-DzkVPcfEQQ
Chinese red envelope

Because colors have so many different meanings, it’s important to match the mental color models you have as a designer with the ones of your audience.

To read more about what colors mean across different countries and demographics, check out The Psychology of Color in Marketing and Branding and The Meaning of Color.

Review color theory

When choosing a color palette, it’s sometimes helpful know a little color theory. Color theory is a logical structure and practical guide for mixing colors. It encompasses everything from the color wheel to the meaning of individual colors.

A good primer is A Comprehensive Guide to Color Theory for Artists by Draw Paint Academy and Color Theory 101 by Hubspot. You can read about an interesting application of color theory in Why Is Facebook Blue? The Science Behind Colors In Marketing.

Find inspiration

Sometimes it’s hard to visualize the right color palette for your design. That’s okay, great artists steal. Or rather, they take inspiration from other artists.

The usual suspect for color palette inspiration are sites like Dribbble and Behance. If you want to find color inspiration for a specific design style like material design, you can use a site like MaterialUI. The flat design equivalent can be found at FlatUIColors.

Those sites are useful, but try looking at designs that come from outside of the specific medium you are designing for. Doing so will help you come up with unexpectedly unique and pleasing color palettes. As an example, you could look at interior designs.

D-mR52ofRLzF2z0V3tk2LB8k32thNJnoew2a
Interior designers use color to bring spaces alive

If you want something different, look for color inspiration in the design of other cultures. For example, Korean music video set designs are known for their colorful and eye catching color palettes. Each frame can serve as a source of inspiration.

AqgFty5oA2n95B18wrEMC1EeGtRoIlTDAEdE
Set design is a great source of inspiration

You don’t have to go to Korea to find color inspiration. It’s everywhere, including your daily life. Next time you go out, stop to appreciate the colors around you.

M2LBKRR3cgX6pEWOBKNXjHeHcLdvMQ-d0J7A
Color inspiration is everywhere, including your daily life

When you find something that inspires you, create a color palette for it. You can use the eye dropper tool in your favorite design program to tease out a color palette and make adjustments if necessary.

Establish a design system

A design system, sometimes called a style guide, is a framework that encapsulates all the elements that go into your design. This includes everything from buttons to typography. Consider things like what kinds of buttons you will use and what your navigation bar looks like.

For an example of a design system, check out the design system of Salesforce. For even more examples, here is a list of 50 Meticulous Style Guides Every Startup Should See Before Launching.

VXKabacEytJeuIMKsujDxBJ2bKMVBsE2JIDX
The design system of MashCreative

It’s helpful to establish a design system before choosing a color palette, even if it’s just a rough sketch. Doing so will give you an idea of what elements you have and how your colors could apply to them.

When choosing a color palette for your design, it’s best to stick to the KISS (Keep it simple, stupid) principle. The fewer the colors, the better. For most design systems, the following structure is a good start:

  • Background
  • Primary accent
  • Secondary accent
  • Error color
  • Success color

The primary color is the color you most often use for important buttons and accents. For many companies, this is also the color of their logo.

u8iAunxwa6s91VK9wTXuNcohHPtk4V7OmMKs

The secondary color is the color you use to differentiate secondary actions from primary ones. For example, primary and secondary buttons. Error and success colors, typically red and green, convey design states. For example, success or error notifications.

WE39cl1hOgORpKSAE0tHuzC4oVR8JgrfBYkF
Design states

Choose a color palette

Now that you are armed with inspiration and a rough sketch of a design system, it’s time to choose a color palette.

For a basic color palettes, I like to put my colors side by side, just like an artists would for their paint palette.

RsRw3m5vv1B3WcyXjONdJ2qGegF9xJorS63A

This is the time to take all your color inspiration and create color palettes out of them. The more the better. Don’t be afraid to experiment with colors on your own as well.

When narrowing down your color palette options, think back to the first two sections where you identified the purpose and audience of your design. Ask yourself the following questions:

  • What colors are accessible?
  • What colors have visual impact and draw your eye?
  • Do you need a light or dark color scheme? What time of the day will people use your product?
  • What mood do you want your design to convey? Does any one color palette you have do this better than the others?

As I mentioned in the last section, colors will have different roles in your design system. This also means that each color caries a different weight in your system. For example, your background colors will be used more often than accent colors.

5C56PM48lVbztTeUuqrItBalxXbqZTmIP0-F

Because of this, it’s sometimes a good exercise to create a throwaway design composed of shapes of different sizes, with each size roughly equaling the frequency of occurrence and average surface area of the color on a given page.

As an example, here is Invision’s color palette.

bSPnQaKFLiJ-w9bBUiRt1-JNkRZAvQvNtzfe

A geometric representation could look something like this.

3FUwp9v4r3a05tPrRQsfzy-6hImCAYkMu88z

Applying color palettes

To give you an idea of how to apply colors to design systems, let’s take a look at Airbnb. Airbnb’s primary color is Rausch, named after the street the company originated from. Kazan serves as a secondary color and the two grays are used as backgrounds colors.

not-found
Airbnb’s brand colors

For most pages, Airbnb uses foggy grey as a background. You can see that they use the rausch as their primary color to accent important actions like requesting to book a listing.

EhH9CuLoiyDnITsafXMcgeWdIChf54SPrd41

Kazan, the turquoise color, is used to catch and engage your eye. Notice how it compliments the primary color.

QhUpRV9j7hZClyrTSkOUoS5FJCRSr0ZyXGLv

For error messages, Airbnb uses a light red, arguably a shade of rausch. The red, along with the exclamation mark, immediately draws your eye and notifies you of the state of the system.

LWmLXQgOhxYIhn27fVqNGipXTRB-Gij5TugG

Start off without any color in your design. Focus on layout and placement of elements. After you’re satisfied with what you have, then you can start applying your color palette to your design.

Ge4A3PKVnUARYoEwCipG0TH3xc-VLVakpXX4
Start off without color and slowly add from there

Think of visual hierarchy in your design. Consider what design components you want to highlight and assign the appropriate color. Also, consider using different shades of your colors for things like hover and click states.

Wrap up

Color is all about experimentation and iteration. If you want to become better at working with color, the only answer is to do more work. Think of color as an additive. If you have the layout and functionality of your design down, then you can experiment with as many color palettes as you want.

Learning how to design with colors is infinitely valuable to a designer. As you get better at picking color palettes, you develop the ability to visualize colors combinations on a design before even touching a design program.

I would love to know know how you work with color. What’s your process? Feel free to leave a note or Tweet to me.

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.

WfimEhpt4q--fXSfg-F129isTiOnjpDFPXSM
O6mJ7U7XddtqaAWy3ndLB9NAzeDUuAgKVCTY