How To Develop Website, Ecommerce, Or Application Color Schemes

We’ve shared quite a few articles on the importance of color with respect to a brand. For a website, e-commerce site, or mobile or web application, it’s just as critical. Colors have an impact on:

• The initial impression of a brand and its value – for example, luxury goods often utilize black, red implies excitement, etc.
• Purchase decisions – the trust of a brand may be determined by the color contrast. Soft color schemes may be more feminine and trustworthy, harsh contrasts may be more urgent and discount driven.
• Usability and user experience – colors have a psychological and physiological impact as well, making it easier or more difficult to navigate a user interface.

How Important is Color?

• 85% of people claimed that color has a major influence on what they buy.
• Colors boost brand recognition by an average of 80%.
• Color impression is responsible for 60% of the acceptance or rejection of a product.

When determining a color scheme for a website, there are some steps detailed in the accompanying infographic:

1. Primary Color – Pick a color that suits the energy of your product or service.
2. Action Colors – This is missing from the infographic below, but identifying a primary action color and secondary action color is extremely helpful. It educates your audience to focus on specific user interface elements based on color.
3. Additional Colors – Pick additional colors that complement your primary color, ideally colors that make your primary color pop.
4. Background Colors – Choose a color for the background of your website – possibly less aggressive than your primary color. Keep in dark and light mode in mind as well.. more and more sites are incorporating color schemes on light or dark mode.
5. Typeface Colors – Choose a color for the text that is going to be on your website – remember that a solid black typeface is rare and not recommended.

As an example, my company DK New Media developed an online brand for a dress manufacturer who wanted to build a direct-to-consumer e-commerce site where people could buy dresses online. We understood our target audience, the value of the brand, and – because the brand was predominantly digital but also had a physical product – we focused on color schemes that worked well across print (CMYK), fabric palettes (Pantone), as well as digital (RGB and Hex).

Testing a Color Scheme With Market Research

Our process for our color scheme selection was intensive.

1. We did marketing research on a series of primary colors with our target audience which reduced us to a single color.
2. We did marketing research on a series of secondary and tertiary colors with our target audience where we narrowed down some color schemes.
3. We did product mockups (product packaging, neck tags, and hanging tags) as well as e-commerce mockups with the color schemes and provided those to the client as well as the target audience for feedback.
4. Because their brand was largely dependent upon seasonality, we also incorporated seasonal colors to the mix. This can come in handy for specific collections or visuals for ads and social media shares.
5. We went through this process more than half a dozen times before settling on the final scheme.

While the brand colors are light pink and dark grey, we developed the action colors to be the shade of green. Green is an action-oriented color so it was a great selection to draw our users’ eyes to action-oriented elements. We incorporated the inverse of green for our secondary actions (green border with white background and text). We’re also testing a darker shade of green on the action color for hover actions.

Since we just launched the site, we’ve incorporated mouse-tracking and heatmaps to observe the elements that our visitors are drawn to and interact with the most to ensure we have a color scheme that doesn’t just look good… it performs well.

Colors, White Space, and Element Characteristics

Developing a color scheme should always be accomplished by testing it in an overall user interface to observe the users’ interaction. For the site above, we also incorporated very specific margins, padding, outlines, border radiuses, iconography, and typefaces.

We delivered a full branding guide for the company to distribute internally for any marketing or product materials. Brand consistency is critical to this company because they’re new and don’t have any awareness in the industry at this point.

Here’s The Resulting E-commerce Site with Color Scheme

Color Usability and Color Blindness

Don’t forget usability testing for color contrast across elements of your site. You can test your scheme using the Website Accessibility Testing Tool. With our color scheme, we know that we have some contrast issues that we will be working on down the road, or we may even have some options for our users. Interestingly, the chances of color issues with our target audience are quite low.

Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish. Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females.

Usability.gov

The team at WebsiteBuilderExpert has put together this infographic and a detailed accompanying article on How to Choose A Color for Your Website that’s extremely thorough.