A Practical Guide For Creating the Best Website Color Schemes

A Practical Guide For Creating the Best Website Color Schemes
best website color schemes

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.
best website color schemes: business
Different colors can elicit different emotions.

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.

best website color schemes: limit colors
Using too many colors in design is like trying to convey a million feelings and messages at once. This only can confuse your site’s visitors.

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.

best website color schemes: shades of blue
Five shades of blue.

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.

best website color schemes: dark grey
Roads aren’t black. Shadows aren’t 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.

best website color schemes: ipad
Apple uses a color close to black for its top bar — it’s slightly muted, so it doesn’t overpower the rest of the elements on the page.

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.

best website color schemes: 60 30 10
You want the balance to be 60 percent your dominant hue, 30 percent your secondary color, and 10 percent for the accent color.

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:

best website color schemes: treehouse bw
Designing in grayscale forces you to focus on laying out elements.

And only after that experiment with the color:

best website color schemes: treehouse
Add color last and do it with a purpose.Designing in grayscale forces you to focus on laying out elements.

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.

best website color schemes: important
Both the CTA button “Get Evernote, It’s Free” and the background have a similar color. This makes it hard to see the CTA’s button.

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.

best website color schemes: evernote
Both the CTA button “Get Evernote, It’s Free” and the background have a similar color. This makes it hard to see the CTA’s button.

In the second example, you can easily spot the CTA button.

best website color schemes: firefox
The Mozilla Firefox website uses a contrasting green to direct the user’s attention to 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.

best website color schemes: intercom
Intercom uses it’s brand color (blue) for elements like headings and illustrations on each secondary page.

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.

best website color schemes: variations
Colors as seen with full vision (left) and the same colors as seen with red-green color impairment (center and right).

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.

best website color schemes: visual impairement 1
Left: Full vision. Right: Visual impairment.

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.

best website color schemes: visual impairement
Left: Fullvision. Right: Visual impairment.

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.

best website color schemes: low contrast
Low contrast text is something that can potentially break the usability of many websites.

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.
best website color schemes: contrast example
Even big names in the industry have color contrast problems. You can check the color-contrast rate and see that it doesn’t meet the WCAG AA standard for normal text.

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.

best website color schemes: contrast checker
WebAIM: The Color Contrast Checker.

Helpful tools

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.

1. Nature

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.

best website color schemes: nature
The best color combinations come from nature. You can create a color scheme from the photos you take in your natural surroundings.

2. Adobe Color CC

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.

best website color schemes: adobe
Adobe Color CC is an excellent tool that can speed up exploring various color scheme options.

3. Paletton

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.

best website color schemes: paletton
Paletton is similar to Adobe Color CC but it has one killer feature — it allows you to randomize similar colors and get a smooth palette.

4. Material Design Colors

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.

best website color schemes: material design
The hex numbers of each color available on Material Design Colors are prominently displayed.

5. ColorZilla

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.

best website color schemes: colorzilla
ColorZilla allows getting a color reading from any point in the browser.

6. Coolors

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.

best website color schemes: coloors

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.

best website color schemes: sean

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!

About the Author

Nick Babich is a developer, tech enthusiast, and UX lover. He's spent the last 10 years working in the software industry, with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

Grow your business with the Shopify Partner Program

Learn more