
Cameron Chapman
Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.
A well-thought-out color palette can elevate a design from “good” to “great” while a mediocre palette can detract from a user’s experience and even interfere with their ability to use a site or app.
A well-thought-out color palette can elevate a design from “good” to “great” while a mediocre palette can detract from a user’s experience and even interfere with their ability to use a site or app.
Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.
Understanding color psychology in UX design is a key aspect of creating a color palette that works well in for users. 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 UX 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 UI design 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 UX color best practices 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.
UX 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.
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.
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.
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.
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:
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.
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.
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).
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.
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 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.
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.
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.
Proper color contrast is an important accessibility concern. In addition to accessibility, it also has an impact on user behavior (such as additional contrast making CTAs stand out more and influencing users to click more frequently).
There are 216 generally accepted “web safe” colors widely used. When computer displays were limited to 256 colors, “web safe” colors could be relied upon to render the same across major browsers. Modern devices can now render millions of colors, so designers are no longer restricted to their use.
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.