How we perceive everything around us is heavily influenced by color so it does not come as a surprise than using the right color palette for your website is both important and an intricate part of the design of a website.

The way we notice colors is characterized by a mixture of sensory and implicit experiences in our everyday life which means that there is almost no way of setting specific codes or laws for color in website design since this is, at the end, an individual experience, but there may be a few ground rules, including tips and tricks, that we can follow to make sure we create a great looking site that communicates our needs and fulfills the sites purpose. So whether you are building a site with tools like Dreamweaver, Breezi, Notepad++ or any other type of website building tool keep in mind the following fundamentals that we have laid for you.

Color: It’s Psychological and Cultural Perception

Colors have a subconscious meaning that can help you get your message across when it comes to web design and color is such a powerful tool that it can leave a lasting impression on a person when they visit your website.

Since colors also have a social side to them and they can evoke several emotions it’s natural that the way they are categorized and arranged it’s not unique so they vary from time to time.

Image source – colorindesign.net

We can divide colors in three different ways; warm, cool and neutral colors. Colors on the color wheel can be categorized as warm colors if they are closer to the red side of the wheel itself, they bring emotions of coziness, warmness and comfort but they can also cover the opposite range like anger, rage, emotion and excitement.

Colors that are closer to the blue and green side of the wheel bring calmer emotions; sobriety, deepness, coolness and tranquility but they can also show sadness and indifference.

Image source – Stoneleigh Wines

Neutral colors are closer to having no saturation at all and can go from grey to full black and white. The fact that they are considered neutral does not mean they do not induce any feelings. Their feeling needs to be taken into context and can change depending the way it is applied, neutral colors add sobriety and sometimes lack of emotion if they are closer to shades of grey, the ones closer to black colors add notoriety and give a feeling of a distinguished personality, then, if you go closer or full white you can show pureness, freshness and a clean feeling.

See how feeling changes on the next image depending on the tint and hue it’s used to color it, we are using warm, neutral and cold colors to color it which give each third of the image its own feeling.

It’s sometimes hard to define colors in just a single way since most of them work on a context and have and individual perception. Color impacts not only on the way the user feels but also how they perform and decisions to take. Since red can imply excitement, speed and danger it would not be good to show this kind of colors on a student test or have it in hospitals and nurseries though it may have a good impact on athletes and sport activities.

Take a look at this website thumbnail, showing red on a bar or restaurant may not be the best but since this is a sports themed restaurant/bar it serves the purpose.

Image source – Red Card Sports Bar

Taking into consideration the visual makeup of color and the fact that the internet is a visual medium, there are some psychological emotions that color can produce that will lead the way into choosing the right scheme for your website. Let’s take a look at the next list and keep in mind that the opinions laid out vary from person to person so feel free to experiment with a few hues to achieve needed result.

The Psychological Color Wheel

Power, Passion and Energy

Red will help you represent energy, passion, excitement and power, use this in a cautious way since it may also have a few negative connotations that you may not want to have associated with your website as danger, anger and aggression. Google uses it to display a site that has malware. So a full red background is probably not the best option for your website. Needless to say this can work for specific cases.

Image source – Sports New Media

Elegantly Dark

Elegance, power, drama, mystery, secrecy and luxury can be represented through the use of black. This may be one of the hardest colors to work on since readability and contrast play a huge role on your website. Use this color with proper guidelines.

Image source – Breezi

The Calm and Coolness of a Website

Coolness, spirituality, freedom, patience, peace, loyalty and sobriety come into mind when looking at blue websites; this can assist you into accomplishing a good website design if you are looking for something fresh. Remember as with every color it may have its side effects since blue can also stand for sadness and depression.

Image source – The Master

Like A Blister in the Sun

This is a happy one; it brings light, optimism, brightness, joy and creativity to you. Using the right tone of yellow can help you reach a younger or playful audience and will add visibility to your brand.

Image source – Polish Taxi

Orange Crush

Though similar to our previous one this color adds friendliness, warmth, courage, approachability and playfulness to a site. Use this if it fits your website motifs or yellow show too edgy for you.

Image source – OrangeQC

Green Is In

Green shows as one of the most difficult ones to pinpoint since it has so many connotations already. Life, naturalness, health, food and often money; if used properly this can lead to a good design. In some contexts this can mean decay and toxicity.

Image source – AziendaOleariadel Chianti

Violet

Wisdom, sophistication, celebration and esotericism area associated to this color.

Image source – Get Characters

White

This one is a wide and broad one. It can show purity, cleanliness, freshness, peace and emptiness. Minimalism is heavy aided by this color and the use of white and negative space can prove really helpful when choosing your site’s color.

Image source – Nils Clasen

50 Shades of Grey

Security, sobriety, maturity and reliability come with this color. Longevity may play an important role with the proper application. Keep in mind that this tone can be seen as dull if not exercised properly.

Image source – PneuservisPraha

Pink

Softness, femininity, sweetness, innocence and tenderness are into this one. Fun and excitement can very easily be achieved by the proper use of pink.

Image source – Restaurant MidiSoir

Brown

Comfort, strength, stability and credibility are portrayed by the color brown. Primitivism and earthiness can also be linked to this.

Image source – Resistenza

Color Combination and Themes

There are several ways to match and combine different hues without losing harmony, and there also are some usual sets of colors and batches that we can use to make our website pair a certain theme or topic. Themes schemes of color can be obtained by combining different colors in a still related specific way.

Motifs

There are lots of themes that can be used when designing your website and choosing it’s colors. If your website’s content has a recurrent theme already don’t doubt to use its colors to make it fit a certain feel. There are several topics that we can use, look at the picture below and see some examples as neon lights, silver and technology and nature/earthy themes.

Image source – Lenineon

Take for example an “earthy” theme, on this one we will follow colors that are naturalness and earth related; browns, greens and some grey ones. On the image below you’ll see how the designer used a few tones to create a great rocky feeling.

Image source – This is Hovland

In this same train of thought we also have themes like the tech one; using metal inspired colors and monochrome hues to represent what would be considered as technological advance. Variants on this one can show the use of neon colors and bright lights to represent electrical functionality.

Seasonal Themes

Another recurrent motif is the use of seasonal themes. Spring, Summer, Fall and Winter are continuously used to add a vague but still oriented look to a website, room or clothe and certainly can be used to showcase a certain website theme or feeling.

Festivities

There may be more specific cases as there are color schemes that are inspired by festivities like Christmas, Halloween, Independence Day or any other celebration for a specific occasion.

Image source – Burkson, This is Hovland, The Christmas Tree

Color Choosing with the Right Tools

Once we have defined the demographics that we need to take into account to choose our website color, the desired intent and studied the effect that we need our website to show on the users is time to choose some colors. For this there are some tools that we can follow that can help us, in a basic and fat way, to determine what will be the best choice.

• Kuler – Really intuitive tool that lets you share and browse through themes and already set color themes, free and filled linked to other Adobe products.
• Colors Palette Generator – If by any chance you plan to use a lot of pictures and somewhat they resemble you can use a color extractor that will allow you to choose a color palette depending on the pictures that you are using.
• ColorMatch 5k – Plan to use a few colors and don’t know how to make them match to others? This online and simply to use application lets you experiment with sliders so you don’t go wrong at all.

How to Do it?

Play around with previous tools and make sure the palette you have chosen fits your website and its audience. After that evaluate how easy to the eye the design looks and if reading its content it’s not too hard. If you get stuck in any part of this process just go back, rethink your design and try different color palettes until you feel satisfied. At the end there are no rules to what colors you can choose.