Understanding color psychology is a key aspect of creating a color palette that works well in digital design. While color is sometimes thought of as a purely aesthetic choice by some designers, it is, in fact, a key component of the psychological impact of a design on users, and as such, its UX.

A well-thought-out out color palette can elevate a design from “good” to “great” while a mediocre or bad color palette can detract from a user’s overall experience and even interfere with their ability to use a site or app.

While color theory in general is a complex subject, and the use of color in UX design covers much more than just creating a palette that looks nice (such as accessibility and the psychological effects of even different shades within the same hue); designers can gradually incorporate better use of color in their designs without needing to rethink their entire process. Once a designer has the basics covered, one of the most rewarding parts of color theory is learning to incorporate more unexpected colors into their designs.

Barclays uses a very specific website color scheme.

Though a little overused, a grey/white/blue color palette is very effective for financial sites because blue is most often associated with loyalty and trust in color psychology.

The Psychology of Color

Color theory and the psychological effects color can have on users is a complex and often subjective topic. But there are certain aspects that can be addressed on a more universal level.

Things like the common meanings of the main colors (primary, secondary, and tertiary), traditional color palettes, and cultural variations in color meanings are all fairly straightforward. Designers can easily learn these basics and apply them to their work. But there are finer points to be learned when it comes to using colors in UX design.

Color psychology is a complex aspect of color theory.

Basic color meanings can be easy to learn and remember, though more subtle meanings can also be put to good use in digital design. (Vandelay Design)

The emotional impact of interface colors shouldn’t be overlooked. And while some colors are “universal” in UX design (such as black, white and gray, at least one of which is used in virtually every good design out there), the colors they’re combined with can have a huge impact on a user’s perception.

Of course, the way in which color is used can also have a dramatic impact on how it’s perceived. For example, blue used as a primary color in a modern, minimalist design will have a very different feel than the same blue used as an accent color in a more complex, corporate design.

Zutano uses a gray and red website color scheme.

P&N Bank uses a bright red UI color palette.

Subtle differences in website color schemes have a big impact on the emotions the site evokes. Zutano and P&N Bank both use shades of red and white, yet their sites have entirely different emotional impacts.

Cultural Differences in Color

One issue designers tend to overlook is the cultural differences that can exist around different colors. For example, in many Western cultures, white is associated with things like purity, innocence, and hope. But in parts of Asia, white is associated with death, mourning, and bad luck.

Some colors have generally positive connotations regardless of culture (such as orange), while others, like white, vary greatly between different countries. This can certainly complicate a designer’s life when trying to create a design that will appeal to the largest possible audience.

It’s important that designers look at the cultural implications of their color palettes based on the intended audience for the product or website. If a product is going to target a worldwide audience, be sure to balance the colors and imagery being used to prevent negative cultural connotations. If a product will be primarily only targeting a particular culture, designers can pay less attention to the implications the chosen palette may have in other cultures.

Color psychology varies around the world, based largely on cultural associations.

Colors can have entirely different meanings in various cultures around the world. (Information is Beautiful)

Matching UX Colors to the Brand

Brand values should play a key role in creating a color palette. But they’re not the only important factor. Industry norms are also key, as are colors already being used by competitors. Using a color palette that is nearly identical to a brand’s primary competition is a great way to breed confusion and ensure the brand won’t stand out.

Granted, there are exceptions to this. Take, for example, McDonald’s and Wendy’s. Both are fast food restaurants that are in direct competition with each other. And both use a red and yellow color palette. However, looking at their logos, Wendy’s logo is primarily red with yellow accents, while McDonald’s is the opposite. Their packaging also uses these colors in different ways, further differentiating between the brands. Because of this, neither would be easily confused with the other, even if logos and other identifying marks were removed from their packaging.

Unexpected UI color palettes can go far to set a brand apart from its competitors.

Red is the color of danger and passion, but also excitement, which might explain why Virgin Atlantic uses it for their branding (along with purple, which implies luxury).

The first step to creating a brand color palette that supports the brand’s values is to understand the meaning of the various colors, and how making them lighter/brighter/darker/duller/etc. can affect them. Here’s a basic breakdown of what different colors mean:

  • Red — Red is the color of danger and passion, as well as excitement. It’s a very strong color and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic while darkening the hue to maroon makes it more subdued and traditional.
  • Orange — Orange is a very creative color that’s also associated with adventure and youth. It’s very energetic, too. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling.
  • Yellow — Yellow is happy, optimistic, and cheerful. It’s popular in designs for children and adults alike. More pastel hues are often used as a gender-neutral baby color, while brighter yellows are popular in creative designs. Darker shades of yellow become gold, which is associated with wealth and success.
  • Green — Green has varied associations. On one hand, it provokes feelings of wealth and tradition (particularly darker hues), while on the other it’s strongly associated with environmentalism and nature. Lime greens are often associated with renewal and growth.
  • Blue — Blue is most often associated with loyalty and trust. Brighter blues can be affiliated with communication, while duller and darker blues can be associated with sadness and depression. Blue is the most universally liked color in the world, which may explain why so many companies opt for blue shades for their branding.
  • Purple — Purple is another hue with varied meanings. It’s long been associated with royalty and wealth (since purple dye was rare in many ancient civilizations, it was reserved for royalty). But it’s also associated with mystery and spirituality. Purple can also evoke creativity.
  • Black — Black implies sophistication and luxury. It can also be tied to sorrow and negativity, however. Depending on the other UX colors being used alongside black, it can feel modern or traditional, formal or casual.
  • White — White is tied to purity, innocence, and positivity. White is also very popular in minimalist designs, due to its neutrality and simplicity. Like black, white easily takes on the characteristics of other colors it’s used with.
  • Gray — Gray has varied meanings, depending on context. It can be conservative and sophisticated or dingy and dull. It can be emotionless or moody. It can also be associated with sorrow and sadness.
  • Brown — Brown (which is actually a dark shade of orange) is associated with being down to earth and grounded. It’s also associated with nature and even coziness. And, of course, it can be affiliated with being dirty or dingy.

Knowing these basic color meanings gives designers a solid basis on which to build color palettes for any brand or product.

Color theory, however, is part science and part art. Just because a color is generally associated with a particular feeling or mood doesn’t mean it can’t be perceived in other ways by combining it with different colors, altering the exact hue, or varying how it is used among other design elements.

Tapping into established color psychology is a solid way of enhancing UX.

This plant-watering app concept uses a nice shade of green for its primary color, with blue, yellow, and red accents used in ways that will make sense to users. (by Amy Holley Hirst)

Using Unconventional UX Colors

Unconventional use of UX colors is a great way to set a brand apart. And while it takes more finesse than simply combining any old colors a designer feels like combining, it’s not that difficult to learn how to use unexpected colors in UX designs.

Accent colors are the easiest place to start when it comes to adding unconventional colors into a design. For example, a law firm website might use a traditional color palette of navy blue and gray. But add in some lime green accents and suddenly the design is set apart from the sea of other law firms with navy blue and gray websites. Or look at this example from Hogan Lovells, which uses a white, gray, and lime green color palette to create a modern website that definitely stands out from other legal industry sites. It would appeal to a younger, more modern crowd than your average legal site.

An unexpected website color scheme

Hogan Lovells creates a modern design with a very fresh color palette.

Berdan Real Estate is another site that uses an unexpected color palette. The real estate site uses shades of yellow and peach, both of which are much more energetic than your average property site (where large swaths of blue, red, and green dominate).

Another unexpected website color scheme on this real estate site

Berdan Real Estate eschews the typical corporate color schemes in favor of something fresh and warm.

Insurance isn’t generally thought of as a modern, groundbreaking industry, but that doesn’t mean their designs can’t be. Lemonade’s website uses a gray and white color scheme with fuchsia accents. It’s completely unexpected in an industry that isn’t known for taking risks.

A completely unexpected UX color scheme on the Lemonade website

Lemonade's choice of fuchsia in their branding is entirely unexpected in the industry.

There is a multitude of other examples of unconventional UX colors used in practice around the web that can be used for inspiration.

The 60-30-10 Rule

The 60-30-10 Rule is a simple theory for creating color palettes that are well-balanced and visually interesting. The idea is that one color—generally something fairly neutral (either literally or psychologically)—makes up 60% of the palette. Another complementary color makes up 30% of the palette. And then a third color is used as an accent for the remaining 10% of the design.

This method makes it much easier for designers to start experimenting with unconventional color palettes without stepping too far outside the expected norms within an industry or brand. Adding a pop of some unexpected hue can elevate a design that otherwise fits within what is expected of a particular company. It can also be the first step toward creating a brand palette that is much more forward-thinking than its competitors, thereby setting the brand apart and making it more memorable.

An excellent example of the 60-30-10 rule in web design color theory

Clarity Stress Management's website showcases the 60-30-10 rule nicely, with 60% purple, 30% white, and 10% magenta in the header and footer.

Conclusion

While color theory is a complex subject, it isn’t particularly complicated to learn the basics. From there, designers can build on their knowledge to create more varied and sophisticated color palettes for their designs.

A well-designed color palette, particularly one that includes some unexpected hues, isn’t merely an aesthetic choice. It can have significant psychological effects on users, which UX designers should capitalize on in order to create better experiences.

• • •

Further reading on the Toptal Design Blog:

Understanding the Basics

Why is it important to learn color theory?

Learning the psychological impacts of colors and their ability to influence emotion to create better experiences for users is a key aspect of becoming an exceptional designer.

Hiring? Meet the Top 10 Freelance UX Designers for Hire in September 2018
Don't miss out.
Get the latest updates first.
No spam. Just great articles & insights.
Don't miss out.
Get the latest updates first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.

Comments

Dado Motta
Hello there are mistakes here. Black, white and grey are NOT colors. Please arrange that to be correct. Moreover the first image of colors have some missleading infos like yellow on exciting instead of happinnes. I invite to meet my work, I study colora quite a lot and can contribute with work.
Cam
Ah, yes, one of the most debated aspects of color theory: whether black, white, and gray are "colors". Additive (where color is light) color theory says that white is a color (as it is a combination of all colors) while black is not (as it is the absence of color). Subtractive (where color is pigment) color theory will say that black is a color (as it is created by combining all of the colors) while white is not. In practical discussions about color theory, however, it makes sense to include black, white, and gray in the general discussion of color, as they are all used as colors. And I'm sorry, but I'm not sure which image you're referring to when talking about yellow?
Ilen Vantev
Reading this reminded me of photography.My 3d art design guru advised me on getting photography course and doing a few shots(quite a lot actually) to achieve an understanding of composition and color in real life and then translate that in my virtual work,from there I had to learn what actually colors do to(sounds violent) the user when using an app or interacting with in game model or effect.However when talking to real life examples of interaction with colors and what they feeling or message they give to the user your color palette with the feelings isn't quite accurate.Computer representation of the same colors combined with different shapes translate to completely different feelings.You can even see that in the example sites you show.Shapes matter.When doing virtual representations of my work I always focus both on shapes and colors,because you can't separate them,they compliment each other in a way that enhances the user experience to an almost physical level.Example - If you are making a 2 ton vehicle(lets say a car) and place the same restrains on the two variants that you are working on:(because of course you will make two or more options for the client) height,weight,engine power,four wheels,6 windows AND a color -orange! and you are free in choosing only one thing,shape applying fluid lines on the first design and more aggressive lines on the second you will end up with two very different vehicles that will sell to two very different groups of people.The first (the fluid one) will be more sensitive,more "out there" sedan with a lot of power,but in the same way will be more natural in the environment around it,it will have a feel of speed and will be "gliding" on the road.With the second design you will end up with an aggressive truck like machine more suitable for road repairs than a racing track.Remember the color is Orange and in your color palette it translates to desire and cheerfulness and is quite accurate for our first model,but changing only the shape of the car we change the impact of it on the customer and now we are saying "Danger!Road Repairs!".That example is a real world representation of the fact that we can't separate colors from shapes and making an article about only one of it hides a whole world of expressions that we should explore and use in our work.
roflobster
Interesting read. Although the you make an extremely informed case for color’s role evoking emotion in UX, color appears to have highly subjective meanings across cultures. You forgot to mention that color is not a very good design tool—in that it’s not particularly inclusive. Intuitive symbols, labels, and text-equivalents for non-text things are far better ways to communicate to people, including the color-blind, people with visual impairment, the blind, and the neuro-divergent. For example, if the state of an error in a form input is a red border and text, how will the colorblind understand this without also at least aerror icon or help text? Whole delightful to those who can see it, color is no hero.
comments powered by Disqus