In my previous post about mood boards, I explored how to design the feel of a website. Emotions are a powerful force in determining your site’s user experience (UX) and effectiveness. A key component in your website’s feel – and some might argue the most readily noticeable – is color. We all have a favorite and before we can even read, we’re taught names and cultural associations for each. But choosing a color palette for a website that inspires the right emotions and works well with existing branding or content can be a challenge.
Choosing A Color Palette
Understanding basic color theory – how colors interact in design – is a good tool to have when building a color palette that works. By no means do you need to be an expert, but even if you’re using an online color palette generator it can be helpful to understand the logic and psychology behind color. Considering it only takes 90 seconds for a user to form their opinion of a product and that 62-90% of that is determined by color, your website needs the right color palette to make the right first impression.
You never want to choose colors randomly or just because you like them. Neon fuchsia may be your favorite color but used as the primary color on a website it may make users’ eyes hurt.
Deciding on a color palette requires you consider the following:
- Colors in your existing branding that must be included. Even when going for brand consistency, you may still need to slightly alter a brand color for web accessibility reasons or add secondary colors not in your brand guidelines to produce a good palette.
- The cultural meanings of colors for your user base. Colors have different meanings in different cultures around the world so if your website will be used by a foreign or multinational user base this is important in order to avoid problems with user opinion.
- The industry or category your website falls into. Certain industries tend to prefer certain colors for a reason. Blue is associated with healthcare, red with food, and green with real estate and the environment. It’s always an option to buck trends but ask yourself if you have a good enough reason to risk it other than just being different.
- Best practices for color schemes. These are tried and true approaches for color schemes that include monochromatic: different tones of the same color, analogous: colors right next to each other on the color wheel, complementary: 2 colors on opposite ends of the color spectrum, compound: 2 colors on both sides of the opposite hue, and triadic: 3 colors equally space around the color wheel.
- Color contrast and other accessibility needs. It’s important ethically and legally to be inclusive in your website design, which includes considering the needs of users with color blindness and other visual disabilities.
Color Palette Example
I created the above color palette for a redesign project I’m working on for Scratch Baking’s website. You generally only need 3 colors for a website’s color palette, but I’ve included multiple hues of the same color to give myself options for finding just the right combination in actual designs.
Scratch’s logo, as seen in the lower right corner of my palette, features white, black, a light gray, yellow, and an orange-yellow. I drew from this first to create my color palette. Although, yellow and orange are not always the most popular colors they do have certain positive emotions associated with them that would go well with the mood I’m trying to set: happy, exciting, friendly, fun, and warm.
Yellow is associated with happiness and fun. Think about sunshine and yellow smiley faces. However, too much of this color is known to nauseate people so it will need to be used with some moderation in my design.
Orange is associated with low prices, which can communicate either affordability or cheapness and low quality. However, orange is also associated with energy and playfulness. The font and iconography in Scratch’s logo already communicate a playfulness in their approach to business so orange elements in their website could work well for the mood.
Red can symbolize danger, but it’s also associated with passion. Scratch Baking is certainly passionate about what they do, but I chose the color for other reasons. First, Scratch’s storefront is red and is increasingly becoming as synonymous with their visual branding as their logo.
Second, although blue is the most popular color for websites overall, it is not so for food-related ones. Color psychology theorizes that because very little food is naturally blue, we associate blue with poison. Dieters have even been known to eat off blue plates to decrease how much they eat. Red has been found by and large to be the most popular color for restaurant logos.
The third reason I included it is that grouped with yellow and orange, red creates an analogous color scheme, as shown in the Paletton color generator above. Because of its nature of alerting people or making them anxious, red may only be used as a secondary color to draw attention to elements such as buttons or calls to action.
I included a number of grays hues as well as black because these neutral colors are important for adding balance to your website design and should not be forgotten, especially when using brighter colors like I am. Bright primary and secondary colors drive higher conversion rates, but too much of them can overwhelm users and drive them away.
Finding Just the Right Combination
As you can see there’s more to choosing a color palette for your website than may be apparent at first. This is both an art and a science and even with all the guidance I’ve provided here this task may still seem amorphous. If all else fails listen to your emotions. When you find the right palette it’s likely it will just feel right.
More in the Web Design Essentials Series
Resources
Chapman. C. (2010, January 28). Color theory for designers, part 1: The meaning of color. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
Colors Tutorial. W3Schools. Retrieved from https://www.w3schools.com/colors/
Schaferhoff, N. (2019, December 18). 7 rules for website color schemes. Website Setup. Retrieved from https://websitesetup.org/website-color-schemes/
Smith, J. How to use psychology of color to increase website conversions. Neil Patel Blog. Retrieved from https://neilpatel.com/blog/psychology-of-color-and-conversions/?lang_geo=us
The most popular brand colours in each industry and their impact on consumers. Digital Synopsis. Retrieved from https://digitalsynopsis.com/design/logo-colour-branding-psychology-industry-specific/
