The basics of color theory in web design
Color is unarguably one of the most crucial aspects of web design. It has the power to evoke certain emotions in users, which wield a powerful influence over how they view a brand and how they feel when using a website. Plus it’s a great tool for focusing people’s attention on certain aspects of a page, and helping dictate their path to conversion.
So as a designer, there’s little doubt that how you use color is one of the most powerful tools in your toolkit.
However, it’s also incredibly subjective. A color that evokes a certain emotion in one person may create something completely different in another, depending on their personal preferences or cultural upbringing.
Plus, how you use color, particularly contrast, impacts accessibility for people who suffer from disabilities that affect the way they see things, such as color blindness or dyslexia.
So where do you start? Right here, with the basics of color theory in web design.
The basics of color theory
First, a quick trip back to art class at school where you probably used the classic color chart: a color wheel.
The colors in a color wheel can be divided into three groups: primary colors (red, blue, and yellow); secondary colors, which are obtained by mixing two primary colors (orange, green, and purple); and tertiary colors, which are a combination of one primary and one secondary color (yellow-green, red-orange, etc.).
How to control color opacity with RGBA in CSS
When it comes to specifying colors in CSS, the RGB color model has enjoyed immense popularity for many years now. The designer uses a combination of red, green, and blue to achieve the required tone. ...
White or black can be added to each color to create a different tint or shade until the number of colors becomes infinite.
Color theory in web design comes down to three main things:
- Complementation: How we see colors in terms of their relationship to other colors.
- Contrast: How we use colors to reduce eyestrain and focus users’ attention to certain elements on a page.
- Vibrancy: How we use color to influence the emotions of users or attract a specific target market.
The relationship between colors plays a large part in how visually appealing a design is, but there are a number of different ways you can combine them in a color scheme.
Opposite colors on the color wheel – such as red and green, or purple and yellow – are complementary. They create a strong contrast, which results in a balance that can draw a user’s attention and help to build a specific energy.
Split complementary, or compound color schemes, gives designers more wiggle room. Using two colors from each opposing end of the color wheel, it still provides a contrast, but one that’s a little softer.
Triadic color schemes are composed of three colors equidistant from each other on the color wheel, such as red, blue, and yellow, or green, orange, and purple. When using this scheme, it’s preferable to make one color more dominant than the other two to create the correct balance.
Analogous color schemes incorporate three colors from the same area of the color spectrum, such as shades of yellow and orange, or a mixture of greens and blues. They tend to have a lower contrast, but work well when trying to create a feeling of harmony and continuity.
Contrast is the area of color theory with the biggest impact on the usability of a website. It refers to the level of clarity between two objects on a page, most notably between text and background color. Low contrast may look beautiful and harmonious, but it’s much harder to read, especially if you have a sight disability or are using a mobile device outside on a sunny day.
The safest choice is a dark color on a light background, or visa versa, although try to avoid using pure black – in real life, it’s rarely seen and you want to reflect real-world believability. If you’re working with a light background, opt for a dark grey, or a deep blue, green, purple, etc. for your text instead.
In addition to creating usable text, you can draw your users’ attention to specific elements of a page, such as CTAs, by using contrasting colors to highlight them.
The level of contrast on your website has a profound effect on its accessibility for people with disabilities that affect their sight. Some 8% of the population suffer from a form of color blindness. That means choosing the wrong colors, such as red and green, will make your website virtually unreadable for them. Always choose a high contrast, such as blues and yellows, and ensure that color is not the only visual cue on the website.
Vibrancy, or the psychology of color
Finally, the vibrancy of the colors you choose has a profound effect on your users’ emotions, a concept known as the psychology of color.
Of course, sometimes your colors are dictated by the logo or wider branding material of the business or organization. Or you’re targeting a particular community where certain colors hold certain associations. For example, in China red symbolizes prosperity and happiness.
So which colors should you choose to evoke a certain emotion from your audience? Here’s a quick guide.
Warm colors: Red, orange, and yellow
- Red: A hot, stimulating color, symbolizing love, passion, and power. Also associated with anger and danger. Outside the Western world, it stands for prosperity and happiness in China, is the color for brides in eastern cultures, and is used to signify communism.
- Orange: Less overwhelming than red, orange is a cheerful color that evokes joy and happiness, and is regarded as friendly. Due to its association with the changing seasons, it can be used to symbolize movement.
- Yellow: The brightest color and often considered the most energizing. Associated with joy, happiness, sunshine, and intelligence, it’s a positive, optimistic color. Unless you’re in Egypt where it’s the color of mourning.
Cool colors: Green, blue, and purple
- Green: Bridging the gap between warm and cool colors, green symbolizes nature and has a healing quality, therefore has a lot of positive connotations. It’s also used for growth, harmony, and the environment.
- Blue: A very dependable color, blue signifies stability, expertise, and trust. It’s a calming color, though the exact hue varies its meaning, with darker tones used for corporate website and light blues for friendly, open sites, such as social media.
- Purple: Traditionally the color of royalty, dark shades signify sophistication, wealth, and luxury, while the lighter hues represent spring and romance. Also used for creativity, imagination, and spirituality, it has different meanings around the world, such as Thailand where it’s the traditional mourning color for widows.
Neutral colors: Black, white, grey, and brown
Neutral colors are mainly used for backgrounds and are often accented with brighter colors that provide the real impact on the page. They do, however, hold their own associations:
- Black: Wealth, power, elegance, sophistication, death.
- White: Purity, innocence, freshness, cleanliness.
- Grey: Tradition, calmness, conservatism, somberness.
- Brown: Earthiness, dependability, reliability.
Using color in web design
The colors you choose for a website give it meaning, without the need for any descriptive words. They provide an initial, instant impact for your users. So choosing the right colors is crucial to capturing the right emotions and mood, otherwise you’ll see a high bounce rate as users navigate away believing the site to be untrustworthy or unprofessional.
But get your combinations right, and they’ll influence the entire design, from the tone, style and emotions, to the usability of the website.
Like many things, A/B color-testing on your website can help you to identify which works best for your target audience. And it can bring about some surprising results. Heinz, the famous ketchup brand, once conducted a marketing experiment that saw them change the color of their signature ketchup from red to green. Which led to the highest sales increase in their company’s history, as outlined on this wonderful graphic from KissMetrics.
And as with any rules, once you’ve mastered the art of color theory, it doesn’t hurt to break it every now and then, to make your work really stand out from the crowd.
Nice article, really appreciated the real life example. It gave the context how we can use color schemes for web design. Can you please give a tip? What is the best color scheme for technology and software business sites. like ours: http://www.itscomsats.com. Thank you.
I’m glad you found the article useful – thank you for taking the time to comment.
The first thing that popped into my head when you said technology was blue, as it’s shows reliability and stability, which I see you’re using at the moment. Grey is also a good choice as it represents business wisdom. It can be a fairly serious colour, but you could always use orange as an accent colour – it’s friendly, trustworthy and symbolises communication so is a great choice for technology companies. A grey/black/orange combination would be striking.
I hope that’s helpful. There are some great tools online you can use to play with colour schemes such as Adobe Color CC: https://color.adobe.com/create/color-wheel/
Have fun playing with those combinations!
Does Flywheel have a summary of its colour pallette anywhere?