3 ways to find the best website color scheme
Choosing a color scheme is one of the first, and often hardest, parts of designing a website. Most people have a strong emotional connection to particular colors. Pick the right ones and your site will have that certain something that keeps visitors engaged. Pick the wrong ones and people might think the circus is in town. The bad kind, with scary clowns.
To help you choose the best color scheme for your next website, here’s a simple process I like to use both with clients and for my own projects.
Scenario 1: The client has a logo or brochure they like
If the client has a logo or brochure and they’re happy with it, then the colors for the website are set. I start with what they give me, then I try different tones to see what looks best. I also test complementary colors to those in the logo. Complementary colors can make the logo standout in the layout and they work as a nice highlight color for headings and links.
Scenario 2: The client has a logo but they don’t like the colors
In cases like this, the client usually has an idea of what they want but I have to tease it out of them. Here are a few color-related questions I ask in the first meeting:
- What colors do you like?
The client may already have an alternative color scheme in mind, which takes the guesswork out of the process. - What kind of feeling do you want the website to have?
Here’s where color psychology comes into play. Reds, oranges, and yellows for hot or active websites. Blues, greens, and purples for cooler, calmer websites. I’ll walk you through my color psychology cheat sheet in a bit. - Do you have particular photos or images in mind for the site?
Like a logo, the colors in pictures can direct the website’s color scheme, either by borrowing colors or suggesting complementary tones. - Who’s your target audience?
The purpose of a website is to connect the client’s product or service with the right audience. The color palette plays a big part. Age, gender, economic status, and other demographic information helps build a picture of what visitors might anticipate from a website’s design. - What’s the industry (if I don’t already know)?
There are expectations in certain fields, so I start with “status quo” colors in most cases. For instance, companies with natural products tend to use greens and earth tones. Sometimes, however, it’s fun to break the rules to create a more interesting design.
Once we’ve worked out a basic color scheme I go back to the steps in Scenario 1 and try different shades, tones and complementary colors.
Scenario 3: “It’s your call. That’s why I hired you.”
Once in a while I come across a client that just doesn’t want to decide. They hired me to design the website and that’s what they want… ME to design the site from top to bottom. In situations like this, I put myself in the client’s business and try to answer the questions from Scenario 2 myself. I find a few well-designed websites in the same field or industry to see what color schemes are common. Then I try those to see if they work with the client’s logo, branding, and product colors. Adobe kuler and Color Scheme Designer come in handy when I have trouble finding the right combinations.
When all else fails, I turn to color association. The color psychology cheat sheet I promised is below. Each color includes a sample of web-safe tones along with the color’s associations and the types of websites that would be a good match.
Red
Red can create a sense of excitement and vibrancy. It’s associated with strong emotions, including love and anger. Darker values create a more luxurious feel.
Websites for: vineyard, hotel, modern or edgy audiences
Orange
Orange is active and energetic. It’s an informal color associated with happiness and creativity.
Websites for: food products or services, cooking, yoga
Yellow
Yellow is another active, high energy color. It encourages communication and is associated with happiness (e.g. smiley faces), optimism, enlightenment, and spring.
Websites for: flowers, construction
Green
Green is the easiest color on the eyes, so it has a soothing quality. It’s associated with nature and symbolizes growth, hope, success, and money.
Websites for: retreats, environmental projects, natural products
Blue
Blue has a calming effect and, depending on the tone, can even be considered depressing (e.g. “I feel blue”). It’s associated with trust, dependability, faith, and healing. Blue can also reduce the appetite, so use with caution on websites for food-based products and services.
Websites for: medical supplies and services, babies, scuba and water products
Purple
Purple is a balance between active red and calm blue. It’s associated with royalty and spirituality.
Websites for: winery, fitness, products and services with a female audience (light purple)
White
White is the presence of all colors. It’s associated with cleanliness, light, and purity.
Websites for: bridal products and services, winter resorts, cleaning products
Black
Black is the absence of all color and makes surrounding colors standout. It’s associated with power, luxury, and mystery or the unknown.
Websites for: nightclubs, photography
Don’t forget that different cultures have different color associations. If you design websites for an international audience, you may need to do more research.
When you have a process to deal with common design challenges (like picking a website color scheme), you can work through them faster. This simple, three-step system should help you find the right colors for any website and send those scary clowns on their merry way.
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
One Comment
WoW :) awesome article. Some nice tips to choose color of a website. Thanks for sharing this nice post.