How To Use Color On Your Website



Making Effective use of Color in Websites

When discussing the design of a new website, a question that consistently arises is - “How do I select the most effective colors?” Choosing the right color palette for a site is essential to communicate your message, brand your product or service, and, if you are an online business, sell your products. Everyone has favorite colors, but how those colors are interpreted may vary from culture to culture. Color communicates far more than most people realize. Choosing wrong colors can be a disaster for your website. Work with one of the best website design companies in Austin, Texas and let us help you select your color palette.

Read our new blog article - Good Cursive Font Choices - Overcoming your Unnatural Fear of Cursive Fonts

Before selecting colors, we ask the following questions:

When deciding on a color scheme to use for your website, it’s best to keep your palette to four hues or fewer. A simple formula is to find one dominant hue, one secondary hue, and one accent hue. The dominant and secondary hues can have color variations, such as shades, tints, or tones. White is a color, and it should be your BFF color, too. Reign in your color enthusiasm with a whole lot of white. Too many colors can create a sense of confusion. The Internet is a colorful place, and there is a lot that can be accomplished by using color correctly, at the right time, with the right audience, and for the right purpose. It is highly important! You need to be sure that colors you use do not convey important information. As a rule, when the picture is uploaded onto the web its color does not really matter for the user, everyone will understand the image and its visual message if it is presented in full color or black and white.

  • Who are your site’s potential visitors?
  • What are your products or services?
  • What are your site’s key objectives?

Your website’s potential visitors might come from a global or regional market, or exclusively from North America. Did you know that the color white symbolizes mourning in China, or that purple is the color of death in many Catholic countries? Yellow is an Imperial color in Chinese countries, but in America it may symbolize cowardliness or urine. More important, shifting colors to another area of the color spectrum can completely change their impact. For example, yellow shifted toward red results in a color that indicates gold or ‘having value.’

Your visitor demographics also can make a difference in how colors are perceived. Young people are drawn more to saturated colors than adults, who may find them garish or offensive. Strong color contrasts can also drive older visitors away. While young people may respond positively to new color trends, these fashionable colors can be overused and go out of style as quickly as they appear. Text and background color choices also affect readability, which can be an issue for older visitors and those with visual impairments.

The following is a list of colors and potential meanings:

Website
  • Red: passion, romance, fire, violence, aggression. Red means stop, or signals warning or forbidden actions in many cultures.
  • Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity. Purple is associated with death in Catholic cultures, as mentioned above.
  • Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
  • Green: nature, fertility, growth, envy. In North American cultures, green means ‘go,’ is associated with environmental awareness, and is often linked to fiscal matters. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
  • Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal - gold - and are universally valued.
  • Black: power, sophistication, contemporary style, death, morbidity, evil, night.
  • White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture, as mentioned above.

Many websites today clearly reflect the negative effect of bad color choices. People often choose colors to 'dress-up' their site without any regard to their site’s objectives.

Here are several mistakes commonly made in selecting website colors:

When you are choosing color(s) for your fonts, only pick 1 or 2 brand colors that truly represent you or your business to use in your headline or sub-headlines. Anything more than that will just look messy and circus-like. Making Effective use of Color in Websites When discussing the design of a new website, a question that consistently arises is - “How do I select the most effective colors?” Choosing the right color palette for a site is essential to communicate your message, brand your product or service, and, if you are an online business, sell your products.

Colors are selected that conflict with your brand, service or products.
If you have a well-known brand like Coke, you can use bold colors like 'Coca-Cola red' as much as you want without concern. However, very few companies are in the unique position where the brand name is more powerful than their brand color. Less well-known businesses should carefully consider the colors they choose for their logos and website. Certain colors work well with specific types of businesses. For example, warm colors, such as reds, yellows, and oranges – often called a 'fiesta palette,' can work well for food sites and restaurants that offer spicy fare. Colors in the warm range can also be effective in selling products associated with sun, passion or sensuality. Creams, whites and dark brown colors can be used successfully on websites that sell chocolate products. Cool colors, such as blues and greens, complement outdoor products, airlines, medical services, law firms and intellectual content. These colors can reflect trust or a relaxed attitude. As one person has noted, '… the color blue has a relaxing effect on the nervous system, and some studies have shown that it increases productivity when used as a background color. However, don't use blue in your color scheme if your product is food-related, as blue is a natural appetite suppressant.'

The web site uses saturated background colors that fight with your site’s content and make it difficult to read and navigate.
If your site uses product pictures or headlines with important messages, you should always chose a desaturated background so the images will ‘pop’ or ‘stand out’ on the page. A saturated background will dominate your page, causing both the content and images to be lost. Not only will your content be hard to read, your pictures will lose their effectiveness and your site will be difficult to navigate. The colors of your product pictures and key messages should always be more highly saturated than your background colors. Keep in mind that graphics and areas on your site with the most saturated colors will attract the visitor’s eye first. Here's an example:

On the left you can see a product name and picture on saturated backgrounds. Next to the graphic is an example with lighter, less saturated color backgrounds. As you can see, the less saturated colors on the right complement and 'sell' the product name and picture more effectively.

The example above shows color saturation reduced by 10% each step. You can see that colors move from garish to modulated to dingy as they progress from left to right. The 4th through 7th colors in each row are the best choices.

This example shows the impact of changing colors from saturated to desaturated, moving from dark to light for each color sample. The saturated colors on the left retain their 'pop' even when made lighter, while desaturated colors move into the background and become more muted as they become lighter.

The example above shows how back and white text appears on saturated versus desaturated color backgrounds. White text has more ‘pop’ on a saturated background while black text is more readable on a desaturated background. The white text on the desaturated background 'shouts' less, as well. Note that the product picture appears more intense on the saturated color box, while the blue box looks less blue on the saturated color box. The picture and blue box are the same color in both examples. The desaturated example is most effective.

Your website uses too many colors.
Color harmony is the most important criteria when selecting colors. We recommend selecting a moderate number of colors. Four or five colors, plus black and white, should be sufficient. Too many colors create discord and will distract the user.

Contact Austin web designers.to discuss your website and colors.

Learn more about putting these website elements to work for you:

Color | Fonts | Search Engines | Optimization

Published by Incomedia in Web design · 5 December 2018
Do you ever pay attention to colors when creating a website?
You should. Using the right colors on your site is essential to attract the right audience, keep readers interested and encourage them to come back. Here's why: colors affect feelings and have a unique persuasive strength.

If you're looking for a fast way to use on your website project today, then you'll find very helpful tips in this practical guide to making the best website layout with the color scheme that's right for your target audience. And using the Force of Colors infographic you're gonna be a Jedi web designer too!
No Color Theory here, but tips on how to put it into practice based on what we learned in creating WebSite X5 templates.
In this post you'll find how to choose a color palette which fits your project and learn to apply a cohesive color scheme on any kind of website. You'll learn how to increase conversions up to 24% more by choosing the right color. Whether you want to start your own blog or an online store, publish a site about yourself or your company, colors will no longer have secrets.

Force of Color facts and why to choose the right colors

Colors affect a bunch of elements on a website: background, menu, buttons, titles, text, links and images. Colors make a web page readable, push sales and can have an impact on brand recognition at the very first scroll. For this reason, color is a powerful web design tool. Though, how powerful?


Getting to know the Force of Color is essential to Jedi web designers. So when you're designing your website, take into account the impact colors can have on users. Keep an eye on our Force of Colors infographic: when you're making your site, it will be a lot easier to focus on what matters for an effective layout.

What is a color scheme and how to use it on your site

A simple and effective way to create a color scheme is to choose 2 main colors with just the right amount of contrast and 1 or 2 text colors. Like this:
  • 1 Base Color
  • 1 Accent Color
  • 1 Text Color in white, black or grey
The color you need to use the most on your site is the Base Color. The Accent, instead, is a vivid tone that gives personality to your blog or website. For this reason, it's essential to use it less and on very small parts of your site, like buttons and icons.
And sure enough, if you think about Amazon, the orange 'Add to Cart ' button instantly comes to your mind. The same happens with the YouTube red Play button. Ever noticed?

4 galactic steps to generate the best palette for your site.


1. Choose the Base Color from the web galaxy (listen to the Force of Color)

To drive users to your site, ask yourself: 'Do I know what they like or dislike?'. When it comes to selecting the right Base Color, empathize with your potential target audience, learn their habits and foreseeable reactions. An old wise Jedi would say: 'Connect to the Force'.
First, find inspiration on the internet. Understanding the users' web galaxy means you need to surf it. You can use these 3 coordinates to find the way:
  • your website category: be inspired by the most visited sites for your niche. The color palette for an insurance company website is unlikely to be the same as the one for a kids' site, don't you think?
  • Your logo (if you already have one): use the established color as your Base, because a cohesive corporate identity helps users to remember your business or products. So look for those sites that use your graphic colors to get hints.
  • Your personality: imagine your site were a real person and search for the color that embodies what you stand for. Use stereotypes like the meaning of colors or the warm and cold colors differences.
The coordinates above seem a little conventional, but they can be useful for 3 reasons: they underline which colors users are most attracted to, which colors they are most accustomed to and how to be different.
Here's a tip: use these two free color-picking tools to choose the right color for your site. To identify web colors they both use the HEX code, a six-digit alphanumeric number preceded by #:
  • ColorZilla: this is an amazing Chrome and Firefox extension that lets you grab colors right from your browser; you can extract a single color or even an entire website color palette.
  • BrandColors: it has a full list of HEX colors that popular brands have on their site. From Amazon to Apple and Coca Cola.
So now that you've got plenty of ideas, let's take the next galactic step: choose the Base Color. Honestly, it's really simple and you don't have to use Photoshop or any other image editing software.
All you need to do is to open the Google search bar and type the word 'Color Picker' or the HEX code, that you got using BrandColors or ColorZilla. You'll see the color information for your pick right there on your screen.

Use your mouse to control the target and experiment until you find the most effective color value for your website. Google provides information about any colors. For example you'll find the RGB values, used by some website builder (including WebSite X5) to specify colors.

2. Combine the Accent color with your Base in less than 5 minutes

Here's how to find the Accent color in less than 5 minutes with an easy-to-use and complete color palette generator. Not sure it's possible? From Jedi to Jedi: 'That is why you fail '.
  • Go to Paletton and type your base color HEX code in the box A ;
  • Select 'Add Complementary' B to get the opposite value to the dominant. You don't like it for your palette, uh? Then move on.
  • Click the icon 'Adjacent ' C to get a similar color to the Base.
  • Or, click the 'Triad' D icon for a more contrasted value.
  • Then, choose 'Alternative with Text' from the 'Preview' menu E and you'll get the white, black and grey tones for your text according to the Base and Accent colors.

You know what? The color scheme for your site is ready! In less than 5 minutes.


From the 'Example ' Foption you can test the look of your palette on a sample web page. Click to start the option and see a standard website layout in the color scheme generated right on your screen. There is no doubt that Paletton is a color scheme generator with lots of useful features for web designer newbies.
For a quicker way to get a pleasing color combination for your site, try the tools on the following list.
If you're looking for ready-to-use color palettes, keep an eye on these websites:
Want to make a color scheme out of an image?
In Julie Gibbons' article on how to choose a color palette for your blog you'll find a beautiful gallery of color palettes inspired by images in different moods. Follow her tips to learn how to use these tools at their very best.
If you have a personal website or blog about a hobby, this tool is for you:

because it generates palettes inspired by places, seasons or a specific topic.
For example, you can color up your travel blog with the colors that remind you of the places you love. Winter sports fan can instantly make color scheme inspired by snow-clad landscape. WOW!
Are you getting into the whole color palette thing? Then it's time for a new galaxy. Find more about the art of color coordination in Color Theory from the Kissmetrics infographics.

3. Apply a color scheme to your site<

'Do. Or do not. There's no try. ' Get inspired by the most famous Jedi quote and let's go on a mission. Suppose you have to create a music website for a friend or a client. What colors will you choose?
How to change color on your website
To find the right color palette, go out on the web for inspiration and then choose:
  • What feeling you want to convey to your audience
  • What you want to say about the subject
Look at the 2 sample sites from the 3sounds template:
a website of a classic summer music festivalset in warm colors whose harmony relies on the use of similar Base and Accent colors (the contrast is based on the 'Adjacent '); colors recall a sunny summer day and the wooden classical instruments which are the main subject of this website.

a website of a DJ
set in bright and vivid colors that perfectly contrast with the white Base Color (contrast from the 'Triad '); energy and rhythm coming from the striking contrast reminds of the electronic music played by the DJ.

Did you notice that the color design of the page is virtually identical on both sites? That's because it follows the color scheme hierarchy. We applied the Base Color to the whole background, while the Accent (well, we used more than one Accent Color) was limited to buttons and the text we wanted to stand out.
Yet, the 2 projects are different. Why? Because each color palette stands for a different mood: one is classic and the other is contemporary.
The 'right' color palette talks about youtalks to your audience.
The right color combination is a matter of balance. The meaning of colors guides and the psychology behind them are helpful tools to guide you when building your website personality. But, in practice, the best way is to find concrete connections between colors and your website subject (seasons, sun, materials).
Just as Gregory Ciotti wrote in a compelling article about colors ' The key is to look for practical ways to make decisions about color. '

How To Use Color On Your Website Free

The don'ts of choosing buttons and text colors

When it comes to color and web design, it's easy to make wrong decisions.
  • use too many colors
  • use complementary colors for text and background
  • use too many warm or cold colors
We recently made a big mistake too. But to turn you into a Jedi web designer, we'll share with you what we learned.
You can see that getting users to try our product is essential to our website strategy. When we launched the version 13 ofWebSite X5, we decided to apply the Base Color (blue) on the 'Download Free ' button too.
So we decided to test using green and red button options.
The results? The red color increased the click rate by 24%. It was (by far) the best outcome.


Yes, red works fine, and this is confirmed by online research, but the point is that both colors (red and green) highly increased the conversion rate.

How To Use Color On Your Website Step By Step

How come?
'The less a color is used, the more likely it is to stand out '.
Red and green have a 'stark contrast ' to the blue Base Color. It's hard not to notice. And you know full well that it's pretty easy to get lost in the web galaxy!

Conclusions

So, you've seen how easy it is to use many color palette generators and how they make creating a website color scheme incredibly simple. In fact, when it comes to color design the hardest thing is to find the right balance that fits best for the site.
Follow our Jedi guide to color web design for your next project and it will be easy to use colors
at the right time

How To Use Color On Your Website For Beginners

for the right purpose.
(May the Force of Colors be with you)
How to use color on your website as a