3 Steps to Choosing The Perfect Colors for your Website (What is the Best Website Color? Part Two)

3 Steps to Choosing The Perfect Colors for your Website (What is the Best Website Color? Part Two)

While choosing the right colors for your website can be overwhelming, it can be done in three simple steps. Please review Part One: What is the Best Website Color?  if you haven’t read it already to understand where you would use color in a website.

Step One: Review Perfect Customer & Current Logo/Branding

Here are some questions to ask yourself:

  1. Is my perfect customer male or female?
  2. What colors are currently used in my store?
  3. What colors are currently in my logo?
  4. What colors are currently on my other marketing materials?
  5. Do I have a branding and style guide for my company?
  6. What type of product am I selling?
  7. Which category does my website and product fit into best? Informational/Lots of Content, Corporate/Business, E-Commerce, Fashion, Design, Restaurant, Beauty, Creative Industries?
  8. Is my product an impulse buy or will my customer be doing research prior to the purchase?
  9. What emotion do I want my customer to feel?

Step Two: Choose  3-5 Main Colors Based on Answers in Step One

There are 3-5 main colors you need to consider when you are designing your website:

  1. Choosing 1 to 3 accent colors that will work with your brand
  2. Choosing a call to action color or dominant as your brand color
  3. Choosing the main background color to complete your design
  4. Choose a text color for dark backgrounds
  5. Choose a text color for light backgrounds

Accent Colors:

These are the main colors of your website. You will choose 1-3 that work with your brand, logo and images your planning on using.

Where you will use this color: they may be the subtitle, secondary buttons, information boxes, background color, secondary information, etc.

Call to Action or Dominant Color:

This will be a bright color that will stand out against both the background and your accent colors. Typically it is a shade of yellow, orange, blue, green or red color.

Where you will use this color: Only use your call to action color in a limited number of places where you want your website visitors to pay attention to, or if you want your visitors to take certain actions. (such as call a phone number, fill in a contact form, sign up to a newsletter, action buttons, logo, menu tab, fill out important information, title & headlines, etc).

It should “pop” to really highlight where you want your visitors to focus on and what you want them to do next.

Background Color:

White or Neutral Background Color:

  • Content Intensive Information Websites
  • E-Commerce Websites
  • Promoting a Service

Why?

The focus is on the content, portfolio or products, rather than the design of the website.The background color is only a backdrop to help make the content more visible and readable.

Brand Color as Background Color:

  • Corporate/Business Websites promoting a brand

Why?

This is because color is closely tied to brand recognition & you want to build strong brand identity.

Any Color as Background Color:

  • Fashion
  • Design
  • Restaurant
  • Beauty
  • Creative Industries

Why?

The world is your oyster, highlight a color that makes sense with your imagery and brand.

If you are feeling overwhelmed with the number of choices, check out part three.

Text Color:

You will need one text color for light backgrounds, this will be a darker color.  The second text color will be a light color and will be used with dark backgrounds.

The # 1 thing to consider when picking text colors your website is READABILITY.

 

Here are some other color rules to consider:

Contrast

To make sure your content can be easily seen and read, you’ll need to create a sharp contrast between the color of the text and your site’s background.

contrast_text_example

image credit: spaboom

Tip: For the longer paragraphs: stick with darker text to help your reader focus.

Contrast Tools: Check for Readability of your text on the web.

Contrast Ratio:  Simple type in the website color number to the background and a different color into the text section, it will give you a score of web content accessibility.

tool_readbility_contrast

Webaim is another tool you can use.

tool_readability_contrast_webaim

Web Content Accessibility Guidlines (WCAG) 2.o: Require level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. What this means in a nut shell is how easy is it to read your text on your website.

Harmony

Each element you add to your website should match and compliment all other elements.

Branding

There are no right or wrong colors so long as the colors you choose work in service of your website’s bigger goals.

Web Design Standards

If you see grey text on a form it signals something to be filled in, red text indicates an error or missing data and blue underlined text is a link you can click on. Use these standards as your guiding principles and get creative with the rest.

Cultural Norms

Different cultures have different relationships to colors . Use what makes sense for you and those who will be visiting  your website. See the culture color guides below. Click on image to get a larger view.

color_and_culturesImage Credit

1276_colours_in_culture

Image Credit

Step Three: Refine the color combinations

Colors should not be chosen randomly. Instead, it should be a series of organized, objective, matching exercise:

(1) Matching your brand with the right dominant color; (2) matching the dominant color with accent colors using the Adobe tool; and finally (3) matching the background color with your dominant & accent colors. Here are some tools that can help you out.

https://color.adobe.com/explore/most-popular/?time=all  Adobe Color CC

http://colorhunter.com/

The Mudcube Colour Sphere is a handy little colour resource for designers in that it not only provides the hex numbers for each colour; it also helps you to build up a colour scheme from one chosen shade. If you’re unsure what colour scheme you should be going for, Mudcube provides a selection of themes from a drop-down menu.

Mudcube Colour Sphere

09. Designspiration

Designspiration will generate a display of all images with your chosen colour combinations

At Designspiration, you can select up to five hues from a useful full-page palette, which gives you the chance to really see what colors you’re looking at. The site will then generate a display of all the images in its database with that colour combination. The hex numbers are prominently displayed, and you can click on them individually. Images can be saved to your collections on the site.

https://coolors.co/browser

http://colorsafe.co/

http://www.colorcombos.com/

Pick a template that feels right to your brand.

What is the Psychology of Color?

Color psychology is the study of hues as a determinant of human behavior. Marketers must be aware of the application of color in different media (e.g. print vs. web), as well as the varying meanings and emotions that a particular audience can assign to color. Even though there are attempts to classify consumer response to different colors, everyone perceives color differently. The physiological and emotional effect of color in each person is influenced by several factors such as past experiences, culture, religion, natural environment, gender, race, and nationality. When making color decisions, it is important to determine the target audience in order to convey the right message. Color decisions can influence both direct messages and secondary brand values and attributes in any communication. Color should be carefully selected to align with the key message and emotions being conveyed in a piece.[16]

Research on the effects of color on product preference and marketing shows that product color could affect consumer preference and hence purchasing culture. Most results show that it is not a specific color that attracts all audiences, but that certain colors are deemed appropriate for certain products.[17]

 

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.