Colour in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Colour theory is a science in itself. Studying how colours affect different people, either individually or as a group, is something some people build their careers on. Something as simple as changing the exact hue or saturation of a colour can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.

Web design which achieves successful marketing results is sensitive to the cultural, instinctual and iconic meanings of colour in relation to the product being promoted and considers the cultural backgrounds and gender of the targeted clientele. Adding textures too can alter colours – a roughly textured surface makes a colour seem darker, while a smooth surface lightens the same colour.

Warm colours advance and so are often used on buttons or anything that needs to be clicked on on a web page. Cooler colours do the opposite and recede.

Warm colours

Red (Primary)

Warm colors include red, orange, and yellow, and variations of those three colours. These are the colours of fire, of autumn leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.

Red and yellow are both primary colours, with orange falling in the middle, which means warm colours are all truly warm and aren’t created by combining a warm colour with a cool colour. Warm colours in design  reflect passion, happiness, enthusiasm, and energy.

Red is a very hot colour. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. It has been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.

Red can be associated with anger, but is also associated with importance (the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).

Outside the western world, red has different associations. For example, in China, red is the colour of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the colour of mourning. Red is also associated with communism. Red has become the colour associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.

In design, red can be a powerful accent colour. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great colour to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

The darker shades of red used in these three sites give them all a powerful strong and punchy look.

The very bright red  on these sites give a sense of energy and movement.

The  red accents stand out against the backgrounds, and give strong, clear feelings to the sites.

Orange (Secondary)

Orange is a very vibrant and energetic colour. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

The dark orange  used on these sites acts as an almost neutral and grounding colour .

The orange accents and blocks here add a lot of visual interest and make other things on the page stand out. It give s a feeling of vitality.

Yellow (Primary)

Yellow is often considered the brightest and most energizing of the warm colours. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, (calling someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a colour for merchants.

In design bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of 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.

The accents of yellow here used with black look strong and give energy while really standing out.

The use of large blocks of yellow on these sites make the other parts of the sites stand out. It gives energy, vibrancy and warmth.

Cool colours

Cool colours include green, blue, and purple, are often more subdued than warm colours. They are the colours of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.

Blue is the only primary colour within the cool spectrum, which means the other colours are created by combining blue with a warm colour (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Cool colours in design give a sense of calm or professionalism.

Green (Secondary)

Green is a very down-to-earth colour. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s 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.

The muted greens used on these sites give a natural, down to earth feeling.

These sites use bright green for vibrancy and freshness.

These sites use more muted greens which give a restful calm feeling.

Blue (Primary)

Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. 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 (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

The subtle blues used here make these sites refreshing, cool and sophisticated.

The blues used here are vibrant and lively.

The blues used here are subtle and quite muted giving a calm feeling.

Purple (secondary)

Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination.

In Thailand, purple is the colour of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.

Almost 75 percent of pre-adolescent children prefer purple to all other colours, making bright purple effective for promotion of children’s products. Light purple is useful for feminine designs. Excessive exposure to purple may cause people to become sullen, withdrawn and ill-at-ease with their surroundings.

The light and medium purples here work well to convey a sense of creativity. The more muted tones give a rich feel.

The lighter shades of purple used here give a young fresh feel.

Neutrals

Neutral colours often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.

Black

Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

White

White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other colour. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.

In design, white is generally considered a neutral backdrop that lets other colours in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colours that surround it.

When choosing colour schemes for your web design, depending on the effect and mood you are tring to create,  you can choose complimentary colours (opposite each other on the colour wheel) for excitement and tension, analogous (next to each other on the colour wheel) for harmony. A monochromatic site would use tints of a single colour and achromatic would use no colour.

Multicolours used on your site is known as triadic.

Hexadecimal

Also referred to a “hex” numbers, they are a base-16 numbering system used to define colours online. Hex numbers include the numerals 0-9 and letters A-F. Hexadecimal numbers are written in three sets of hex pairs. Because screen colours are RGB (Red, Green, Blue), the first pair defines the red hue, the second pair defines the green hue, and the third pair defines the blue.

Colours are made up of 3 sets of RGB numbers representing the amount of Red, Green and Blue contained within a color. These colors are represented as hexadecimal values.

For example, the hexadecimal numbers for black is #000000. The first two numbers (00) represent the amount of red the colour contains. The second two numbers (00) represent the amount of green and the last two numbers (00) represent the amount of blue the colour contains. When a colour, such as black, contains 00 amount of red, green or blue, this means it contains no amount of that colour or 0%.

However, colours containing RGB values of FF contain the most amount of a colour or 100%. For example, the hexadecimal value for white is #FFFFFF, which means it contains the most amount of red, green and blue.

The hexadecimal numbers for red are FF0000. If we break down the hexadecimal numbers, we will find that the colour red contains FF amount of red, which is the highest amount. It contains 00 amount of green and 00 amount of blue, both of which are the lowest.

Web safe colours

Web safe colours are sets of colours that will not be altered (dithered) when shown on browsers running on a 256-color browser.   These sets of colours are initially selected by Netscape for use on their browsers.

Web safe colours seem to be irrelevant for today’s computers, but back when the web was invented, many people still use graphics card which supports only 256 colours (or less).

255 is the maximum values for an 8 bit number (i.e.: 255 is 28).

Of the 256 possible colors, there are 216 that is designated to be web safe colors;   The remaining 32 colors are used by the operating system (such as Windows 95, or MacOS) and are reserved for the color of title bar, desktop, menu bar, etc.