Skip to content

Website Color Schemes – The Definitive Guide

June 4, 2012
Website Color Schemes

If someone blindfolded you and dropped you off inside of a major department store, chances are that you would instantly recognize which store you’re in instantly without needing to see an iconic logo or trademarked name. If your surroundings are trendy, modern and red, you are probably in a Target. Utilitarian, warehouse-like and blue? Walmart. That level of familiarity is as relevant to online storefronts as it is to their brick and mortar forefathers. Amazon, Netflix and eBay are all instantly recognizable e-retailers by their color schemes, logos and other consistent branding. By keeping your branding visually consistent, your online presence is sure to be more memorable and distinct for your customers. While there are many important ways to build a visually distinct online storefront, here are a few essential tips to get you started with a digital makeover:

Critical Color Choices

Going back to the department metaphors once again, imagine yourself in any “Big Box” store on February 13th- Other than the mob of confused men anxious to pick out the perfect gifts for their lady friends, you are certain to find yourself in the center of a tornado of vivid pink, white and red marketing, signs and promotional artwork all around. There is a good reason for that too, as every color subconsciously carries feelings and suggestions when applied to certain subjects. Here are a few prime examples to take into consideration when choosing a color scheme so that your brand’s symbolic hues perfectly complement its Storefront.

Website Color Schemes - Warm ColorsWarm Colors
Red, Yellow and Orange and the infinite combinations that can be produced from these base colors are considered to be “Warm” Colors. Bold and vivid, these colors are commonly used to visually hold the viewer’s interest.

Red can inspire strong, passionate feelings ranging from love and romance to hate and war, which gives this bold color a wide range for marketing purposes. Deep crimson might work well for a retailer specializing in violent video games and DVDs, while a soft pink would be more suited to promoting a store that sells to a feminine consumer base. Note that red is an attention-grabbing color that holds the viewer’s interest, which is great for getting noticed and directing awareness to specific sections of your Storefront. (See Target as an excellent example of a Red-Themed website.)

Orange is another color that works well to catch people’s curiosity that isn’t as harsh and full of feeling as red can be. Both a bold and happy color, orange tones subconsciously remind the viewer of energy, warm temperatures and strength. A few orange-colored natural icons include toasty flames, tangy citrus and the beauty of watching leaves change colors in the fall. More and more brands are utilizing oranges into their design to integrate a sense of lightheartedness and confidence- a perfect strategy for toy companies and digital downloads. (See Bing as an excellent example of an Orange-Themed website.)

Yellow is seen as the happiest hue in the color wheel, but it can overwhelm viewers if you go overboard! The iconic banana tone can be seen as silly and immature, which is great for people advertising entertainment products. It is easy to promote a sense of fun with yellow when it’s used properly- Faint yellow easily gets lost or muddied when placed against white and other light colors, which can actually create a “grimy” effect. Place darker colors alongside yellow elements of your designs to make them “pop” as attention-stealers. (See Yellow Pages as an excellent example of a Yellow-Themed website.)

Website Color Schemes - Cool ColorsCool Colors 
Blue, Purple, Green and all of the shades between compose the “Cool” Colors in the visual spectrum. Note that these website color schemes are relaxing on the eyes and produce a calming effect for observers.

Blue invokes calm feelings, a sense of cleanliness and purity. Since clean air and water are often seen as bluish, it is common to see weather, air travel and beverage companies utilizing the color in their designs, last time I went on vacation I hired outer banks rentals and I was able to see that they also promote their color and design. While cerulean tones have a relaxing effect on their viewers, blues are versatile colors that are easily combined with warm colors for vibrant results. It’s always worked for Spider-Man! Men in particular are more often drawn to masculine blue colors. Many large corporations consider sapphire to be a “safe” color as it represents many positive qualities. (See Twitter as an excellent example of a Blue-Themed website.)

Purple has historically represented a lavish lifestyle and royalty in western cultures. Since violet is rarely seen in nature, these hues are easily applied to branding high-end products and services. Softer shades of lavender are considered more romantic and feminine and are commonly utilized to promote women’s goods. Considered visually imaginative, fun, cool and exciting, purples are extremely popular with children. (See Yahoo! as an excellent example of a Purple-Themed website.)

Green is commonly associated with nature; particularly forests, jungles and a healthy environment. In the western world, deeper tones of green can also represent money as it is commonly used by many tax and finance related businesses. Brands with a focus on freshness and cleanliness also take advantage of avocado hues ranging from canned vegetables to alternative energy companies. Emerald has seen plenty of usage after the push of cleaner and “greener” technologies. (See Xbox as an excellent example of a Green-Themed website.)

Website Color Schemes - Neutral ColorsNeutral Colors
Shades of Black, White and Brown are the neutral colors. Neutrals are extremely adaptable, gender neutral and can be incorporated into nearly any design.

Black is an extremely flexible color design-wise. Psychologically, black ranges from sleek and modern to dark and gloomy depending on how it is used. These onyx hues are commonly applied to the latest technologies, clothing and cars because black can give the impression of power and sense of current with the times. On the other hand, products associated with horror or dark humor clearly benefit from the color often associated with evil and death. Black pairs well with bright colors for a highly visible contrast to help guide the viewer’s eye where you want them to go. (See Sony.com as an excellent example of a Black-Themed website.)

White works exceptionally well for online storefronts. Frequently used as a backdrop to highlight product catalogs, frosty tones work well as a spotlight for your items. Purity and spotlessness come to mind when people see white. Many brick and mortar retailors have to regularly touch up their white-colored walls, floors and shelving due to yellowing, foot traffic, etc., but since your business is online, you will never have to worry about keeping your stark white website bright and clean. Snowy white colors are usually a safe bet since there are so many positive feelings associated with them, while complementing midrange and darker colors. (See Starbucks as an excellent example of a White-Themed website.)

Brown is an earthen color often connected to landscapes, animals, and reliability. Companies that cater to pet owners and animal aficionados use coffee tones to promote their services. Home services with a reputation for being dependable are seen with tan and beige colors on their branding as well. (See UPS as an excellent example of a Brown-Themed website.)

Once you have a better understanding of the hidden psychology behind the visual spectrum, it’s not too difficult to apply your business colors to a dedicated online storefront. Think about what colors best represent the message that you want to relay to your consumer base and look everywhere for inspiration. Whether conservative or wild, the color scheme that you pick should definitively represent your personal brand- take the time to discover the color combinations that suit you!

From → Vendor Tips

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: