How often do we initially judge a product based solely on its color? How many times our buying decisions have been based on the product color alone?
Let’s take a moment and look at fascinating science behind why something as abstract as color can influence us so much:
When our eyes take in a color, they communicate with a region of the brain known as the hypothalamus, which in turn sends a cascade of signals to the pituitary gland, on to the endocrine system, and then to the thyroid glands. The thyroid glands signal the release of hormones, which cause fluctuation in mood, emotion, and resulting behavior.
In this post, we are going to cover how to choose the right color scheme, specifically focusing on “how to choose a color palette for a website” for your eCommerce and make the most of those 90 seconds while a customer is forming an opinion about your product as they land on your page.
Color: Fundamentals
Learn color components
What if I say that you are not looking at colors right now but at hues? Right, there is a difference between hue and color. You will need this information later in the article as you will follow the links to designers’ tools to create your own brand colors.
Hue refers to the color spectrum – red, orange, blue while color (web color) is a combination of hue, saturation, and luminosity. Saturation is how “colorful” the color is. “Rich” or “pure” might be better words. As the color becomes closer to gray, it is less saturated. Luminosity is a measure of how bright or dark a hue is. Each of the three properties has a value (depending on a color space, but we won’t go into that one today). For example, the pastel mint values are 147,19,100.
Get started with your eCommerce website color scheme
First, it is important to understand the interplay between the three key elements – base, accent, and text:
- A good starting point is to choose the base color for your online store. This is the fundamental color you will build on. On top of it, you will add other colors and combine hues and shades
- Accent color –used for emphasis and contrasting effects
- Text color in black, white or grey – depending on the background color, the text color should be adjusted for good contrast and readability. In terms of readability, it is convenient to have a black-to-white ratio of about 60 to 80%.
Do’s: the less color is used, the more likely it is to stand out. Good to know for calls-to-action.
Don’ts: do not use complementary colors for text and background. Good to know for readability and visual aspect. *Complementary colors are those colors directly opposed to each other in the color spectrum.
Apply color harmony rules in your eCommerce website
Colors that look good together are called a color harmony. Artists and designers use these to create a particular look or feel. You can use a color wheel to find color harmonies by using the rules of color combinations. There are six rules of color combination:
Complementary – two colors that are on opposite sides of the color wheel,
Split-complementary – in addition to the base color, it uses the two colors adjacent to its complement,
Analogous – three colors that are side by side on the color wheel,
Triadic – three colors that are evenly spaced on the color wheel,
Tetradic – four colors that are evenly spaced on the color wheel,
and Monochromatic – three shades, tones and tints of one base color.
Color combination rules for eCommerce websites
“Practice is the best of all instructors”, so let’s see color combination rules in action:
Target, furnishing and decor brand, goes with complimentary (main colors, red and cyan, are opposite each other on the color wheel). Such scheme adds vibrancy to your webpage:
London Philips, men’s clothing brand, looks strong and persuasive with the monochromatic color scheme:
And Gymboree, kids clothing brand, cause enthusiasm and excitement with tetradic one:
Create your color palettes with free online tools
Now it is time to go and experience unlimited possibilities of creating your own color palettes for ecommerce website. Use these free online tools:
Adobe Color CC – Apply the knowledge you have received in this article about color components, Hue, Saturation, and Luminosity, and create your own color! Next, complement it with other colors using one of the color combination rules and, vualá, you have your first color theme!
Color Explorer and Canva – With these tools, you can quickly extract individual colors or a complete color palette from any image (like screenshots of webpages).
Color Calculator – This interactive color wheel will show you which colors work together and why.
Or, you can use palettes created by others with Color Hunt.
Color: Psychology behind eCommerce use
Now that you have mastered the techniques of color combinations, it is time to consider the psychological implications of using some color schemes, instead of others. You already control the “how” and the “what”, but let’s dive deeper, to discover the “why” behind your choices.
Certain color schemes are pleasant to the eyes and subject to favorable perceptions, while other color schemes are “ugly” and negatively perceived by most people. Your selection of color palette depends on the message you want to convey to users of your eCommerce website, its tone and intended impact.
Yellow Color Palettes.This color conveys brightness, cheerfulness, energy, and optimism. However, it should be carefully used, to avoid eyestrain.
Orange Color Palettes. Orange is the color of enthusiasm, passion, energy, and joy. Vitality, fun, and abundance are strongly expressed by orange, altogether.
Red Color Palettes.Red – a simple, yet powerful color, that appears nearer than it is, and gives the impression of increased velocity. It suggests luxury and abundance, strength and warmth.
Pink Color Palettes. As a variation of red, the pink color has won a distinct name due to its expressive power. It is often associated with femininity, it is soothing and emanates a sense of warmth.
Violet Color Palettes.The violet color is generally associated with spiritual awareness and contemplation, and the power of introspection.
Blue Color Palettes. The blue color is best known for its soothing, calming effect. It also conveys security, trust, and communication.
Green Color Palettes.The green color is often associated with nature, natural, freshness, growth, balance and peace.
Black Color Palettes. Black is often associated with elegance, mystery, power, and authority. It can also be associated with the unknown.
Brown Color Palettes. The brown color instills a sense of reliability, support, earthiness. It approaches the characteristics of black.
White Color Palettes.White means cleanness, purity, hygiene, both simplicity, and sophistication. It has the property of making spaces look wider.
Consider your eCommerce website audience demographics
This is one of the most crucial considerations. If your business targets a broad demographic, it can be difficult to pick an appropriate color scheme. It speaks to the importance of niching down and catering to a well-defined group of people. When you have a narrow niche, factors such as gender, culture, and age do have an impact on color preference. You have to consider the people you serve.
Gender
Let’s say your business targets women. Then you want to use feminine color scheme. Here’s how Sefora markets to young female audience:
If you’re marketing to men, these are the colors to stay away from: purple, orange, and brown. Instead, use blue, green, and black. These colors — blue, green, and black — are traditionally associated with maleness. However, it comes as a slight surprise to some that brown isn’t a favorite pick.
Age
“With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow).” – Faber Birren.
As you can see, blue, green, and purple are the most popular among all age groups. What’s interesting is the preference of green in the younger age groups and the preference of purple in the older age groups.
Notice the color orange and its lack of popularity among older people.
Consider your eCommerce website industry
Certain colors appeal to certain markets. Some colors are more appropriate for luxury products while others are more appropriate for food items. Color psychology is not an exact science but you can leverage it to move in a general direction on your site.
Luxury goods
If you are selling luxurious goods, want to appeal to a classy audience, or are creating a business that’s bold in some way, then consider black as your primary color like this Swiss company:
Eco-products
Brands with a health and eco-conscious focus, like Babyganics, gravitate towards greens, blues, and yellows:
Food
Although blue is pretty much an all-round great color, it should never be used for anything related to food. Dieters have used blue plates to successfully prevent them from eating more. Evolutionary theory suggests that blue is a color associated with poison. There aren’t very many blue foods — blueberries and plums just about cover it. Thus, never use blue if you’re selling foodie stuff.
Children’s products
Orange helps to stimulate physical activity, competition, and confidence. This may be why orange is used heavily by sports teams and children’s products.
CHERRY ON TOP
The more unusual and unique color names can increase the intent to purchase. For instance, jelly beans with names such as razzmatazz were more likely to be chosen than jelly beans names such as lemon yellow. This effect was also found in non-food items such as sweatshirts.
As strange as it may seem, choosing creative, descriptive, and memorable names to describe certain colors (such as “sky blue” over “light blue”) can be an important part of making sure the color of the product achieves its biggest impact.
Closing
Not exactly rocket science but creating the perfect color scheme for your website does take a lot of knowledge and expertise. Therefore, we recommend you use pre-made design solutions available on our marketplace.
With your customer psychology in mind and many years of web design experience behind, we have developed 17 conversion-oriented store themes that are made to grab your customers’ attention and guide them through the buying process. And if you need help with fine-tuning a theme, send us a free custom quote form! Communicate your needs and wants, the magic is on us…