Improve your Website with a Splash of Color

50 Flares Twitter 38 Facebook 6 Google+ 2 Pin It Share 1 LinkedIn 0 Buffer 3 Filament.io 50 Flares ×

Color Pencils

The Influence of Color

First I would like to give you some examples of color, where they are used, how they affect us and what kind of companies are using them.

Blue: Darker blues are associated with reliability and stability and are often favoured by corporations (like GE, Samsung, VW, Ford).  Whereas lighter or bolder blues are more refreshing and vibrant like with Skype.

Red: This is a far more vibrant choice and should be used either sparingly or when exitement or passion are to be invoked.  Some companies using such a color include – Red Bull, Coca Cola, Quicksilver. You should also be aware of cultural connotations (Chinese sign of luck) and that in the web world it is often associated with error messages.  But let us not forget, it is also associated with love.

Orange & Yellow: These are bold choices, and can be very eye catching if used correctly.  Yellow is especially bright, and reflects happiness and of course sunshine. You might see orange used a bit more (aside from as a warning color) as it is a great attention grabber (such as the French Mobile company Orange and also Nickelodean (now Nick) the entertainment giant.

Green: This can be a very stable and harmonizing color, and is often used for more vibrancy than blue.  It has also come to be associated with growth, money and more recently, the environment .  Take a look at this google image query to see who is going green!!

Neutral: Colors such as gray, brown and black are often used as counterpoints to more bold colors. Design oriented sites often favour black to help highlight photos or other graphics.  Just be aware that black often has negative connotations (it is worn at funerals in the west after all).  It is also associated with darkness and evil and can therefore be a little depressing.

This is just a taste of how deep you can go with the influence of color.  For more information you can read the pages in the links below.

Smashing magazine summary
Color meanings

Using Color on your Website

Now that you have decided on the kind of colors you want to use, you may need some more help with a color scheme. I am no expert on this, but I have used some useful tools on the web to help me through this difficult process.

First you can try sites that offer color combination suggestions – often courtesy of those in the know, Designers!

Try out the color palette suggestions from Color Lovers.  At the top there is a color search field where you can give a main color, to find palettes to that use it.

Another option is to use a color wheel or similar, using one of the many tools available on the web. This requires a bit more work and testing, but offers far more control, should you be willing.  I have used both methods.  Here are a few tools you can try out:-

Color Scheme Designer gives you amazing control of the process, with main choice of single color, contrasting, triad (etc) before finding the right color

Color Schemer is less powerful, but offers a range of color choices from one starting color, you just need a Hex or RGB code to start with (see below if you don’t know what that is).

Color Picker is a simple tool for finding just one color (and its code) using a sliding bar for the main color, and then a color square to fine tune

Color Codes

Color CSS Code

Finding the right colors for your websites is a great start, but you need the codes in order to put them on your site. Unfortunately as the web has matured, the number of code types and their variants has increased. There are actually good reasons why that is, but I won’t go into them here. However to try to gain a brief understanding of the various types and their meaining, read on.

RGB

This is one of the main color codes you will see out there, perhaps only surpassed in popularity on the web by the Hex code (see next explanation).

RGB can come in two forms, each describing the mix of these primary colors in either a range or a percentage.

The following is an example of pure red (as the first place is the red value).

rgb(255,0,0) – The red, green, blue are numerical values from 0 to 255
rgb(100%,0%,0%) – or percentage values from 0% to 100%.

Hex

Probably the one you will see the most, Hex (or Hexadecimal correctly) codes can look a little strange.
They are basically the same as the RGB, except the values range from 1-16 (or correctly 1-F as the last 6 numbers are A-F)

#000000 – is no color, and will appear as pure black

#ffffff – is 100% of all colors and will appear as white

So each two characters provide a color in the Red Green Blue order.

** Don’t forget the # when you use the code, or the website will not render correctly.

RGBa

This is the newer version of RGB and includes and opacity as the last digit which helps fine tune the color even more.  It is not supported by all browsers as it’s part of the newer CSS3 specification, so if you do use it, do so with caution (ie. provide a fallback. This page from CSS Tricks provides more details if you need to know what that is and how to do it).

rgba(red,green,blue,opacity)

However unlike RGB, the final number is an alpha value ranging from 0.0 to 1.0.

HSL (also HSLa)

This too is a newer color representation that is part of the CSS3 specification. It provides a far wider range of colors, but is not as widely supported. As such, you won’t see if used so much, but if you are interested, it refers to hue-saturation-lightness numerical codes for colors.  Mozilla Developer Network has more information if you need it

Hopefully all this information has not put you off changing your site for the better. Feel free to contact me if you need some more help or advice.

If you really want to get into the nitty gritty of color, smashing magazine has an in-depth article on the subject. After ready that you will be a guru!

Oh, and I just found this great post on Crazy Egg from Kathryn Aragon showing 10 great examples of color use.

What color will your next website be?

Comments

  1. By Arleen
    Twitter:

50 Flares Twitter 38 Facebook 6 Google+ 2 Pin It Share 1 LinkedIn 0 Buffer 3 Filament.io 50 Flares ×