Get Social with us: 

 

 

Skip Navigation Linkswebsite-color-design

Home >> Software Articles >> Web Colors

Web Color Design For Website or Blog

 

In this article, you will get some insight on how to effectively use colors in your web design layout. You will learn a lot about website color palettes and color combinations for website or blog themes. We put a lot of resource links to complement what you read here.    

The basic colors on a webpage or blog include:

- Main Text color (the fonts)

- Page color that the main text will appear on

- Color of text links

- The navigation colors (colors on the text or image navigation)

- Background color or image (outside the text area)

 

So let's get started:

 

Background and Text Colors

Today, the flexibility of the World Wide Web has made it very simple for developers to use background color combinations and text to create different textures and styles.

In most Web design guidelines, high contrast between text color and background color is recommended with key emphasis being on the traditional black and white colors.

Other web design gurus concur on the fact that optimal legibility requires black text on a white background (often called the positive character).

A white text color on a black background (the so called negative character) is almost as good. However, this inverted color scheme throws some people off a little, since it lowers the readability of the site’s content. Using it in footer or sidebar content is perfectly ok, but many successful people have adopted this web color design theme.

 

Aesthetics and Appearance

Experts such as Nielsen, express the vital benefits of having a simple web design. He also outlines the key role that aesthetics play in effective website creation. In the words of March Angel, Unilever Chief IT officer, great website color selection, just like most decoration endeavors, calls for a balance between the functional aspect and aesthetics. Factors such as appealing text colors, color templates, color palettes and background color combinations play a key role in stimulating a positive user impression and experience. This is particularly useful for commercial websites that are geared towards attracting massive amounts of traffic. 

Established web designers especially in the field of HCI, such as Don Norman, have recently begun to emphasize the importance of color combination.  He has noted that color plays a significant role in manipulating the user's emotions, experiences, reactions, and purchasing decisions. 

 

Selecting Your Color Scheme

When you decide to revamp your website or create a new website, there are a few very important factors to consider.  You will need to ask yourself the questions below when you are choosing color templates, combinations, palettes, background colors, text color and fonts as well as any other color related design features.

  1. Does your site need to sync with any existing color scheme? 
    This is particularly important for commercial websites that need to maintain and reflect the branding aspect that the company has already been using. In fact, in a study conducted by Harvard University, Department of Computer Science in 2010, sixty percent of website designers interviewed agreed that the need to comply with an existing color scheme was one of the major driving forces when it comes to selecting a website color combination. For example, if you are redesigning a website for a hockey team, it is best to stick to the same colors of the team uniforms or logos.

  2. What is the intended use of the website?
    If you are looking to create a website for a business with an intention to stimulate people to buy a product or a service, the color you choose will need to stimulate the right kind of emotion and create a first impression on your visitors (Business Monitor international, Online Business Report, 2013). In another study on color psychology in marketing, 54% of the online markets interviewed agreed that changing the color palettes of their websites had a direct impact on their sales. For example, if you are selling Caribbean vacation packages, you need bright blues and yellows that evoke feelings of the Caribbean and make users feel like they are halfway there.

  3. What kind of graphics and photos will you incorporate into the website?
    It is important that your text and background colors match with the graphics and images that you have incorporated into your web design, and vice-versa. Graphics and photos you intend to use must be taken into consideration when choosing colors for your website not to say they must be of high quality and resolution. 

 

How Many Colors Should You Use?

While there are no hard and fast rules regarding the amount of colors used on a website, most qualified website designers will recommend that you use only 3 main colors. General speaking, the larger the number of colors you decide to use, the harder it becomes to keep them all in harmony and create a consistent and balanced appearance for your website.

As a starting point, implement and try to stick to the 60-30-10 rule. This rule has been used by fashion designers and interior decorators for many years and works equally well in website design. The rule essentially states that you should pick only 3 colors and use them in the ratio of 60%, 30%, and 10% respectively. 

  1. The 60 percent should be accounted for by the primary color you intend to have on your website, and it should set the overall mood of your website.
  2. The 30 percent should perfectly contrast with the 60 percent to give a stunning visual effect.
  3. The 10% is largely an accent color such as text links. It should complement either your secondary or primary color.

In conventional web design, it is preferable to make either the primary color (60%) or the secondary color (30%) a neutral color such as, grey, black, beige and so on. This will give you unlimited number of options when it comes to selecting the other two colors. The idea behind this is the principle that neutral color templates will merge well with any other color you choose.

 

Shades and Tones; Go for Variety

When choosing colors you will need to bear in mind that you also have a certain amount of freedom to move within each of your color choice. In most cases, you will need to diversify your website color palettes to go beyond your three basic elements other than add a 4th or 5th color to your website. Ideally, try different shades and tones of your three colors. 

By darkening or lightening tones in strategic places on your site, you can easily establish distinction without destroying the harmony of your 3 color balance. Also note that you need to have some patches with white text color or white background. In fact, a little white is normally recommended for commercial websites.

 

How to Effectively Choose Website Colors

Luckily, there are hundreds of websites that offer assistance when it comes to choosing web color combinations, templates, palettes, text colors and background colors. You can find one using google or by choosing one of the sites below to help you whip up a state of the art color palette. Here are our top four choices!

  1. Colors On The Web - http://www.colorsontheweb.com/
    Colors on the web is an excellent tool to help you find complementary background colors and experimenting with shades and hues. With this tool, you only need to pick your background color and it will give you a whole range of color suggestions for secondary and tertiary colors.

  2. Kuler - https://kuler.adobe.com/
    Kuler is a flash based library of professional color themes provided by Adobe. To access and use Kuler, you will need to create a free Adobe account. 

  3. COLOURlovers - http://www.colourlovers.com/
    This is a design community with experts who share ideas and thoughts on website text colors, color palettes, color templates and much more. This platform offers a lot of cool stuff.

  4. PHOTOCOPA - http://www.colourlovers.com/photocopa
    This is a product of the COLOURlovers community but is unique in its own right.  It is an extremely handy tool since it allows you to create a color palette based on the colors extracted from a digital photo. This is perfect if you are designing a site that will use one main image for a header or will be used for photography that follows a similar theme.

Some additional sites that can help you choose good color schemes for your website include:

  1. http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/
  2. http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/
  3. http://www.webdesignrazzi.com/2013/html5-css3-templates/
  4. http://www.hongkiat.com/blog/business-website-template-tutorial/

 

​Share, Tweet, or give a thumbs up if you like this article: