December 21, 2009

Tips & Tricks: Color Palette

Tips & Tricks is a section in which I will share some of the techniques and helpful hints of design that I have learned over the years. In doing so I hope to share more about the GetCreative design process, and help clients to get the most out of their websites. Today, we'll start with choosing a Color Palette.



Winter scenes are made of a few color palettes unique to this time of year. There is the white and blue and silver winter wonderland that Mother Nature has bestowed upon us this week in central Virgina, and there are the reds, greens and golds of holiday decorations. Color has a greater effect on us that most people realize...colors can influence our mood, our appetite, and our opinions. This influence makes choosing the right colors for your website all the more important. 

Know your colors 
Colors on opposite ends of the color wheel, such as seasonal favorites green and red, can have very different effects depending on their use. Because red and green are contrasting colors they are hard on the eyes if layered on top of one another. If used in moderation with proper white space, however, they can create festive and welcoming images.

This is hard to read and can create feelings of anger.

This limited use of red and green, however, conveys the message in a subtler and more effective way.

Individual colors can also have different effects based on how we use them. Blue, for example, is a very popular color and can elicit feelings of peace and serenity. However it is also one of the most unappetizing colors. Blue in food is rare and in some cases (think mold) can signify that the food has gone bad. For this reason, restaurants or retailers in the food industry should stick to colors that signify freshness and health in food. 

It is also important to think of your target audience; the color associations we have here in the United States are not the same for international consumers. And, colors used on the web have more limitations than colors used for printed materials (depending on your printer). There are 256 traditional web safe colors. Using these colors ensures that your viewers will all see your colors as you intended, and no unwanted substitutions will be made.  

Pick your palette
Now lets talk about matching and coordinating colors to your advantage. Most of my clients come to me with either a logo or a signature color in mind; this is a great starting block for picking a color palette. You choose one color you know you want used in your design, and choose coordinating colors based on your industry and the purpose of your website.

Let's take this shade of green                   and see what different palettes we can create with it.

We can make green the main color of our page, using different shades of green and neutrals to complement it, like this:

                                                                           

Or, we can make our green pop by using contrasting colors to make it stand out, like this:

                                                                            

There are many variations of palettes we can create starting with this simple shade of green.

                                                                             

                                                                            

                                                                             

There are quite a few online tools that you can use to help you create a color palette as well. ColorBlender.com allows you to put in the RGB values for your colors and mix them from there. ColorCombos.com has pre-mixed palettes for you to view, and you can search for colors by name, i.e. "green", or by hex number, i.e. "336633". 

In this website for a Computer Services company, I used a green similar to our example with neutrals to make it stand out. The possibilities are vast, so spend some time mixing and experimenting with color before you settle on your palette. Or, let me do the color matching for you! 

No comments:

Post a Comment