“Colour does not add a pleasant quality to design – it reinforces it” by Pierre Bonnard.
I have to admit sometimes tying in the meaning of colour to its usage can be over the top, and some other times designers choose colours just because they are well matched. Yet, it is undeniable that colours can affect the overall ‘feel’ of a website.
You need to know what you want to achieve with your website, what kind of audience you target, what kind of meaning you want to associate your website with.
You have to be a very selective picking up colours in your website, because colours are subjective. What could be perceived as beautiful for a person could easily be seen ugly for another. What could be perceived as happiness in a country may represent mourning for another.
Here are some explanations about the meaning of colours.
Warm colours include red, orange, and yellow, and variations of those three colours. These are the colours of fire, fall leaves, sunsets and sunrises, and are generally energizing, passionate, and positive. Use warm colours in your designs to reflect passion, happiness, enthusiasm, energy, and excitement.
Red is associated with fire, violence, and warfare. It is also associated with love and passion. Red can be associated with anger (ex: stop light), but is also associated with importance (ex: red carpet). It is a perfect colour for making people takes quick decisions, so you should definitely use it for call-to action buttons, such as “Click here” or “Buy now”.
If red stands for passion, joy and love, then pink represents femininity, friendship or romance. Dark red is associated with anger, evil and will, while red brown stands for the harvest and autumn.
Outside the western world, red has different associations. For example, in China, red is the colour of prosperity and happiness. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the colour of mourning.
Orange is a very vibrant and energetic colour. Orange is used to get the attention of the readers, and used to give a friendly and inviting impression. Because orange is associated with the fruit of the same name, it can be associated with health and vitality. Orange proves to be effective when promoting food products.
In general, bright yellow stands for happiness and joy, while pale yellow gives a sensation of calmness and tranquillity. Dark yellow or golden yellow could make a person think about antique objects, prestige and durability. Just like orange, yellow is often used to promote food products.
Yellow is also associated with hope, as seen in some countries, yellow ribbons are displayed by families who have loved ones at war. In Egypt, yellow is for mourning. In Japan, it represents courage, and in India it is a colour for merchants.
In designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral colour for babies (rather than blue or pink) and young children. Light yellows also give a better feeling of calmness and happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
Cool colours include green, blue, and purple are often more subdued than warm colours. They are the colours of night, water, nature, and are usually calming, relaxing, and somewhat reserved.
Use cool colours in your designs to give a sense of calm or professionalism. These colours will give your website a balanced, stable and calm appearance.
Blue stands for calmness, responsibility, for something that is refreshing, for power, confidence or peace, but it is associated with sadness in English. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions.
In design, light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for designs where strength and reliability are important. For instance, it could be used either for a holiday website or for a corporate site.
Green is a very down-to-earth colour. It can represent new beginnings and growth. It also signifies renewal and abundance. Green stands for life, health, and environment. Alternatively, green can also represent envy or jealousy, and a lack of experience.
In design, green can have a balancing and harmonizing effect, and is very stable. It is appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence. Also, green is appropriate for sites promoting such topics as: the nature, renewal, fortune, durability and global warming.
Purple is related to luxury and high quality. It is a combination of red and blue so it is both passionate and relaxing. It is associated with creativity and imagination, too. Purple is a colour symbolising romance, perfect for websites that promote flowers, but at the same time this hue could cause sadness if used too much.
In Thailand, purple is the colour of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavender) are considered more romantic.
Neutral colours often serve as the backdrop in design. The meanings and impressions of neutral colours are much more affected by the colours that surround them than warm and cool colours.
Black is the strongest of the neutral colours. On the positive side, it is commonly associated with power, elegance, formality, modernity and sophistication. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional colour of mourning in many countries.
In design, black is commonly used for typography and other functional parts, because of its neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.
White is often associated with purity, cleanliness, virtue, simplicity and innocence. In the West, white is commonly worn by brides on their wedding day. It is also associated with the health care industry, especially with doctors, nurses and dentists.
In design, white is generally considered a neutral backdrop that lets other colours in a design to have a say. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs.
Gray is a neutral colour, generally considered on the cool end of the colour spectrum. When used well, it is associated with tradition, sombreness and calmness. When used badly, however, it can cause a design to lack energy.
Gray is generally conservative and formal, but can also be modern. It is sometimes considered a colour of mourning; commonly used in corporate designs, where formality and professionalism is the key.
Brown is associated with the earth, wood, and stone. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness.
In design, brown is commonly used as a background colour. It is also seen in textures such as wood and stone. It helps bring a feeling of warmth, cosiness, and wholesomeness to design.
Beige and Tan
Beige is somewhat unique in the colour spectrum, as it can take on cool or warm tones depending on the colours surrounding it. They can be dull, but they can also be reassuring, which makes them ideal for a site that does not want to be too bold or outrageous.
Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with paper texture.
Cream and Ivory
Ivory and cream are sophisticated colours, with some of the warmth of brown and a lot of the coolness of white. Creams are calm, elegant and pure, making them a great background colour for a website that wants to imply a sense of tradition.
In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colours like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colours, without the stark contrast of using white.