How To Choose A Color Palette For Your Brand’s Website

As one of the most prominent features of your site, your color palette plays a major role in fostering user interest and engagement. In fact, about 42% of shoppers base their opinion of a website on overall design alone. To help you create a successful color palette that echoes your brand identity and creates a meaningful connection with your site visitors, we’ve put together a quick guide to get you started. 

Start With Your Branding Guidelines 

You’ve worked hard to cultivate your brand identity, which is why you should draw from your branding guidelines document as a starting point for your site’s color scheme. Note the colors that are used in your guidelines and your logo, and begin to consider which colors would work well across your site. Marrying your brand image to your site is an important step of this process; brand recognition increases by 80% when the right colors are used. This is directly linked to consumer confidence, and could be the difference between a successful sale or a website bounce. 

Create A Mood Board 

Creating a mood board can help you visualize the look, feel, and color scheme of your site. Mood boards allow you to “test out” a variety of color schemes by combining them with other visual elements of your site like your logo, photography, and icons. At this stage, it’s also a good idea to conduct a competitive analysis to make sure your ideal colors differentiate you from your direct competitors.

Experiment With Your Color Palette 

With your branding guidelines and mood board in mind, use some tools to create a few color schemes. Start by inputting your brand’s primary color into Adobe Color. The free online tool will automatically generate a palette based on a variety of color harmony rules. Once you’ve found a few options you like, test them to be sure they meet ADA regulations. There are a number of online contrast checkers that can evaluate color combinations using the WCAG 2.0 guidelines. Your design should be at least AA compliant. 

Read More: Finding A Balance Between Accessibility and Aesthetics

Use The 60-30-10 Rule

From your color palette, identify a primary color, a secondary color, and an accent color. When applying colors to your site, follow the 60-30-10 rule: 

• 60% of your website’s user interface should be your primary color 
• 30% of your site’s interface should be your secondary color 
• 10% of your site should be an accent color to draw attention to important calls to action  

Don’t Forget Semantic Colors

Semantic colors convey universal messages to your site visitors using color alone. For example, a signal warning may appear in yellow, an error may appear in red, and a success may appear in green. A great tool to customize your semantic colors is the Eva Design System Color Generator. The system allows you to create a number of complimentary semantic colors based on your primary color. 

Creating an aesthetically-pleasing, on-brand color palette is an important part of a successful website. By following these tips, you’ll be well on your way to identifying the perfect colors for your business. For more support, reach out to Fruition. Our design team can take you through the entire process, from creating mood boards and conducting competitive analyses to finalizing a palette that’s uniquely you.