What is the first thing you notice about a website? If you answered “the colors,” a lot of people would agree with you! We often remember the color of a room, or someone’s clothing, even on something as temporary as gift wrap or a greeting card. Colors are used to create moods, draw attention, and create memories. In website design, the right color choices can do all of these things for your potential customer.

I recently worked with a client who wanted to choose great website colors but wasn’t sure how. It can be costly to experiment because preparing multiple designs with different color combinations can take a lot of time.

Here I provide some basic advice on how to choose website colors. I hope you enjoy it!

You might be asking some of the same questions I’ve heard from my clients. Things like:

• Should I use the colors from my logo and branding?
• What if I don’t have a logo?
• What if my logo is black and white?
• Can colors make my website easier to read?
• Are these colors too bright to put on a professional website?

With millions of colors and shades available, there are some tried and true ways to choose your website colors. I actually take several factors into consideration when I’m choosing colors for the websites I design—and I like them colorful!

Use your brand kit and colors to support your website design

It is definitely a good idea to start the process of choosing colors for your website by taking a look at your brand. You want your customers to recognize that you are the owner of this new website, so try to make the colors consistent wherever they see your brand. Experts recommend evaluating your brand at least every three years. If you feel that it is fresh and still reflects your purpose and values, by all means, use those colors. If it’s time for a refresh, it’s a good idea to complete that process before you start work on a website redesign.

Professional graphic designers should include branding guidelines with any logo or branding package. You’ll want to share the brand kit with your web designer. At a minimum, that would include hex numbers for your colors, a code made up of 6 letters and numbers. For example, #bbd63a is the hex number for the lime green color I use on my website. Most brand kits will include font names and single-color logos, like a black version and a white version, as well as your full-color version.

Even with a great logo, you don’t have to limit your website to using only your logo colors, especially if you feel your website needs more color, or if your logo is black and white.

Don’t overdo color

Your branding colors may not translate well on a website. I recently got a really cool logo from a graphic designer for a client’s website. The logo colors were so bright, almost neon, which looked really good in the logo because it was small. When I tried to use those colors in other parts of the website, I used muted versions of the colors instead and I thought it really worked.

Also, not everything needs to be in color. For most business websites you’ll want to keep the font colors neutral, almost black, and just use color in small doses. I recommend a dark gray instead of black for your fonts, because it’s a little easier on the eyes. Of course, it depends on your business. A really playful business or young clientele might need a lot more color.

Later I’ll talk about where you can find color palette inspiration. I noticed that the online palette generators have five or six colors. Most of the time I find that’s too many and that three or four are enough.You want to keep things simple and not distract from your website’s message.

Choose a main color and secondary colors for your design

When using colors on your website, you may be tempted to use an equal amount of each color. That’s actually not eye-pleasing because they’re all competing for your attention. Pick one color as your main color and the other colors as secondary colors. When using them on your website, use a formula like 70%-20%-10%.

Vary color value

Value is the darkness or lightness of color and not all colors have the same value. I recommend choosing colors that have different values (i.e. a dark blue and a light yellow). You’ll need different values for different purposes. Likely you’ll want a really light color if you’re going to be using colored backgrounds. A combination of different values is eye-pleasing because the colors aren’t competing with each other.

What colors should you choose?

Colors tend to evoke different emotions or feelings, so you’ll want to know your customer, their problems, and your value proposition well before choosing colors. Keep in mind that different values of these colors will have different meanings and different colors can mean different things to different age groups and cultures. There are a million articles on the psychology of color online.

Do you want to blend in or stand out? The colors you choose can set you apart—think T-Mobile’s bright pink. But if you need to look trustworthy, you may want to stay with colors that don’t stand out—think insurance companies.

Think about readability and accessibility

Make sure your text is in a color people can read. Yellow does not make a good headline color unless it’s on a dark background.

Always make sure there is enough contrast between elements on your page. Globally over 2.2 billion people live with a vision impairment, so make sure you’re not turning anyone away because they can’t read your website. I use an online accessibility checker to test the websites called ANDI, and there are several others available.

Color inspiration

I’ve been a graphic and web designer for over 25 years and look at color combinations everywhere I go. It’s probably one of my favorite aspects of this work. I find inspiration in nature, in the city, and in advertising, as well as in fashion and interior design. Of all of the color palette websites online, I like colorpalettes.net because they create color palettes from photos. The photos help to show the balance of color and the feel of the colors together.

I hope you have as much fun as I do when choosing your website colors!

Colors can create feelings of luxury, calm, trustworthiness, playfulness… What does your business want to portray?

If you want a little inspiration, check out some of the websites in my portfolio.

If you find you’d like a professional to help with your website, please contact us!