Tips and Tools for Choosing Website ColorsMay92017

Categories: Design
Tips and Tools for Choosing Website Colors

It’s interesting how Color is a factor in successful Branding, Recognition and Customer Sales.


What do the colors on your website tell visitors about You, and your products/services?

Have you ever placed a Poll on your site and asked people if they like and enjoy your website colors?

Have you ever encouraged your site visitors to send you their Comments and Opinions of your website color scheme?

Probably Not.

Even though you may really like the colors on your website – maybe others don’t. Maybe they don’t stick around long enough to know what your site really offers, because the colors are a big turn-off to them.

Did You Know 

Unpersuasive overall design and poor site navigation are the main reasons online shoppers make the unconscious split-second decision not to purchase or return to a website. 

42% of online shoppers base their opinion of a website on overall design alone.

52% of online shoppers don’t return to a website due to overall aesthetics.

The rule of thumb is not to use more than three colors on a site. Keeping it simple can draw attention to the content you want noticed. Too many colors confuse the viewer.

Statistical Research Shows

Color increases brand recognition by 80%.

The three most used colors for logos are: Blue, Black, and Red. 

85% of shoppers place color as a primary reason for why they buy a particular product.

Within 90 seconds of a visitor’s first visit to a website, between 62% and 90% of their assessment is based on color alone.

The impact of color can vary depending on geographical location. A color that appeals to American shoppers may not necessarily appeal to European shoppers.

Each Gender has definite color preferences.

Women's Favorite Colors (descending):

35% Blue

23% Purple

14% Green

9% Red

6% Black

5% Orange

3% Yellow

3% Brown

1% White

1% Gray

Men's Favorite Colors (descending):

57% Blue

14% Green

9% Black

7% Red

5% Orange

3% Gray

2% Brown

2% White

1% Yellow

What Are Others Doing?

Often we’ll see:

Architects tend to use monotone, light and sparse colors. 

Baby and children sites use playful, light and bright colors.

Daycare sites use primary and rainbow colors.

Luxury sites use black and rich colors.

Women beauty and clothing sites use colors that appeal to the feminine side.

Lawn care and landscaping websites using greens and browns as their site colors.

Travel sites selling tropical vacation packages are light and airy, make you want to be on that beach. 

The Big Dogs

Many successful companies have spent hundreds of thousands of dollars in the development stage of their Logo to ensure Brand recognition, in which Color plays a part.

These companies use Red as their primary color:

Nabisco, CNN, Pinterest, Cnet, Heinz, Red Robin, McDonalds, Target, Kelloggs, Texaco, Avis, Nintendo, Exxon, Ace Hardware, Adobe, Coca Cola, Toyota

Red increases the heart rate and creates urgency.

Red stimulates people to take risks, has been shown to stimulate the senses, raise blood pressure.

Red stirs feelings of energy, power, passion, love, aggression, or danger.

Red translates to Bold, Strength, Attention, Love, Exciting, Action.


These companies use Yellow as their primary color:

Sun Chips, IKEA, Best Buy, Dennys, Shell, McDonalds, Yellow Pages, CAT, Nikon

Yellow is considered a highly stimulating color.

Yellow is associated with the heat of fire and the sun.

Yellow awakens feelings of optimism and hope.

Yellow translates to Logical, Optimistic, Progressive, Confident, Playful, Creative. 


These companies use Blue as their primary color:

Lowes, Walmart, Oral B, American Express, Dell, GE, Twitter, Facebook, LinkedIn, JP Morgan, Oreo, Ford

Blue creates the feelings of security, trust, order and cleanliness.

Blue often is associated with the sea and sky.

Blue calms the senses and lowers blood pressure.

Blue translates to Trusted, Conservative, Dependable, Honesty, Calm, Secure, Cool.


These companies use Orange / Red-Orange as their primary color: 

Discover, Harley Davidson, Crush, Gulf, Hooters, Amazon, Payless, Fanta 

Orange often is associated with the heat of fire and the sun.

Orange is considered a high-arousal color.

Orange stimulates feelings of warmth, balance, and energy.

Orange translates to Happy, Energetic, Sociable, Friendly, Affordable, Enthusiastic, Sunny


These companies use Green as their primary color: 

Whole Foods, Land Rover, Tropicana, xBox, Starbucks, Animal Planet, BP, John Deere 

Green is associated with coolness, nature, good luck, and health.

Green translates to Wealth, Fresh, Life, Harmony, Environment, Growth, New. 


These companies use Purple as their primary color:

Yahoo!, Crown Royal, Welch’s, Hallmark, Big Brothers Big Sisters

Purple is considered a low-arousal color.

Purple can stimulate feelings of arrogance and spirituality.

Purple tends to soothe and calm.

Purple translates to Royalty, Mystery, Pomp, Ceremony, Creative, Unique, Majesty.



Think about who your focus group is. Who your target market is. Who are you selling to: Men? Women? Children? Pets? Businesses? Choose a color scheme geared toward your demographic.

Ask yourself these two questions to assist in identifying which colors to use:
What is my Content About?
Who is most likely to Read My Content?

Website colors for a Doggy Daycare site would be different than for a Dog Behavioral Training site. A Doggy Daycare website colors might be light and bright, perhaps yellows, blues, pinks, greens, etc - evoking a fun and happy place you can board your pet by the day, week or month. A Dog Behavioral Training website colors may need to be darker shades of blue, orange, black, brown, etc – evoking a serious and experienced staff of dog trainers.

If you want your website to identify with your Region, or Local Community – determine the specific culture and environment. Consider using colors from your state flag, local high school, or other colors which are identifiable with your locality.

Decide the impact you want from your site. The color tone you choose determines the initial impact of your website. Do you want your website to come across as:

Light and Happy?
Sophisticated and Professional?
Dark and Mysterious?
Fun and Playful?
Strong and Trustworthy?
Dripping with Elegance?
Comforting and Soothing?

Take into consideration if a particular age group dictates your target demographic. If your website will cater to a young age group, let’s say ages 18 – 26 - - then you most likely don’t want your main colors to be gray and brown. You probably want to use colors that will appeal to your specific age group target.

Don’t base the colors you use in your Logo and website on personal preference. If your favorite color is Hot Pink, it’s tempting to make Hot Pink the primary color on your website. If you sell Protection Services – then Hot Pink may not be your most successful color choice.

Creating your Logo always comes first. Once you have a solid logo design, the colors for your website and marketing materials will fall into place.

The general rule of thumb for logo and website colors are: the Dominant Color uses 60% of the space – the Secondary Color uses 30% of the space, and the Accent Color uses 10% of the space.

A lot can be learned by scoping out your competition. Make a list of your top five online industry specific competitors. Visit their websites to get an idea of what colors they’re using, then decide if you want to follow the pack - or follow a different path and come across as distinctive and unique.


Free Online Color Tools and Extractors:
Use these free online color palette tools and color extractors to test and find color combinations, and obtain HEX and RBG color codes.

A stand alone color picker application, just point/hover your mouse over a photo/graphic/swatch to obtain the RGB, HEX and CMYK color value codes. 

Create color palettes from photos, add to the gallery or save yours for private use. Sign up free, then log in to use.

Build your own color palette, a bit more advanced that PHOTOCOPA, but easy to use.

Quick and easy way to test out different color combinations to give you a better idea of how they’d actually look on your website.

Adobe Color CC
Browse pre-made color schemes or create your own using an advanced yet simple to use interface. This has an AIR app and Dashboard widget available for more access options.

Interface that helps you create color schemes in seconds. Colorblind simulation is built-in so you can ensure usability will be optimized for all users.

Colour Lovers
An online community to share and browse color schemes.

A color palette generator created my MailChimp. Upload a photo or graphic and automatically receive a color scheme to go with it.

Color Explorer
Features include a number of advanced tools for creating and converting your own color palettes as well as the ability to browse popular schemes.