Whether you’re creating a website for the first time, or you feel like your current website needs a facelift, choosing the right colors to use is a good place to start. The problem with beginning there, however, is that the sheer volume of available color schemes can be overwhelming, which can lead to a lot of wasted time – or worse – colors that distract from your company message.
Table of Contents
Why website colors are important
Studies show that a website’s color scheme makes quite an impact right from the start.
Creates first impressions
You might have heard that love is the universal language, but you might counter that color is. Color influences people and their decision-making processes within a few milliseconds of seeing it. Think about it, playgrounds are bursting with color, but you don’t usually see that kind of visual excitement in a hospital because hospitals need to show cleanliness, calmness, and compassion. Schools tend to lean toward light blues, greys, and beiges to encourage focus while the Apple Store is a stark white that conveys practical excellence without customers even needing to step foot inside.
(Pixabay / ivanovgood)
If you don’t have an actual storefront, your website’s color scheme is even more critical to your company’s success. It is your first chance to capture your audience’s attention and can lead to some near-instant judgments upon the first click.
Influences feelings toward your product
Let’s start with a hypothetical situation: You’ve recently acquired a professional hockey team, and you’re looking to do a little bit of rebranding. Since the colors peach and cornflower blue are your favorites, you decide to redo the website, and it didn’t take long for your fans to revolt. Peach and cornflower?? What is this? A flower shop from the 1980s?
Chances are good that your team’s fans are used to some pretty vibrant tones because colors are well-known to influence feelings. Here’s a look at the emotions that are commonly associated with certain colors.
| Color | Example Companies | Feeling |
| Red | Coca Cola, Legos, Pinterest | Red often elicits feelings of excitement and youthful exuberance. |
| Orange | Fanta, Harley Davidson, Amazon | Companies that use orange as a part of their branding often want to convey confidence in their product or that their product is friendly or cheerful. |
| Yellow | Best Buy, McDonald’s, IMDB | Yellow is often used as an accent color, but when you see it on the center stage of a company’s brand, they’re often bringing clarity or optimism to a situation. |
| Green | Whole Foods, BP, John Deere | These companies usually have a vested interest in health or the environment. |
| Blue | Lowes, Oral-B, Pfizer | Blue is easily the most popular color for both men and women, so companies that want to appeal to a wide audience often use it. That said, blue is often a symbol for dependability and trust. Coincidence? |
| Purple | Yahoo!, Hallmark, Cadbury | Purple is the color of choice for companies that want to show their creativity and imagination. Think Willy Wonka and his Everlasting Gobstoppers, Pixy Stix, Runts, and Laffy Taffies. |
| Black, White, Grey | New York Times, Apple | Monochromatic colors like white, black, and grey often symbolize calm, balance, and no-nonsense information. |
| Rainbow | Google, Windows | While many logos have a few colors, companies that expressly use several bold colors as part of their brand are often shooting for diversity. |
Draws attention to specific elements
While it’s important to keep to your color scheme, color has a way of directing people toward their next move. Varying up some of your colors can draw attention to specific details on your page. If your main color scheme includes monochromatic blues and greys, a pop of orange for your Call-to-Action (CTA) can help turn views into conversions.
Makes web design just a little bit easier
Let’s face it- if you have a standard color scheme, your job of designing your website gets a little easier. If your CTAs are always one color, you don’t have to think twice when you add a new one. Similarly, if all of your pages are arranged the same, your customers don’t have to think so hard about where to find information. It’s a win-win.
Brand recognition
Chances are pretty good that if you are on Facebook’s website, you know it without reading anything on the page. Their medium blue stripe across the top is a standard, tell-tale aspect of their branding, and you can follow their lead with your own website. Keep your page elements and colors standard across your entire website, so your customers don’t have to wonder if they accidentally left your site.
Types of Color Schemes
There are several different kinds of color schemes out there, but the four most common are monochromatic, analogous, triadic, and complementary.
Monochromatic colors
Monochromatic color schemes are often used to make the viewers feel safe and calm. They are usually comprised of several shades of the same color, so everything blends effortlessly.
Analogous colors
These color palettes are made up of several colors next to each other on the color wheel. The combination of red, orange, and yellow creates an analogous color scheme. These are often vibrant groupings, but they are difficult to do well without seeming overly busy.
Triadic colors
This is a little less well-known than some of the other options, but it’s still a good choice. Basically, you are making an equilateral triangle on the color wheel. Two examples of this palette are lime green, scarlet, and indigo, or blue, red, and yellow.
Complementary colors
Complementary colors are located on opposite sides of the color wheel. Examples of a complementary color scheme are yellow and purple, green and red, and orange and blue. These color pairings are automatically pleasing to the eye, so they’re a solid direction to go.
How to test website colors
If you are looking for feedback on your web design, you can always ask trusted friends, family, and co-workers what they think, but you have another option. Some websites will let you test out color schemes and analyze what parts of your website grab customer attention effectively. These sites create what looks suspiciously like a heat map to help you see where you have emphasis and where you might still need color to help you highlight an important aspect of the page.