What's the main color on your website? And, what other colors are on your site?

If you’re in the process of building your business’ website, or have ever been through it, there’s a lot you’ve had to consider: the structure, the images, the copy. On that long list of important elements, where did the colors of your site fall? Possibly low on the list.

The Effects of Color

Whether you’re aware of it or not, the colors of the websites you visit every day affect your experience: both how you navigate the site, what you think about that brand or company, and even whether you purchase their products. The effect of color on humans is very natural, and “color theory” has existed for years.

So how do we use the effects of color on our consumers to our advantage? We can use the colors of our brand and our sites to make people buy, to make our business memorable, and to attract the right kind of customer.

It’s likely you already have brand and logo colors. If you’re looking to rebrand, then definitely take these tips into account. If not, you can still use colors outside of your brand to your advantage by incorporating them into your website.

picking the color on your website: A Few Examples

So how do you go about choosing color on your website? You have to understand the effects of each color, not just emotionally, but physically, on a person. Is it difficult to read a site with that color? Is it evoking the wrong feeling? Let’s look at a few examples.



Blue is very popular in technology, science, and finance industries. It promotes calmness (think oceans and skies), trust, and reliability. Speakers at TED Talks and the like are often told to wear blue on stage for the same reason: it causes listeners to relax and trust you, and it doesn’t distract from what you’re saying.

Blue can be an excellent choice if you need your customers to trust you. If your business is something that requires a lot of trust (like a bank), then making your customers feel safe the moment they reach your site can have a massive positive effect.

What Not To Wear: If you work in the food industry, you probably shouldn’t use blue as a main color on your website. It’s considered the “least appetizing” color. It’s also very corporate, so if you’re a young, fun brand looking to build an attractive site, skip blue or go for a more vibrant blue with fun accent colors.

Example: Check out Facebook’s particular shade of blue.



Red is both a great color and a dangerous color. It’s so powerful and vibrant that it can spur a customer into action very easily, but can also be seen as domineering, or too aggressive.

Red is excellent for restaurants since, unlike blue, red is very appetizing: think the bright red of Coca-Cola or Red Lobster. (Or as an extreme example, Red Bull.) For more upscale restaurants, a darker red can give the site a classy and warm feeling, evoking a rich red wine.

Brighter red is also used by many car companies in their logos, promoting speed and action. 

Not My Brand: Red may not be in your brand colors, and maybe you don’t want it to be your central color, but it has a lot of potential for your website anyway. Red is excellent for call-to-action buttons: it pops out from its surroundings and encourages the visitor to click.

Example: Toyota’s use of red in their home page’s CTA buttons.



Green is the color of nature, so it’s a popular choice for food industries, especially those with an organic or healthy spin. Outdoor activities, eco-resorts and hotels, and similar businesses may want a website that evokes the feeling of being outside.

Like blue, it’s calming, but not as corporate. It feels fresh and clean and positive, giving energy to a site without the dangers of red.  Dark green can also have a similar effect as blue, giving a sense of trust and calm.

Even if you’re not Whole Foods, you may want to emphasize some sustainability or “go green” efforts you’re making as a company. This is an excellent place to use green on your site, contrasting with your other colors and bringing attention to a campaign or commitment.

What Not To Wear: Be careful about using a bright green and a white as the main colors on your website. This can be overwhelming to the eyes.

Example: Evernote’s bright green website.



Black is a bold choice, and can be overwhelming if used too much, but when used correctly, it can lend a sophisticated air to your site. Black is difficult to design around, and is overpowering.

The heaviness of a black background can be contrasted with minimal content and larger text, which creates a sleek and classy look. A black menu bar or section can add a strong accent to a site, and mixing black, white, and a third accent color can be very modern and minimalistic.

If you go for black, make sure you have a designer that knows what they’re doing.

Example: The MAC Cosmetics black, white, and red site.

Website Color Combinations and Harmony

Whether it's, web design or art, color theory sets the fundamental guidelines around color combinations and color harmony. Designers rely on these sets of rules to help guide their projects in the right direction. We’ve all seen websites with clashing colors and poor color choices. Color theory can help avoid these mistakes and guide you in the right direction while adhering to your branding. To read more about color theory and its importance in the design process, check out Design Wizard’s post that can help you learn more about color theory.

In the end, color on your website will have a significant and likely unconscious effect on your potential customers. If you want to make sure that effect is the right one, do your research, be conscientious, and get an experienced designer to create your site. Your site is one of the most important places that a customer interacts with your business--so get that first impression right.


S-FX.com Small Business Solutions is a boutique web design and technology consulting agency geared towards start-up businesses, small businesses and non-profit businesses.  We specialize in implementing low cost technology solutions to maximize efficiency and reduce business operating costs.