Last updated : Jul. 21, 2016
“Ok now, I’ve decided! I will finally launch my website. Domain? www.mysupergorgeoussite.com. Yeah, that sounds like me! Check. Get the best hosting services? Check.
One more step, choosing the best color palette and theme for my awesome website aaaaaaaaand… I’m stuck!
“From all these stunning sample themes, what is the best color scheme for my site?”
If these words describe you, this colors case study is for you!
The decision which nuances to apply on your new website can be a very tricky one, because the color is one of the main factors for the visual appeal of your site, and it will very likely contribute to a more favorable trend of sales and conversions.
After reading this study you will learn:
- What is color theory and what are the basic principles of color palette creation;
- What is a color wheel palette and how to use it;
- What emotions are triggered by each color and how they will affect your customers;
- How the designers use colours and color schemes?;
- How to apply the color scheme theory to your website: best practices and you will find out about a designer’s (Elizaveta) experience.
The visual consistency of your website’s UI design will depend almost entirely on the color scheme and the colors combinations you choose, which is why navigation menus are usually light, the same as the background which contains all essential elements for users to see and understand. The contrasts are sharp to help even color blind people to make out the images and text used on the website.
In this study, you will find valuable insights about the impact of colors on your site and customers, along with great tips for choosing the best color schemes. Also, we will show you how you can easily apply it to your website by using the Color Palette option of our latest theme The Core.
What is the color theory and why you should care about it when designing your website?
Imagine yourself living in a world without colors: roses are gray, and violets are… gray, too. No bright red sunsets and clear blue skies. What a “charming” scenario. It seems incredibly boring, right?
The same applies to websites that have no colors. You know how a black-and-white website is called? Exactly, an old newspaper. Do you still read newspapers? I bet you don’t and your customers either don’t.
For this reason, colors are more valuable than you may ever think. Choosing the right color for your website will make it more visual appealing for your clients. A well-crafted brand business image creates a strong product identity.
A well-chosen color scheme will increase your sales and conversions. Still not convinced? Look at these highlights from the KISSmetrics’ impressive study about “How do colors affect purchases?”:
Their more recent infographic on “How colors affect conversions?” also showcases the fact that product assessments are made in only 90 seconds from the visual contact, and 90% of them are based on color alone. So, are you willing to miss a significant part of your conversions by choosing the wrong nuance for your brand, product or site? I bet you are not willing at all.
This is why you should be very considerate while choosing the color combination of your website. Right colors get the desired effect on your clients, creating more conversions.
So, what is the Color theory?
All the definitions of color theory sum up to the following idea:
It’s a theory based on creating designs using color interactions & nuances harmony:
This definition is too vague to understand the color theory from the first time.
As we are talking about nuances, why not use them to understand their theory? Let’s cover all the particularities in a more visual way.
The color wheel and color harmony
The colors wheel is the key tool of color theory. It’s based on the idea that all existing nuances are obtained from 3 primary color combinations: yellow, blue and red. All further combinations create a new shade.
All the colors divide into two main groups: warm colors and cool colors. Each color coordinates in a particular way with the other ones.
Let’s leave the words aside, just look at this part of KISSmetrics’s great infographic about color coordination:
By this point, you will probably say: “Ok, but if the color wheel has only 12 colors, then how the other colors are made?”
Other colors are created using their characteristics:
- Hue – basic color: blue, green, red, etc.;
- Chroma – color’s purity: a color with high Chroma has no added black, gray or white). Colors with low Chroma are called washed out, and those with high Chroma vivid or vibrating;
- Saturation – how strong or weak the color is – determines the color contrasting;
- Value – how light or dark a color is. By changing the value of a color, you can get these types of color groups:
- Low value: Shades – darker color by adding black;
- High value: Tints – lighter color by adding white;
- Tones – duller color by adding gray.
Shades, tones, and tints are usually used to create distinctions on your website without affecting its color balance.
So, now that we’ve covered the color theory let’s take a look at how these principles apply to design. Check the following infographic about the 10 commandments of color theory made by Designmantic:
Impressive, right? With a simple change of one color, you can obtain an entirely different look of your web design.
You may question yourself: how to get the perfect color scheme through this color combination? Designers have a special recipe for achieving the best color palette:
The ’60-30-10 rule’ for choosing professional website color schemes
- The 60% – the main color of your website. It sets the tone of your design. Usually, it’s recommended to choose a neutral color, like black or white if you want to get a cleaner look;
- The 30% – a contrasting color with your main color. It creates a visually striking effect;
- The 10% – the so-called “accent color”. It should complement either your main or contrasting color.
The idea of this rule is that less is more. Keep it simple if you want to have an eye-catching design that attracts customers.
You may be wondering, how this attraction occurs?
The answer is that colors have a tight relationship with emotions. This is the reason why fast food companies tend to choose orange or red logos, but insurance companies prefer blue.
Colors and emotions – color psychology for web design
Colors are one of the non-verbal ways of communication. When people are interacting with colors, they have physical and emotional reactions to them.
The color is crucial in many aspects of our everyday lives, and we tend to connect it to our feelings and memories in a unique way. Marketers know this and use color as a dominant strategy & tool to impress viewers and inspire them to make a purchase. First of all, they try to connect the color with the message their product/event is seeking to communicate and draw the eye in a natural way because people understand the purpose of their design decision subconsciously.
The emotional connection to colors is what inspires big business to spend millions for the crafting of their brand image and identity, and pay experts to choose the perfect colors for their products and their e-commerce sites. Colors mean the world to brand image, so you should always try to pick those that generate a positive emotional response and motivate people to check your products.
Choosing the right colors makes you deliver the right tone or message to your customers. For example, while warm colors usually excite and boost energy, while cool colors calm down and relax.
Each particular color arouses certain feelings and stimulates certain actions, decisions or choices. Colors can be incredibly powerful for your site and your online e-shop.
To understand their true impact, take a look at the following emotions associated with each color:
- Red: Joyful and youthful color that communicates confidence and bravery. It is the color of youth, joy, and love. Associated with: energy, passion, excitement, boldness, confidence, power, but also with aggression or danger;
- Blue: Color of trust, strength, and reliability. Reflects coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness, but can also imply sadness, depression;
- Yellow: Color of optimism, warmth, friendliness. A good solution is conveying a warm, friendly, and positive message. It is associated with motion, light, optimism, happiness, brightness, joy, but also with criticism, impulsiveness, and egoism;
- Green: A soothing and calming choice, communicating peace, progress, and positive emotions. It’s the color of life and nature. Creates a soothing calming effect and evokes a peaceful, progressive, and calm emotional response. Associated with naturalness, restfulness, health, wealth, prosperity, but can also imply decay, toxicity;
- Orange: Color of fun, friendliness, confidence, cheerful atmosphere and appetite. It creates a friendly, confident, and joyful effect. Reflects: friendliness, warmth, approachability, energy, playfulness, courage, but also superficial, unsocial or overly proud;
- Violet: Color of royalty. It reflects wisdom, sophistication, celebration, but also arrogance or immaturity;
- White: Color of peace and innocence which nevertheless has the most powerful effect. Associated with clarity, simplicity, purity, cleanliness, youth, freshness, peace. Also, reflects coldness and unfriendliness;
- Black: Color of luxury and sophistication. Creates a solid, secure emotional response. It reflects power, elegance, secrecy, mystery, but also fear, coldness, menace, and oppression. A timeless choice for an elegant and solid design, 100% likely to invoke an emotional response;
- Gray: Color of neutrality and stability. Associated with security, maturity, reliability, but also with sadness, loneliness, uncertainty, and indifference;
- Pink: Color of sensuality, femininity, and romance. Associated with warmth, hope, sweetness, but also with weakness, credulity and lack of will or power;
- Brown: Color of Earth and protection. It reflects comfort, strength, credibility, reliability, but also heaviness or boredom.
Besides general emotional associations, colors have a great impact on marketing decisions and purchases. Take a look at this extract from Homestead’s infographic about how colors influence people psychology:
Ok then. By this point, you must be convinced that color theory is important and has a huge impact on people’s psychology. Your next question may be: “How am I supposed to choose the perfect color scheme for my website?”
How to choose the perfect color palette & how to use the color theory?
Get to know your audience
You also have to think of low vision visitors and enable them to navigate the website with lots of contrasts on your UI (most of all, a high contrast between the elements and the background that lay on). Think of your color scheme and try to figure out which are the best contrasts you can use to obtain the best design results. This is how you can do it:
Color Saturation & Contrast
Saturation stands for the intensity of the color, meaning that every color which has been used in its purest, brightest form is completely saturated. Muted against bright colors among the most powerful and impressive contrasts used on WordPress websites, and you should consider it to attract your visitors’ attention.
Color Value & Contrast
The value of the colors refers to the darkness/lightness of the color. The highest contrast you could use is 100% white against 100% black, but you can do your experiments and add different colors to highlight some of the elements on your website.
Color Temperature & Contrast
Another way to group and categorize colors is to consider their ‘temperature’ according to which there are cool, warm, and neutral colors. The cool ones are green and blue, the warm ones are orange, yellow, and red, while all the rest (gray, white, black, and brown) are neutral colors obtained by mixing different colors and temperatures.
Ideally, you should combine colors considering all of the abovementioned values and principles – there is no way to mess up when following these rules!
Primary and traditional color solution
Again, the theory of colors helps users understand the impact of different colors, and decide where and how to use them. To be explained in a simpler way, the color theory tells us how colors interact with each other depending on their strength and vibrancy, and it helps us decide which colors to use on our WordPress website. Here are some of the basic and most popular schemes we could use to make our website more attractive:
One of the safest options is to use nature-inspired colors because they have a soothing and calming effect on the human eye. They will create an overall calmed perception of your website, where contrasts are use modestly and restrictedly.
These are the simplest schemes of all – everything you need to do is to choose a base color, and add elements in another color that will contrast it. This is at the same time the perfect option for websites that have plenty of content because it allows designers to include every object they want without making the site look overdone.
Triadic combinations are crucial for clean contrasts and beautiful aesthetics since there are three leading colors, but many different hues to oppose each other. This system makes websites appear more vibrant and vivid, which is exactly how users expect to feel when landing on it.
You need to familiarize with the demographic of your visitors and target them when choosing colors for your UI design. Sites meant to be used by the millennial, for instance, will certainly have a different color scheme than the ones promoting content for women.
The more you know about color psychology, the more relevant you can make your website, and target the right audience that would be interested in the content you’re providing. To be more precise, if your WordPress’s website audience is men, you should consider white, black, gray, and blue as the main colors. Warmer and lighter shades such as purple, pink, yellow, and orange should be avoided.
Let’s see the guidelines followed by a particular website owner when he chose the color combinations for his website.
She is a wonderful 23 years old passionate interior designer. Elizaveta graduated Florence Design Academy from Italy in 2013 and designed several impressive interiors for the agency she used to work at.
In 2016, she decided to start her own local business: a baby furniture brand called “My Angel.” She made her first sample baby couches and launched a Facebook business page.
As the number of orders started to increase, she realized that she might need a website. Until this point, things were pretty clear and straightforward. At that moment, it came up to finding the theme with the best color scheme option.
Why having a color scheme option is so important to you?
Everything starts with a perfectly matching color palette. When designing interiors, you are not allowed to make mistakes based on color choices.
My clients trust me because my designs are based on sketches crafted from a particular color palette, according to their preferences. This plan defines all my clients’ future purchases.
Choosing an inappropriate color combination may lead to unnecessary expenses for my clients, making them frustrated. This behavior is unacceptable for a professional interior designer.
Before we pass to Elizaveta’s experience, first things first:
The main rule for choosing the best color palette: Don’t be afraid to make mistakes! It’s not a piece of furniture for living room – you can easily change it with no extra expenses.
Before you move to color theory analysis, and you choose the best color scheme, you should consider the steps that we talked about in order to choose the right colors; your personal approach and roadmap can be easily created by answering a few questions:
1. What is the purpose of my website?
2. What are my product associations?
3. What kind of photos do I want to incorporate on my site?
4. What colors would sync with my brand image?
Every question from above is imperative. Without answering them first, you may risk choosing an inadequate color palette. This error may lead to invalid associations with your product and client loss.
This is why Elizaveta started with answering them:
1. I will sell baby furniture and other baby related items on my website. So, most likely, moms will be the ones who will buy from my website;
2. My products are associated with comfort, joy, safety, happiness and also with innocence, love, and new life;
3. The photos that I would like to choose for my site should arouse emotions of happiness, playfulness, and innocence;
4. My brand logo is white on light pink background. The colors that should sync with my brand image should be white, light pink and light blue.
Once Elizaveta has set up the above checkpoints, she could easily proceed to choose the perfect color palette from The Core.
How Elizaveta made her color palette choice with The Core
Elizaveta chose to use Coolors.co for picking her color palette: it started as generated automatically, but then each nuance was locked, obtaining the following scheme:
After that she inserted the corresponding hex codes for each color in The Core’s Appearance > Theme Settings > Colors > Color Palette:
And voila, her website was ready:
Of course, I’m kidding. Obviously, it’s not that simple. Let’s see what she did after choosing the color palette and the CRIBS demo from our latest premium WordPress theme The Core.
The first thing she noticed was that in this demo the accent color (10%) is yellow, so she inserted the purple hex code(#904C77) instead of the previous yellow in the Color 1 field. Why did she specifically added in Color 1 option and did not choose another one? Because the fact of changing colors has both front-end and admin impact on the theme, and if you used an existing demo instead of building from scratch, you should pay attention to its color settings to quickly set up your scheme.
In result, all the items that featured the accent color changed to purple:
The second step was to apply the main background color, Color 4 option – the light peach #ECCFC3, which she decided to use as an overlay color for her background images:
After analyzing the theme, Elizaveta noticed that the Color 2, demo’s default red, was used to highlight some subtitles and headings. She changed it to her analog color, violet #957D95 and the third color option to Color 4’s analog – peach #ECB8A5. The fifth color, usually used for texts, stayed the same. This is what she obtained:
After setting up the palette, the colors became instantly available in any color customization form. Using these colors, she changed the header, footer, and the elements’ color settings:
Wait, but what if you need the 6-th color?
It’s easy: the Color Palette option from The Core gives you the possibility to choose the 6th color for certain elements. As you may have noticed, in some elements, like buttons, Elizaveta used the 6th color, white, as the hover color:
What if you change the photo?
You may opt for keeping the same primary colors but play with the shades and tints. Alternatively, you can completely change your photo and adjust the palette according to their elements. Alternatively, you can always choose and overlay color to soften the colors of your image and match it with the scheme.
With The Core’s Color Palette is quick and simple. Just remember: always keep in mind the 60-30-10 rule. Choose a balanced background and you have plenty variations to play with.
Besides all the above checkpoints, when selecting the best color scheme, you should follow these best practices:
1. Your text content to be easy to read – choose contrasting colors. The contrast between text and background is crucial for a great UX;
2. Use fewer colors. Your website is not a scribble. The best option is to use one color for headlines and another (complementary) color for the text;
3. Use enough colors. Fewer colors, but enough, too. Using not enough colors may make your site seem boring. If you need to highlight some elements, use shades, tones or tints;
4. Use intense colors for eye-catching designs. But don’t overdo: too many vivid colors may confuse or irritate;
5. Remember: Web colors look different than printed. And you can play with them without any limits;
6. Seek inspiration from nature. If you have an inspirational block, just look at these stunning color palettes created by Design Seeds:
Breathtaking views and colors, right? Just keep in mind one thought: Keep on trying! Great designs often have behind many attempts and sketches.
If you feel like you’re a trend follower, you may want to consider the color palette trends for 2016:
- Monochromatic: monochromatic schemes, often blues, reds or black/gray – with a small touch of an accent color. While monochromes create a calming, relaxing effect, the accent color grabs the customer’s attention;
- Pastels: Associated with “flat” design. These palettes have 4-5 primary colors, but with different tints. The pastels make primary color combinations more smooth and delicate;
- Bright: In opposition to the pastels trend, bright colors are used for vivid designs. Usually, there a few primary colors with a lot of white or gray space between them, to neutralize their brightness
Need more inspiration? Check the following resources of the best website color palette collections:
- 50 Beautiful Color Palettes for Your Next Web Project
- 40 Stunning Website Designs with Great Color Schemes
- Website Color Schemes: The Palettes of 50 Visually Impactful Websites to Inspire You
- 10 Gorgeous Color Palettes to Inspire Your Website Design
- Rude Color
Adding context to the colors you’re using is the key for benefiting from them, and helps designers know which schemes will be incompatible with your brand if nothing else.
Sumarizing all above, to pick the right color scheme for your website, you should consider few things:
- Think about the brand image that is already in place. If there is a logo or a similar marketing material, the safest thing to do is to keep up with the same scheme.
- Consider other colors you think would look nice on the website, but bear in mind that printed samples will not look the same when putting on the screen. Don’t forget the media, call to action buttons, sliders, and other elements that need to be added, and use a similar scheme for them too.
- Finally, take color psychology seriously, because it works.
- Think of your message and how it can be visually conveyed using colors. We recommend you to limit your choice to two colors and to choose only such that can genuinely represent the brand and inspire users to respond in the way you want them to.
- Seek inspiration, mix, and match as many times as you desire, because it’s free and simple. The latest technology gives you the opportunity to learn quickly from your mistakes and test multiple times until you get the perfect look for your website.
The Core’s Color Palette comes handy once you’ve chosen your favorite scheme and you want to adjust your site’s elements more quickly. Just like Elizaveta, don’t be afraid to play with colors: it’s quick, easy and rewarding!