Among business owners trying to choose their own website colors, there’s a common thought:
Ugh, I’m not a designer!
I tried, but I created a psychedelic nightmare!
Can’t I just use the colors in my logo?
As hard as the task may seem, selecting a website color scheme is important, and unless you have a design department, the job will be yours to tackle.
What you need to know is, it isn’t hard at all.
If you pay close attention to your brand identity and your target audience, think about the psychological effects of color, consider accessibility factors, and apply a little color theory, you can come up with a website color scheme that works for your business.
This article will summarize the factors you should consider when selecting a website color scheme. At the end, you’ll get a practical, 4-step approach to making the decision. You will need to focus on:
- Identifying your brand’s dominant color
- Using it to define complementary accent colors
- Paying special attention to your background color
- Using the colors in the right elements of your site
Let’s get started with a discussion about the importance of color in establishing a solid brand identity.
Brand Identity — What Color Is Your Company?
A company’s logo may be its silent ambassador, but its brand color scheme is working at an even subtler level to create a desired customer reaction.
Branding colors are a major part of the corporate identity of many well-known companies. Think Coca-Cola red, Starbucks green, or UPS brown — many companies have created an enduring color association in the minds of consumers.
But the colors that define a brand don’t just facilitate brand recognition; they can also have a profound effect on customers’ emotions. Companies have learned that colors play a role in driving our decisions, and in a competitive marketplace, ignoring such a powerful tool would be rather unfortunate.
Image credit: Color Hunt
Color Consistency Across All Platforms
It’s crucial that you use colors consistently across all of your marketing channels. That means everything — print ads and brochures, all digital platforms, even your business cards — should all be designed with your brand’s colors prominently featured.
If you’ve already established a brand identity, whether it’s through your business’ Facebook page, local ads, or your logo on the side of a van, you have your company colors figured out. That makes selecting your website color scheme much easier!
You’ll want to preserve and amplify your existing brand identity by continuing to use the same colors you’ve chosen.
Hopefully, you didn’t just close your eyes and pick a color when designing your company logo. If you did, and your brand identity is still in its infancy, it may be smart to start over. That puts you in the same position as those who have not established a brand identity at all. It’s not a bad place to be.
Quite often, a logo would be created without thinking about how the colors would look splashed all over a website. If you’re just starting a business, you have the chance to consider things like that before committing to colors that might not work in all your marketing channels.
Focus on the Customer — Know Your Target Audience
One of the first things you need to consider when selecting brand colors is your target audience. Depending on your product or service, picking colors that will resonate with your customers might be a no-brainer.
Let’s say you’re selling chainsaws. One of the main differentiating characteristics of your target audience is gender. A color scheme centered around traditionally masculine colors (black, brown, etc.) will be the way to go.
But a target audience is defined by more than gender. For most humans, purchasing is not driven by logic, at least not entirely. Sure, people buy the things they need, but that “need” may be a desire to project a certain image to the world.
No one really needs one of those massive analog watches you see people wearing. Nevertheless, displaying that sort of bling serves a very real purpose for those who choose that style.
Many purchases are intended to project our personality or interests. Once you identify a group of consumers as your target audience, it’s not hard to map their personality traits and interests to a set of colors they’ll find appealing.
If your goal is to attract customers who relate to nature and peacefulness, green is a good choice. To attract people who value safety and stability, choose blue. Black appeals to those who want to project power or opulence.
Getting into the head of your customer base might involve a little amateur psychology, but it’s necessary when defining your brand’s look and feel, including the colors involved.
Speaking of psychology, the next section dives a little further into the subject, addressing how color psychology impacts purchasing decisions.
Image credit: Ciitmaur
Color Psychology: An Introduction
Numerous studies have shown that people correlate colors with certain emotions and ideas, and that those connections vary based on factors like age, gender, and nationality. Different colors can attract specific types of customers and have a significant impact on behavior. Companies commonly employ color psychology to attract the type of customers they want.
Color & Commerce
Our brains process color first, then words and shapes.
When we’re traveling down the highway and see the McDonald’s Golden Arches, many of us register the giant “M” made of french fries (or maybe that’s just me) and think, “Yum…McDonald’s!”
That’s some seriously effective marketing, but there’s more going on than mere brand recognition. A second before the restaurant name pops into your mind, you experience a subconscious desire to eat. That’s because the fast-food chain selected its red and yellow color scheme specifically to whet your appetite.
It’s scientifically proven that red triggers an increase in appetite and yellow creates an association with happiness.
So, just seeing the McDonald’s logo makes people hungry and happy! As a fan of clever marketing, I’m lovin’ it!
If colors can have that level of impact on our buying choices, it makes sense to use website colors in a way that enhances your business. As discussed above, certain colors create subconscious associations in the minds of consumers, so you should align your color selections with the reaction you’re trying to elicit.
Color & Culture
Colors hold different meanings in various parts of the world, so if your audience spans cultures, that’s something you’ll need to consider when selecting brand colors.
Variations in color symbolism around the globe are too numerous to list here. Some colors have a practically universal appeal, and some have a psychological impact that contradicts assumptions.
For many cultures, purple is associated with wealth and nobility, but in Brazil and Thailand, the color is linked to mourning. Similarly, in many Asian cultures, white is linked to death and bad luck, whereas Western cultures associate the color with purity and cleanliness.
If you’re interested in attracting people of a specific culture, the job of identifying that group’s color biases will be relatively easy. If you seek an international customer base, however, you may need to account for multiple cultural factors. In that case, choosing more universally liked colors will be advisable.
The colors you use in your web design and, more importantly, the contrast between those colors have a huge effect on accessibility. Customers must be able to easily take in your content, so focusing on readability is critical when choosing your website colors. In addition, depending on your audience, it may be important to use a color scheme that’s helpful to people with visual impairments.
The current Web Content Accessibility Guidelines will give you all the details you need on this subject, but you can get a brief overview of the topic here.
Image credit: Color Contrast Checker
Readability is all about contrast. You’ll want to work with your chosen color pallet, but also find colors that offer a high degree of contrast. A contrast checker is useful to verify your selection.
A general rule of thumb is, for maximum readability, body text should jump off the page — your text and background colors should have very high contrast. A call to action will also require contrast, but you can branch out into brighter colors.
You can really get creative if you have an infographic, a call-out, or any website element that you want to draw attention to. Contrast is still key, but you can consider a more drastic shift to colors outside your basic scheme.
What About Visual Impairment?
As the internet became the massive marketing platform that it is, the average age of users increased. Today, many senior citizens shop for products and services online, and a lot of them don’t see as well as younger shoppers. There’s no reason your web design should exclude those people — not when it’s fairly easy to address their needs.
To help people with visual impairments, the most important factor, again, is contrast. Many common eye disorders negatively impact a person’s sensitivity to contrast. Differentiating between shades becomes difficult as age progresses.
If your site features cool gradients and slick color combinations that make it feel clean and modern, it will look great to most people, but for users who have a hard time with contrast, the site will be difficult to take in. Depending on your audience, you may decide to rethink that eye-popping color scheme in favor of one that will work for everyone.
Another factor to consider is color blindness. It’s hard to include in design. Due to the nature of the condition, providing an alternative color scheme is the only way to fully address the issue. It’s that, or go monochromatic, which could cause your site to look pretty lame to everyone else.
A good compromise is to exclude this factor in all but one critical area — your call to action. When selecting colors for action buttons, stay away from color combinations that confound colorblind users. Examples of such combos are red and green, or blue and yellow.
The ABCs of Color Theory
It really helps to know the basics of color theory when you’re deciding on the colors for your website. It’s not as complicated as the name implies, and you don’t have to geek out about it. A brief overview should give you all the information you need.
Color theory is a collection of guiding principles pertaining to the categorization of colors and the use of color combinations to achieve a desired visual effect.
Early color theory concepts date back to the 15th century, but the ideas have never been codified as an exact science. Rather than attempting to explain how or why we see colors, color theory serves as a tool to foster creativity in the application of visual arts.
Image credit: Visme
The Color Wheel — Your Map to Eye-Catching Color Combos
The modern color wheel uses smooth color gradation in a circular pattern to represent a theoretically infinite range of color combination. It arranges color hues around a circle in an ordered way that illustrates the relationships between primary colors, secondary colors, tertiary colors, and their variants.
The pure colors (hues) are located on the outside of the wheel. Moving inward, the next ring contains tints (the hue plus white), the next ring shows tones (the hue plus white and black), and the inner ring contains shades (the hue plus black).
The primary colors, which are red, yellow, and blue, are equally spaced on the wheel. These are the colors that cannot be created by combining two or more colors.
Choosing a primary color as the dominant color for your website gives you a lot of leeway when defining the rest of the color scheme. As you experiment with combinations based on this color, you’ll find that the primary colors create a good foundation to work from.
Speaking of color combinations, that’s how you get secondary colors and tertiary colors.
Secondary colors come from combining two of the three primary colors. There are three secondary colors: orange (from red and yellow), purple (from blue and red), and green (from yellow and blue).
You get tertiary colors by combining a primary color with a secondary color. Not all combinations work — mixing red and green or blue and orange, for example, will both result in an indistinct brownish color.
Tertiary colors come from mixing a primary color with an adjacent secondary color. If you select two colors that are next to each other on the color wheel, like mixing red and purple, you get one of the tertiary colors. In that case, it would be magenta. Other tertiary colors include red-orange (vermillion) and blue-green (teal).
Using Complementary Colors for Contrast
Complementary colors are two colors located across from each other on the color wheel.
Using complimentary colors is a way to achieve a high degree of contrast. For some designs, maximum contrast is exactly what you’re looking for, but exercise caution. Misuse of complementary colors can result in content that’s hard on the eyes.
If your website features charts and graphs, the sharp contrast of complementary colors will make your content pop. However, even in that case, it’s best to utilize one color of a complementary pair as the dominant color and the other as an accent color.
Warm and Cool Colors — a Universal Classification
The concept of warm and cool colors is immune to demographics — generally, everyone in the world thinks of red as hot and blue as cold.
The red part of the color spectrum contains warm colors, including red, orange, and yellow. Browns and tans are part of this group, too. Warm colors can induce feelings of warmth, but can also represent anger and danger.
The blue portion of the spectrum is home to cool colors: blue, purple, and green, plus many shades of gray. Cool colors can be associated with calm, but may also evoke sadness.
We perceive warm and cool colors quite differently. When they are used together in a design, the contrast visually promotes the warm colors and causes the cool colors to withdraw. Warm colors have a stimulating effect, while cool colors bring calm.
Defining Your Website Color Scheme
As shown here, there are several critical factors that go into selecting the right color scheme for your website. This section pulls it all together in a quick summary, offering a simple, four-step guide on how to get it done.
Step 1. Identify your brand’s dominant color and use it as your starting point.
Your main brand color anchors the color scheme. All the other colors you use will be determined based on how well they look with the dominant one, so selecting it is a crucial first step.
Step 2. Access your inner artist and come up with the perfect complementary colors.
This is where color theory and the color wheel come into play. Get as involved as you want, do some experimentation, and seek a second opinion. This decision will greatly affect the visual appeal of your website, so take time to get it right. Complementary colors will be used as accent colors on your site.
Step 3. Pick your background color — it’s all about contrast.
Consider readability as the primary factor when selecting a background color. Your choice can mean the difference between important elements jumping off the page or getting lost in a jumble of content. The background color also has a huge impact on readability, so seriously consider how your body text will look when selecting the color.
Step 4. Carefully apply the new color scheme to your website.
Although your brand’s dominant color is the anchor of your color scheme, it doesn’t need to be the main color of your website. The color is undoubtedly featured in your logo, which will most likely be displayed prominently. That means you can apply the primary color selectively, using it only to highlight sections that you want to draw attention to.
The complementary colors you defined should be used as accent colors to create visual appeal and draw the eye to secondary information on the site. Perhaps you want to include a feedback button or highlight an informative call-out, but you don’t want to distract users from your main call to action. That’s a good example of where you should use your accent colors.
Image credit: Digital Synopsis
Now that you’ve read about some of the basic factors to consider when defining your website color scheme, hopefully it’s not as challenging as you thought.
Consider your brand identity and audience, factor in a little psychology and color theory, and before you know it, you’ll have a website that’s uniquely designed to attract customers to your business.
Have you chosen the color scheme for your website? How did you decide on it?