Web Design of Any Complexity
Categories
Latest News
Color

Color Matters: Choosing Colors for Your Website

What You’ll Learn

  • Colors and Their Meanings
  • Keep Your Colors Natural
  • Make Sure Your Website is Legible
  • Avoid Too Many Colors on Your Website
  • Taking in Account Visual Disabilities
  • Online Tools to Help You Create a Color Scheme for Your Website
  • Conclusion

Introduction

You consider color when choosing your clothes, the color of your house, when you paint the walls in a room, when lighting a stage, when picking flowers, and even the color you die your hair. Color matters for most of the things you choose, so why shouldn’t it matter on your website? Color sends a message and it is important to carefully select the message you want to communicate to your website’s users. It can instantly engage your visitors or drive them away. Understanding color and its implications is the very first step to creating attractive and affective websites.

Information regarding color and web design has no limits. This introduction to color on the web will only braise the surface of the endless resources available for this subject. Understanding colors that ‘go together’ is partly intuitive. However, you do not need to be a designer to grasp the basics and make good choices for your website. Here are some tools that will help you along the way.

Colors and Their Meanings

Al Martinovic and his article Color Psychology in Online Marketing outlines colors and their meanings. I provided his list below with a few modifications.

  • RED is associated with love, passion, danger, warning, excitement, impulse, action, heat, blood, and tattoo art.
  • BLUE is associated with trustworthiness, success, seriousness, calmness, power, and professionalism.
  • GREEN is associated with money, nature, animals, health, healing, life, and harmony.
  • ORANGE is associated with comfort, creativity, celebration, fun, youth, and affordability.
  • PURPLE is associated with royalty, justice, ambiguity, uncertainty, luxury, fantasy, and dreams.
  • WHITE is associated with innocence, purity, cleanliness, and simplicity.
  • YELLOW is associated with curiosity, playfulness, cheerfulness, amusement.
  • PINK is associated with softness, maternity, sweetness, innocence, youthfulness, and tenderness.
  • BROWN is associated with earth, nature, tribal, primitive, and simplicity.
  • GREY is associated with neutrality, indifference, industrial, and reserved.
  • BLACK is associated with seriousness, darkness, mystery, grunge, ‘hardcore’, metal, industrial, and secrecy.

Keep Your Colors Natural

Don’t use too many bright colors on your website. This is typically seen on older websites and immediately dates your site. More importantly, it’s hard to look at bright colors on a screen for too long. You don’t want visitors leaving your site because their eyes hurt. There are some popular sites that use bright colors inventively and create a lively, young and fresh atmosphere. Twitter pages are a great example of this. Take a look at the example below:

Notice that the colors are ‘bright’ but washed out – by adding white. Web designers consider white the easiest color to look at on a screen for long time. Adding it to your bright colors keeps their ‘playfulness’ while enhancing readability.

Here is an example of a website that abuses bright colors:

But it would be boring to exclude color all together. Instead, choose a light colored background (add some white to the color of your choice) and dark text, or a dark background with light text.

Light Background / Dark Text

Dark Background / Light Text


The subject of contrast and legibility has many elements and complexities that cannot all be addressed in this post. Smashing Magazine has a wonderful article about contrast and legibility.  I found ColorLovers blog Calculating Color Contrast for Legible Text and W3shools Color Test extremely helpful. Below I compared examples of a legible website and illegible website.

Legible Website

Illegible Website


Don’t try getting too crazy with the color of the background. If you want to add some depth to your website consider different textures. Textures In Modern Web Design from Smashing Magazine’s blog has wonderful examples of using texture on a website.  Also, look at other websites you like and pay attention to what they used as a background.

Avoid Too Many Colors on Your Website

Too many colors make your site seem ‘busy.’ And the more colors you have the harder it is to design. Five different colors seem to be the magic number for web design color schemes. Cameron Chapman in Smashing Magazine’s article Color Theory for Designer, Part 3: Creating Your Own Color Palettes talks about picking the number of colors in a color scheme.

Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

Some of the easiest color schemes are white, gray, black and a color.

Or you can try it with brown.

Think About Your Audience

First consider the demographics of your target audience. How old is your target audience? Are they teenagers, children, adults or seniors? Are you targeting students, professionals, males, females, parents, teachers, lawyers, high income, or low income? Are your visitors coming largely from the US or internationally? Categorize your target audience as thoroughly as you can. The better you understand your audience the more you can customize your site to their needs. Don’t forget to take in account disabilities like poor eyesight (especially if targeting seniors), learning disabilities, and color blindness.

The Color of your Website is Important

Many web designers understand the technical workings behind a site, how to construct navigation, how to create a layout, and how to stick to a theme. However, a web designer who’s mastered the use of color is in a league above the rest. Picking the color of a website should NOT be an easy task. If it seems easy, then you are not giving it enough thought. The color of the site needs to send the same message as the text and images. The subjectivity of color makes this task difficult and ambiguous.

Choose a Key Color

A key color is a dominant color in a color scheme or mixture. Remember, you can’t choose a color until you have laid out what your website is trying to communicate. Only then, with your website’s agenda in mind, make a decision on the key color. Creating a list of associations for your color is a great tool to help you decide.

Creating a color scheme

A Color Scheme is a combination of colors that harmonize with each other. When creating a color scheme always remember the Rule of Contrast for a Website: use at least one dark color, one medium dark color, one medium color, one medium light color, and one light color.

There are endless ways to create a color scheme. The four traditional color combinations are as follows:

  • Mono-chromatic: Using one color (hue) throughout, utilizing that color’s various tints, tones and shades. Using a mono-chromatic scheme with multiple textures creates character and maintains unity.
  • Complimentary: Using two colors (hues) that are opposites such as red and green or violet and yellow. Choose varying tints, tones, and shades which will give the bold dramatic effect you are looking for.
  • Analogous: Using three colors (hues) that are neighboring each other on the color wheel. These schemes can be warm or cool since colors are adjacent on the color wheel.
  • Triadic: Using three colors (hues) that are equal distance apart on the color wheel, such as red, yellow and blue or using secondary colors yellow-green, blue-violet, and red-orange.

Using it on your Website

For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Online Tools to Help You Create a Color Scheme for Your Website

Once you’ve decided on the mood you want to convey to your visitors, use these tools to help you pick a color SCHEME (a series of about 5 colors that you use consistently throughout your website).

Adobe Kuler is a site that provides preset colors schemes. The main advantage is the fact that visitors can choose the set of colors that best suit them based on different criteria like rating, positive comments, or even the names of those combinations.  Adobe is also responsible for Adobe Creative Suite (Illustrator, InDesign, Photoshop, Flash, and more…). The site is fun and easy to use with literally hundreds of color combinations.

ColourLovers is a resource that aims at influencing chromatic trends. This is a great place to check out the world of color irrespective of the purpose, be it for ad campaigns, product design or architectural design. You can compare palettes, submit news and comments, or read articles and interviews.

Red Alt – I Like Your Colors is another important resource if you enjoy a particular website and you would like to employ the same set of colors, or at least detect exactly which are the hues employed with their corresponding programming code. You just insert the URL of that site and the colors are extracted.

ColorJack is a very interesting site, very similar to Kuler, providing different color combinations based on certain algorithms. The main tools offered are Color Galaxy, Color Sphere and Color Studio; if you are not familiar with web design programs, they may seem a bit difficult to use, but you will get easily accustomed.

DeGraeve Color Paletter Generator is similar to the Red Alt tool. What is more interesting about this one is the fact that you can select a photo that you think best suits your type of business and this instrument will extract the color palette it consists of.

Conclusion

Spend more time considering color and you will see a huge improvement in your web design. Color on a website is like lighting in a room. Cool fluorescent lights belong in an office building or a school, not your bedroom or living room. Just as warm mood lighting would not belong in an office or school. It is important to choose your colors wisely so they fit the purpose of your site and don’t confuse your visitors. Colors also affect readability, the illusion of space, implicit connections to objects and places, and have the ability to calm or excite the viewer. Use all of these connotations to your advantage, rather than ignore them and risk sending the wrong message.

Color can make or break traffic on your site. So follow these 3 steps when choosing your color…

  1. Consider what you are selling or communicating.
  2. Look at the list of colors and their meanings. Find the color that falls under the category of what mood you want to convey to visitors
  3. Now that you’ve chosen your ‘general’ color, make wise decisions choosing different hues, tones and compliments of that color.  Don’t overload your site with too many bright colors because it will be hard for visitors to look at the screen. Create a color scheme using the tools above and limit your palette to around 5 different colors. Check out this article from smashing magazine to learn more about hues, tones, chroma, saturation, shades, contrast and other color theory terms.

Apply your color scheme to your website and STICK WITH IT. Make sure the color of your site is cohesive and follows a pattern. If the color scheme changes all of sudden visitors will think they are looking at a different site. You are branding a company and avoiding confusion by carefully selecting your color scheme and sticking to it.

Some superb examples for a variety of color schemes include:

Works Cited

11, // March. “Web Blog / Calculating Color Contrast for Legible Text by COLOURlovers :: COLOURlovers.” Color Trends Palettes :: COLOURlovers. Web. 29 May 2011. <http://www.colourlovers.com/web/blog/2010/03/11/calculating-color-contrast-for-legible-text>.

Chapman, Cameron. “Color Theory for Designer, Part 3: Creating Your Own Color Palettes.” Smashing Magazine. 02 Aug. 2010. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/>.

Chapman, Cameron. “Color Theory for Designers, Part 1: The Meaning of Color.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/>.

Chapman, Cameron. “Color Theory For Designers, Part 2: Understanding Concepts And Terminology.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/>.

“Choosing Colors For Your Website Design.” How to Create a Website – Free Tutorial for Beginners. Web. 29 May 2011. <http://www.2createawebsite.com/design/color-psychology.html>.

“Choosing the Right Colors for Your Web Site.” Avangate.com. 15 Sept. 2008. Web. 29 May 2011. <http://www.avangate.com/articles/color-web-site_59.htm>.

“HTML Color Names.” W3Schools Online Web Tutorials. Web. 29 May 2011. <http://www.w3schools.com/html/html_colornames.asp>.

Kuler. Web. 29 May 2011. <http://kuler.adobe.com/>.

London Executive MBA, MBA HRM, MBA Finance, MBA Accounting, Training Institute UK. Web. 29 May 2011. <http://hrodc.com>.

Primary and Secondary Colors. Web. <http://personal.monm.edu/KHEALDSCHMELZER/>.

Snell, Steven. “Textures In Modern Web Design.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/>.

Studio 13: to Make Your Design Come True. Web. <http://www.studio13.fr/>.