One of the first questions you’ll need to address when you begin to create a website is which colors to choose for the design. Without a doubt, a website’s color scheme is one of the most important parts of a website — it’s one of the first things that site visitors notice, which is why selecting a good color palette is such an important part of the overall design process.
Color doesn’t only influence a website's look and style, it also plays a significant role in user engagement — the colors you choose for your website can impact its success in terms of visit duration, click rates, and sales.
Did you know that 90 percent of our assessment of a product is made on color alone?
While color is one of the most powerful tools in a designer’s toolkit, it’s a tricky concept to master — with an infinite number of possible color combinations out there, it can be hard to decide what colors to use on your site.
While many articles on color and web design direct you on how to create a color palette entirely from scratch, using color theory and color wheels, in this article I’m going to steer clear of that approach.
Instead, I’ll share highly practical tips on how to choose a website color scheme that doesn’t involve a deep dive into color theory. To make things easier, I’ll also provide some of the best tools for choosing color palettes.
You might also like: 6 Tools to Create Beautifully Designed Mood Boards.
8 simple rules to create the best website color schemes
Creating your own color schemes is not as complicated as many people think. There are a few tricks you can employ to create great color palettes without much effort.
1. Start with the emotions you want to convey
When you’re choosing a color palette for your website, you can’t just think about how things look — you have to think about how they feel, too. It’s a well-known fact that colors can provoke emotions. These meanings will have a direct impact on the way your users perceive your product. Thus, figure out what feelings you want to convey.
"When you’re choosing a color palette for your website, you can’t just think about how things look — you have to think about how they feel, too."
Ask yourself: What emotions or feelings do I want my visitors to associate with this website?
To get you started, I’ve compiled a quick reference guide that covers the basic associations with each color (in the western world):
- Red (Passionate, Powerful, Dangerous, Important): Red is an extremely stimulating color. It gives the impression of speed and power, conveys the sense of importance or notifies about danger. It has proven physiological effects of increasing blood circulation and raising metabolism.
- Orange (Playful, Energetic, Attractive, Cheap): Orange is a warm and vibrant color. It has an energetic aura and is able to create a welcoming feeling for your visitors.
- Yellow (Cheerful, Friendly, Stimulative, Attention-seeking): Yellow can be an extremely versatile color depending on the which shade you choose. Light yellow is often associated with the sun and hence communicates positivity and warmth. Dark shades of yellow give the impression of antiquity and age.
- Green (Natural, Safe, Fresh): Green reflects a sense of environmentalism and closeness to nature. It also signifies growth, and that’s why it’s often associated with a profitable business.
- Blue (Trust, Calm, Reliability): The color blue is often associated with calm and relaxing emotions. Blue emits feelings of inner security. That’s why you may see banks and technology businesses using the color.
- Purple (Luxurious, Mysterious, Romantic, Spiritual): Historically linked to royalty, purple insinuates that a product is high-end.
- Pink (Feminine, Innocence, Youth): Pink is most known for its associations with femininity (many people consider it as “girl’s color”). Despite this, pink isn’t the most popular color among women (according to Joe Hallock’s research). Pink is often used for romantic themes.
- Black (Powerful, Sophisticated, Mysterious, Edgy): Black is the most powerful color of the spectrum - it attracts attention faster than other colors, including red. That’s why it’s most commonly used only for text and accents. When used as a main component in a color scheme, such as a background, black is able to create a feeling of power or luxury.
- White (Purity, Health, Cleanliness, Innocent): White accents other colors around it, making it a popular choice for a secondary color. When used as a primary color, white is able to provide a “clean” feeling and focus visitor’s attention on important elements (such as contrasting call-to-action buttons).
- Gray (Neutral, Formal, Sophistication, Sterility): Gray is often associated with neutrality. Color scheme with gray as a primary color, creates a feeling of formality that’s why gray is so popular in the business world.
2. Limit the number of colors
Applying color to a design project has a lot to do with balance. The more colors you use, the harder it is to achieve that balance.
You will get much better results if you limit the number of colors used in design. As a rule of thumb, stick to a maximum of three primary colors in your color scheme. It’s proven fact that most users prefer simple color schemes: according to a University of Toronto study on how people used Adobe Color CC, most people said they preferred simple color combinations that rely on only two or three colors.
Tip: If you need additional colors beyond those you’ve defined in your palette, make use of shades and tints.
3. Avoid using pure black
When we see dark things in real life, we often assume they are black things. In reality, pure black almost never exists. All of the “black” objects around us have some amount of light bouncing off of them, which means they aren’t truly black, they’re dark grey.
When you place pure black next to a set of picked colors, the black overpowers everything else. It stands out because it’s not natural. Lots of the apps we use and sites we visit on a daily basis have blacks that aren’t real blacks, but dark greys instead. For example, the darkest color on Apple’s top bar isn’t #000000, it’s #333333. So remember to always add a bit of saturation to your color.
4. Try to follow 60–30–10 rule
This is a timeless decorating rule that can help you put a color scheme together easily. The 60 percent + 30 percent + 10 percent proportion is meant to give balance to the colors used in any space.
This concept is incredibly simple to use: 60 percent is your dominant hue, 30 percent is the secondary color, and 10 percent is the accent color. The idea is that the secondary color supports the primary color, but is different enough to set them apart. Your 10 percent is your accent color. It can be a color for the CTA or another element that you want to highlight.
5. Design in grayscale first
Playing with color is fun. That’s why choosing a color scheme is usually one of the first things we do when starting a new project. It’s really tempting to play with different color combinations right from the start, but I strongly recommend you avoid this temptation and instead focus on designing in grayscale first. Designing in grayscale before adding color forces you to focus on page structure and laying out elements.
Thus, first figure out the hierarchy:
And only after that experiment with the color:
6. Set importance using color contrast
Contrast is a measure of the variation between two colors. It’s a powerful tool that can help guide the eye. Generally, high contrast is the best choice for the important content or key elements. The more you want something to stand out, the more you should rely on contrasting colors.
Consider the following examples. In the first example, you barely see the primary call to action button “Get Evernote, It’s Free” since the color of the background and button are almost the same.
In the second example, you can easily spot the CTA button.
7. Follow the rule of continuity
Consider color continuity throughout your website. Continuity doesn’t mean using the same colors on every page — it would be too boring! It does, however, mean making a smooth color transition from one page to another using color. This will create a sense of familiarity when visitors explore your website. In most cases, it’s possible to such effect by using just one connecting color. For example, when visitors are moving to the product page from the home page, you can use your brand color for headlines to create the feeling of a consistent experience.
8. Consider Accessibility Aspects Of Design
Accessibility is a key consideration when designing with color. Today’s products must be accessible for everyone — regardless of a person’s abilities. Here are a few strategies to keep in mind when considering accessibility and color in design:
Avoid using color alone as an indicator
Approximately 8 percent of men and 0.5 percent of women are affected by some form of color blindness. That’s one in 12 men and one in 200 women. While there are multiple forms of the condition, red/green color blindness is the most common. A person suffering from this form of color blindness will generally have trouble seeing variations of both red and green.
Most of the websites we design have elements that can make color a blind user’s life really hard. Let’s examine one common case: have you ever gotten an error message when you’re filling out a signup form on a website that says something like, “The fields marked in red are required”? While it might not look like a big thing, this error message combined with a form in the example below can be an extremely frustrating experience for people who have color-vision deficiency.
Since colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), it’s important to use multiple visual cues to communicate important elements in your website. In addition to color, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.
Avoid low contrast for text
Color contrast is one area where color theory is crucial to the usability of a design. When you’re using colors in text, be aware that placing two colors with low value contrast next to each other can make your copy very difficult to read.
Check contrasts to ensure that background and foreground colors appear with enough contrast for a person who is color-blind or someone with low vision. It’s really not that hard — all you need to do is to check the contrast ratio.
Contrast ratios represent how different a color is from another color (commonly written as 1:1 or 21:1). The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The W3C recommends the following contrast ratios for body text and image text:
- Small text should have a contrast ratio of at least 4.5:1 against its background.
- Large text (at 14pt bold/18pt regular and up) should have a contrast ratio of at least 3:1 against its background.
Good news, you don’t have to check it manually. Using the tool Color Contrast Checker you can check your color combinations in just a few clicks.
Even with the information you now have about colors choosing the right color palette for your website can be a difficult task. Fortunately, there are plenty of tools that will help you create a color scheme. Below, you’ll find a list of the best tools for choosing color schemes available today.
You probably wouldn’t be expected to see this “tool” here, but there’s one good reason for this. The best color schemes come from nature. Why? Because those schemes seem natural to the eye. To create a great scheme, we only need to look around us — simply take a picture of a beautiful moment and create a color scheme for your website from it.
Adobe Color CC is a great tool for finding, modifying, and creating web color schemes. Every color on the palette can be individually modified, or chosen as the base color, with a few simple clicks. Palettes can be saved and added to a library, and there are a number of great color schemes created by community available on the site.
Paletton is similar to Adobe Color CC but the difference is that you are not limited to five primary colors. It’s a great tool when you want to play with additional tones of selected color.
Material design guidelines provide a fantastic color palette that can be used for your website. They provide the hex numbers for each color. The great thing about this tool is that all colors in this palette are designed to work harmoniously with each other. It also helps you to build up a colour scheme from one particular color.
ColorZilla is an extension available for Google Chrome and Mozilla Firefox that includes a raft of color-related tools, including a color picker, eye-dropper, CSS gradient generator, and palette browser.
Coolors is a powerful tool to create multicolored schemes. The cool thing about this tool is that you aren’t limited to only one outcome — it’s possible to receive a few color schemes simply by modifying the reference point. You can simply lock selected colors and press the spacebar to generate a new palette.
But that’s not all. You can generate color schemes directly from the image or photograph. The tool will analyze the image and return the main colors it’s used as a pallette.
You might also like: Best Practices for Developing Scalable (and Sustainable) Shopify Themes.
Color your world
Color can make or break your design, so it’s important to choose wisely when designing anything, particularly websites. I hope these tips mentioned above will ease the job of finding the right colors and color combinations. Now it’s time to practice — so do yourself a favor and play with colors. Believe me, it’s fun!
What are your tips for creating the best website color schemes? Tell us in the comments section below!