How to use color to draw attention to your website and brand

Written by Bogdan Sandu on 01 Sep 2017
21,717 Views • Web Design

It is a known fact that colors affect how we perceive things and the colors you use in your web design will surely affect how visitors view the service or product you present.

The color choice is one of the main components of web design, right up there with logo design, text formatting, and white space.

Think about it, would you like to spend much time viewing a site that has a bright yellow background? Some colors are irritating but can have their use.

The color yellow, for instance, can, in small doses, inspire a spiritual feel, but being that it’s one of the harshest colors, too much of it can scare people away.

We use colors on a subconscious level in detecting and categorizing things we encounter every day.  The school bus is yellow, green means go, red means stop or danger, etc…

Using this phenomenon, many companies plan their color pallet accordingly so that they could adapt to the attention preferences of viewers.  Some companies even use one single color that is in their logo as a base color in their entire brand. IBM is blue, for example. Use colors wisely.

Before going for your favorite color, you might want to consider what emotions and associations come with it and with all other colors you might consider.


Where to use color?

The color is ubiquitous, so it should always be chosen in a way that it matches the context you are trying to achieve.

Here we will discuss color in web design, or rather choosing the right color scheme for your web site, which includes background, button, pop ups, headline, and hero graphics colors.



Readability is the priority when choosing the colors for your web design. The colors need to compliment the text on the page and make it easily readable and seen.

This means you need a distinct contrast between the text and the background. The obvious conclusion is that you must not use the same color for both, even if they are different types of the same color and possibly distinguishable, this is not advised.

The light background needs a dark text and vice versa. The same goes when you are writing text over images. Darker text makes the reader keep his focus longer, which is especially important for long paragraphs.


The color spectrum

The color spectrum or wheel will help you better understand coloring in your web design. Every color, no matter what its initial association may be, can be used for a specific purpose, if you have use for it.

But, using colors from different spectrums without control can confuse the visitor and make your site look chaotic and cluttered. It is easier to combine colors that are of the same color spectrum level.

  • Warm colors – they include red, yellow, orange, pink, and brown, or any combination of these. They are by definition perceived as exciting or aggressive. They can inspire optimism or in large doses appear violent, so it is best to use them in small doses. In design, warm colors are often ‘toned down’ with the use of the light side of their spectrum, for instance, pale pink and yellow.
  • Cool colors – these are made from white, blue, green, gray, silver, and purple and are associated with spring and summer. Unlike warm colors, they have a calming and soothing effect. Blue, green, and purple colors all exude comfort and are nurturing, which is why they are ideal for advertising.
  • Intermediary colors – Depending on their hue, the warmth or coolness can be different in some colors. For instance, purple and green are considered to be intermediary because they can appear differently depending on the amount of red or yellow they may contain. Warmer colors have less blue while cooler colors have more blue.

Use the right color and use it in the right way

Manipulating colors is not a trivial thing. You need to choose the right way, time, purpose, and the right audience.

For instance, the black color would be a completely wrong choice for a web site selling kids toys. There you would naturally want to go with bright and vibrant colors, like red, green, and maybe yellow in the right amount to inspire playfulness. If you are perhaps promoting a women’s product, there you may want to go for orange, for example.

There are four principles for hitting the right color:

  • The right way
  • The right time
  • The right audience
  • The right purpose



When you are adding a new element to your web page, its color should be complimenting the other site’s elements and colors.

If your background is already bright, a darker color title will make them stand out and add appear dramatic, capturing attention easier.


Colors that are the best in grabbing attention

Warm colors are best in grabbing attention. Colors like red, yellow, and orange are best suited for this purpose.

Business oriented web sites need these attention-grabbing colors and they use them not only for their products and marketing campaigns but also for their web site layouts.

Color is an important part of creating a cool looking website. Sure, there are other elements as well, but the importance of color can’t be denied.

Web designers understand that colors affect how people will react and behave. Various studies prove that people who are considered impulsive shoppers will likely to respond positively to red, orange, royal blue, or black, while people who are cautious shoppers are more likely to respond to pink, light blue, teal, and navy.



When talking about attention, the red color is the best at capturing it. You can’t miss it or ignore it, which is why it is used to highlight important things like stop signs or no smoking ads, or for discount sales in stores.

It is a call to action color and is often used for the call to action buttons on web sites. But, red color also makes red cars more often stolen. It simply stimulates and enhances the people’s appetites, and is thus highly appropriate for food advertising.



The human eye finds the color yellow the most visible color of all. But, at the same time, it can be the most unpleasant color if overused.

It is for these reasons that the yellow color is best used for advertising in places where people are moving, like fast food joints. It is also good for warning signs, fun products or activities, and such.

It is proven that people will differentiate yellow products first amongst piles of other colored ones.



Being a blend or both red and yellow, orange color stimulates energy and creativity. It surely grabs attention but also implies safety which is why it is used for construction warning signs and such.

Sports teams use it often, and it appeals to children and teenagers, which is why it is often seen in toy advertising. It promotes social communication, which is why it attracts people in public places like coffee shops, restaurants, hotels, etc.


Neon colors

Neon colors are especially popular with teenagers, and that’s considered the attention-grabbing age. Neon colors are lime green, hot pink, bright orange, vivid yellow, or pink-purple gradients.

Teenagers like clothes that are with neon colors, and when combined with white or black, or some other neutral colors, they stand out even more. This combination is used in cell phone covers, school supplies, and similar stuff.


The influence colors have on your design

Colors determine the way you will brand the service or the company you represent.

To really understand that, think about the last time you were in a grocery store. What colors do you remember seeing?

There were red and orange signs for sales and discounts, green directions for the ATM machines, tan directions for the bakery etc. Remember old black and white labels that were indications that you are looking at a generic label item? All of these fall in the color categorizing methods.

Colors are used as visual cues, directing customers or visitors into categorizing what they are seeing.

And, if that really is the case then that is a good thing, but if your client is selling stuff like office supplies, you may want to go for a more serious color choice. Gray, black, or pastel blue colors are considered more elegant and more suited for those kinds of products.


Choosing the colors carefully

Making a mistake here can seriously misguide your visitor and give him a completely wrong impression about the service you represent, so you must choose wisely.

You need to assess the personality of the company you represent. By that, you must be aware if the company is formal, high price, exclusive, or all of the above perhaps.

Colors have cultural or psychological effects that have been ingrained into the people’s sub-consciousness for millennia. You cannot change these habits of perception, only abide by them or fail in your attempts to draw positive attention. Use the color’s ability to dictate the mood and the tone. Cool colors inspire calmness which is good for a serious tone or image, while warm colors inspire energy and excitement.

Consumers also inherently have a tendency to become emotionally attached to some colors, like the colors representing times of day, or seasons, or feelings.

To remind you of the trip to the grocery shop once more, tea was green, blue was ice or fresh, red meant ripe or meat, etc. Would you be inclined to purchase meat that had a green indication on it? Or purple? Now, you get the picture.


Ending thoughts

There are cases where a company uses a certain color or colors so well and often, they become a synonym for it, like Ferrari, for instance.

If you have a competitor that has snatched a color away like that, it would be a good idea to avoid it altogether. Or, for instance, UPS. They have used colors to present themselves as a no-nonsense company, and have thus used the brown color which suits them perfectly.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.