Project 2 – Usage of colour in web design

November 12, 2010 § Leave a comment

To understand which colours are better for our web sites we have to begin talking about colour theory.

The physics of colour

Technically speaking, colors are the way our brain, by use of our eyes, interprets electromagnetic radiation of a wavelenght within the visible spectrum. Visible light lies between 400 and 700 nanometers.

The different wavelengths are seen as different colors, as in the spectrum below. You see a spectrum like this everything you see a rainbow.

Traditionally the spectrum is divided into seven separate bands. The first person to really define this was Newton. Some people believe that he included the color indigo only to make seven steps to match the number of notes in major musical scale. These are the approximate wavelengths for each of the colors:

Color Wavelength (nm)
Red 650 – 800
Orange 590 – 640
Yellow 550 – 580
Green 490 – 530
Blue 460 – 480
Indigo 440 – 450
Violet 390 – 430
Source: Johannes Itten – The Art of Color (Kindle Edition)

Electromagnetic radiation with a wavelength of over 750 nm is called infra-red, and radiation under 350 nm is ultra-violet. Each color on the spectrum can vary in saturation, lightness and darkness, and it’s estimated that a human eye can distinguis about 10 million color variations.

a color spectrum

Color Wheel

basic color wheel In color theory, we often talk about the color wheel. A color wheel is really just the spectrum twisted around so that the violet and red ends are joined. The color wheel is particularly useful for showing how the colors relate to each other and how you can create new colors by mixing two or more colors.

The wheel’s construction is actually quite simple. You have your 6 basic colors: red, orange, yellow, green, blue, and purple. Then, depending on which wheel you’re looking at, you have extra, “in-between” colors that are mixes of the basic colors.

Primary Colors: Red, Yellow, Blue. These 3 colors are the base colors for every other color on the color wheel. This is why they’re called “primary.” When you mix two primaries together, you get a secondary color.
Also note the triangular positioning of the primary colors on the color wheel, and how the secondary colors are next to them.
Primary colors are useful for designs or art that needs to have a sense of urgency. Primary colors are the most vivid colors when placed next to eachother, which is why you’ll notice that most fast food joints use primary colors in their logos, as it evokes speed.

Some examples of fast food logos where they have used primary colours to evoke speed


Secondary Colors: Orange, Green, Purple. These 3 colors are what you get when you mix the primary colors together.
They’re located in-between the primary colors to indicate what colors they’re made from. Notice how green is in-between yellow and blue.
Secondary colors are usually more interesting than primary colors, but they do not evoke speed and urgency.

Tertiary Colors: These are those “in-between” colors like Yellow-Green and Red-Violet. They’re made by mixing one primary color and one secondary color together. There can be endless combinations of tertiary colors, depending on how they’re mixed.

RGB Color: This is color based upon light. Your computer monitor and television use RGB. The name “RGB” stands for Red, Green, Blue, which are the 3 primaries (with green replacing yellow). By combining these 3 colors, any other color can be produced. Remember, this color method is only used with light sources; it does not apply to printing.

A computer monitor is made up of thousands of tiny little red, green and blue dots which are grouped three and three. These little dots are close together– so close that we don’t really see them as dots, but rather our eyes mix them up to form one homogenous color.
All colors in the spectrum can be generated with this system of dots. For instace, if the red and green dots are shining at 100% their strength, while the blue not lit at all, you will see the result as a pure yellow color. Each of the three dots can have any value from 0 to 255, which means that the total number of possible colors is 256*256*256 = 16,777,216.

Any color can be represented by a specific combination of three numbers. The yellow mentioned before would have the number 255, 255, 0. The first number represents the red dot, the second represents the green dot, and the last represents the blue. Therefore, a pure blue color would then be 0, 0, 255. The lower the number, the less that color dot is lighted. For instance, by lowering the number for the blue dot– to the color identified as 0, 0, 100– you can produce a darker blue. White is produced by the combination of the highest amount of all three colors, so the code for white is 255, 255, 255. Black, on the other hand, is produced by a lack of other colors, so the code for black is 0, 0, 0.

Now to complicate things a bit more, on the web you don’t write these numbers just as they are, but instead you write what is called their hexadecimal values.

Hexadecimal numbers

In our ordinary system of using numbers the base is ten. That is, whenever you reach ten, you add one more digit to your number. And since everything is based in ten, we only need ten digits to represent every possible number. The ten digits are of course 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. The base of ten goes back to when the system was first developed, and it is based on the fact that humans have ten fingers.
You can say that the hexadecimal system is what our numbers would look like if we had 16 fingers instead of 10. That is, the hexadecimal system uses 16 as the base instead of ten.
The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. It has only recently been agreed that the letters A to F should be used to represent those last six digits. So, let us count from the beginning, and see where we end up. The top row is the ordinary decimal number, and the bottom is its corresponding hexadecimal.

chart with hex and dec values

If you continue this up to 255 you find that it corresponds to FF in the hexadecimal system. This means that all numbers from 0 to 255 can be represented with only two digits.
Let’s look again at that dark blue color I mentioned before. It had the values of 0, 0, 100. In the hexadecimal system, this would be 0, 0, 64. Usually a zero is added before one-digit numbers (including 0). This means that this dark blue color would be referred to as 00, 00, 64, or 000064. This how all colors are written on the web. For instance, pure yellow is FFFF00.

Meanings of colours

There are different ways to classify colours but one of the most popular is the following one:

Warm Colors: Colors such as red, yellow, and orange. These colors evoke warmth because they remind us of things like the sun or fire.
Cool Colors: Colors like blue, green, and purple (violet). These colors evoke a cool feeling because they remind us of things like water or grass.
Neutral Colors: Gray, Brown. These aren’t on most color wheels, but they’re considered neutral because they don’t contrast with much of anything. They’re dull and uneventful.
Value: Usually refers to the amount of black in a color. The more black a color has, the darker its value.
Brightness: Refers to the amount of white in a color. The more white a color has, the brighter it is.

Every colour has a meaning and this meaning is culturally specific: so that one colour may have different meanings depending on whom you ask.

Red

Energy, strength, passion, eroticism, cheerfulness, courage, element of fire, career goals, fast action, lust, desire, blood, vibrancy, driving forces, risk, fame, love, survival, war, revolution, danger, aggression, strength, power, determination, emotional intensity, sex, provoking, dynamic, stimulating, courage, bravery, good-tasting, force, leadership, drama, excitement, speed, heat, warmth, violence, attention, generosity, romance

Red stimulates metabolism, increases respiration rate, perspiration, appetite and raises blood pressure. Red is a strong masculine colour.

Red tends to promote images and text, making objects appear larger and closer, though less than yellow coloured objects. Bright red can be annoying if used over large areas and is useful as a iconic colour to encourage people to act quickly eg. on buy or click here buttons. An apetite stimulant, red is useful for promoting products associated with energy … drinks, cars, sports and games.

Care is need using red in proximity with green … as the old adage goes: ‘Red and green should not be seen without something in between’.

Mixing bright blue and bright red is also not recommended … the combination is very tiring on the eye.

Light red : joy, sexuality, passion, sensitivity, love, indecision

Dark red : willpower, rage, wrath, tenseness, vigour, anger, leadership, courage, yearning, malice, wrath

Maroon : Yang, indecisiveness

Red in cultural context

European : Danger (stop signs), love (hearts), excitement (for sale signs)

China : Traditional bridal colour, good luck, celebration, happiness, joy, vitality, long life, summoning, the direction South. Chinese saying goes “when something is so red, it is purple” – red purple brings luck and fame.

Japan : life

India : Purity

Eastern : Joy (with white)

Hebrew : sacrifice, sin

Christian : sacrifice, passion, love

USA : Christmas (with green), Valentine’s day (with white)

South Africa : Mourning

Australian aboriginals : the land, earth, ceremonial ochre

Cherokees : success

Hopi : the direction South

Romans : Red flag signified the onset of battle

Celtic : Death, afterlife

Feng Shui : Yang, Fire, good luck, money, respect, recognition, protection, vitality

——————————————————————————————–

Some examples with red

The red stripe on gray background gives a sense of movement and energy, perfect for fast food

In the context, the immediate association appears to be between red and blood as a substance which is also red. However, I do not think that the designers of the site chose red for this reason alone, if at all. Red also connotes courage, love and generosity.

In this case they put a red box to communicate urgency because the dead line for application to the college is nearing.

Pink

Romance, love, friendship, femininity, truth, passivity, good will, emotional healing, peace, calming, affection, emotional maturity, caring, nurturing, sweet tasting, sweet smelling, ethereal, delicacy.

Pale pink : sweetness of youth, fragility

Vibrant pinks : high spirits, energy, youth

Pink in cultural context

European : Feminine colour, baby girls

East India : Feminine colour

Japan : Popular with both sexes

Korea : trust

Feng Shui : Yin, love

——————————————————————————————–

Some examples with pink

It is usual to find the pink colour in a website that sales flowers because there is a connection between sweet smelling and this colour.

gdgd

dkgjfk

dkjdkj

Orange

Warmth, energy, balance, enthusiasm, vibrancy, vitality, expansiveness, flamboyance, excitement, business goals, property deals, ambition, career, goals, general success, justice, legal matters, selling, action, attention-grabbing, the sun, friendly, inviting, intense, joy, strength, endurance, steadfastness, tropics, quick movement, wealth of the mind and knowledge, charity, growing things, fascination, friendliness, happiness, beginnings, heat, creativity, autumn, determination, attraction, success, encouragement, courage, earth, mental and appetite stimulatant, emotional lift, assurance, social force, health, warmth, attractiveness, cheerfulness, mood-lightening, uninhibited, independence, amiability, constructiveness, self-assuredness, cheap, low-budget, fun kids colour, youth

In restaurants, as orange is an appetite stimulant, orange decor encourages sales. Less passionate than red, orange still increases oxygen supply to the brain, stimulating mental activity. Popular amongst youth.

Orange backgrounds help images seem closer and larger, but avoid over-use. Useful for highlighting important elements, promoting food products and toys.

“As we turned our sights to orange, substantial research (including the data gathered at The Global Color Survey at http://www.colormatters.com and the Pantone Consumer Color Preference Study┬« dated June 1996) documented that orange is one of Americans’ least favorite colors. … In 1991, Forbes called attention to orange’s mundane associations in its December 23 article, ‘Does orange mean cheap?’ Yes, it does.”4

Dark orange : autumn, deceit, distrust

Red orange : desire, sexuality, pleasure, domination, aggression, thirst for action

Bright orange : tangy citrus, health

Pale orange : apricot, coral, peach and melon are sophisticated

Orange in cultural context

European : Autumn, creativity, harvest

Netherlands : Favourite colour (House of Orange)

Ireland : Protestants

USA : Halloween, cheap goods

Hinduism : Saffron (peachy orange) is a sacred color

Feng Shui : Yang, Earth, strengthens concentration, purpose, organization

Brown

Friendships, special events, earth, materialistic thoughts, hearth, home, outdoors, inexpensive, reliability, credibility, comfort, endurance, stability, simplicity, comfort, longevity, intimacy, tranquility, masculine, nurturing, contentment, strength, sensuality, productivity, passivity, fertility, generosity, dirt, substance, practicality, hard work

Brown is too low key if used broadly without texture or another color to enhance it. Useful for promoting food and outdoor products for work and play.

Reddish-brown : harvest, autumn

Beiges and tans : Yang, sophistication, neatness, conceals emotion

Copper : passion, money goals, professional growth, business productivity, career moves

Coffee browns : sophistication, richness, robustness, panache

Brown in cultural context

Colombia : discourages sales

Australian Aboriginals : colour of the land, ceremonial ochre

Feng Shui : Yang, Earth, industry, grounded

Yellow

Sun, intelligence, light, accelerated learning, memory, logical imagination, social energy, cooperation, organisation, breaking mental blocks, sunshine, joy, happiness, intellect, energy, cheerfulness, optimism, purity, enthusiasm, warmth, honour, loyalty, mental force, clarity, perception, understanding, wisdom, dishonesty, betrayal, jealousy, covetousness, deceit, disease, weakness, caution, cowardice, follower, curiosity, mellowness, confidence, humour, dreams, creativity, desire to improve, action, idealism, optimism, imagination, hope, summer, philosophy, uncertainty, restlessness, glory, enlightenment

Yellow stimulates mental activity, generates muscle energy and attracts attention – it is the colour most visible to the human eye. Thus yellow objects move to the forefront. Students who study in yellow rooms do better in exams. Cheerful yellow can be used to promote food especially in combination with other fruit and vegetable tones, children’s and leisure products and is best used as a highlight. With overuse, yellow can be disturbing and promote anxiety. Babies cry more in yellow rooms. Yellow against black denotes a warning … the sting of the bee.

Yellow is not a practical colour to use when selling expensive items to men … they perceive it as an untrustworthy and childish … and avoid yellow if you wish to evoke safety and stability. Care is needed with shades of yellow as they can lose their warmth and appear dirty.

Dull yellow : caution, decay, sickness, jealousym aging

Light yellow : intellect, freshness, and joy

Ivory/cream : quiet, pleasantness, calm, understated elegance, purity, softness, more rich and warm than white

Yellow in cultural context

European : Hope, joy, happiness, hazards, cowardice, weakness, taxis

Asia : sacred, imperial

China : Nourishing, royalty

Egypt : Mourning

Japan : Courage

India : Merchants

Buddhism : wisdom

Feng Shui : Yang, Earth, auspicious, sunbeams, warmth, motion

Green

Earth mother, physical healing, monetary success, abundance, fertility, tree & plant magic, growth, food, hope, personal goals, resurrection, renewal, youth, stability, endurance, freshness, nature, environment, tranquil, refreshing, quiet, hope, immortality, health, healing, good luck, renewal, youth, jealousy, inexperience, trees, grass, vigour, growth, harmony, responsiveness, generosity, safety, envy, misfortune, quietude, compassion, renewal, moderation, nurturing, diplomacy, calm, contemplation, joy, love, abundance, balance, self-control, inexperience, hope, good omens, soothing, sharing, dependability, friendliness

Green lowers blood pressure, relaxes the nervous system, calms and soothes the mind, stimulates creativity, and is an appetite suppressant. Green is easy on the eye and can improve vision. Images set in green backgrounds seem farther away. Green is popular in most cultures.

Useful as a marketing colour for organic, healthy and natural ‘green’ products.

Dark green : money, ambition, greed, jealousy, heaviness, prestige, promotes concentration

Yellow-green/lime green : sickness, cowardice, discord, and jealousy, nausea – don’t use this colour for promoting food products as it’s an appetite depressant.

Olive green : peace

Avocado : 60s and 70s refridgerators

Blue greens : most accepted colour group across gender lines

Green in cultural context

China : Exorcism, green hats indicate a man’s wife is cheating on him.

Japan : Life.

Islam : Hope – the cloak of the prophet was thought to be green, virtue – only those of perfect faith can wear green.

Ireland: Symbol of the entire country, Catholics

European/USA : Spring, new birth, go, safe, environmental awareness, Saint Patrick’s Day, Christmas (with red)

USA : Money

Feng Shui : Yin, Wood, growing energy, refreshing, nurturing, balancing, harmony normalising, healing, health, peaceful, calming

Blue

Good fortune, communication, wisdom, protection, spiritual inspiration, calmness, reassurance, gentleness, fluidity, water, sea, creativity, peace, calming, higher thoughts, mystery, sky, formality, travel, devotion, progress, quiet wisdom, freedom. betterment of humanity, love, trust, loyalty, intelligence, reassurance, artistry, compassion, inner strength, devotion, depression, sadness, tranquility, stability, unity, truth, understanding, confidence, acceptance, conservatism, security, cleanliness, order, comfort, cold, technology, devotion, harmony, depth, faith, heaven, piety, sincerity, precision, intellect, sadness, consciousness, speech, messages, ideas, sharing, cooperation, idealism, sincerity, empathy, relaxation, affection, inspiration, friendship, patience, contemplation, infinity, harmony, non-threatening, dependability

Some believe blue slows the metabolism and suppresses the appetite. As it does not require the eye to focus, images and objects recede in blue backgrounds. With overuse, can create feelings of cold. Although also popular with women, blue is the predominant favourite colour of males and is suited to web sites involving and promoting technology, medical products, cleanliness, air, sky, water, sea and automotives. Blue is the favourite colour of more than half of the world’s people – it is the colour least disliked by most cultures.

High impact designs can be created with combinations of blue, red and yellow. Combinations of light and dark blues can create feelings of trust. Pale Blue : ethereal, delicate, calming, health, healing, tranquility, understanding, softness

In combination with pinks and pale yellows, creates the image of spring. Aqua : freshness, pristine, vigour, movement, dramatic, confidence, strength, individualism, eccentricity, humour, fearlessness, festivity

Royal Blue : richness, superiority, cold Dark blue : depth, expertise, stability, credibility (especially with gold), intellect, wisdom, corporate colour, warmth, knowledge, power, integrity, seriousness, knowledge, health, decisiveness, law, order, logic, dependability, serenity

Combining dark and lighter shades of blue creates a conservative and sophisticated look.

Blue in cultural context

European : soothing, “something blue” bridal tradition

Cherokees : defeat, trouble

Iran : mourning

China : immortality

Colombia : soap

Hinduism : the colour of Krishna

Judaism : holiness

Christianity : Christ’s colour

Catholicism : colour of Mary’s robe

Middle East : protection

Worldwide : ‘safe’ colour

Feng Shui : Yin, Water, calm, love, healing, relaxation, peace, trust, adventure, exploration

Purple

Influence, third eye, psychic ability, spiritual power, self assurance, hidden knowledge, dignity, high aspirations, royalty, spirituality, nobility, ceremony, mystery, transformation, wisdom, enlightenment, sophistication, cruelty, arrogance, intuition, dreams, unconscious, invisible, telepathy, empathy, imagination, deja vu, universal spirit, spiritual connection, deeper truth, nobility, wealth, extravagance, dignity, independence, magic, creativity, energy, self-confidence, ego, ambition, fame, luxury, big profits, richness, sensuality, elegance, contemplation, meditation, majesty, lesbianism, Wicca, New Age spirituality, paganism, conceit, arrogance, nausea

Almost 75 percent of pre-adolescent children prefer purple to all other colors, 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. Purple is a polarising colour – people either love it or hate it.

Lavender : Yang, sexual indecision, malleability, romance, nostalgia, feminity

Dark purple : gloom, sadness, frustration, royalty, richness

Mauve : Yang, world consciousness

Violet : Meditation, creativity, concentration, quietness, creative force, beauty, inspiration, artistry, music, chivalrous love, excellence, ethereal, sensuality, responsibility, sacrifice

Blue purple : mystical

Red purple : sensual, quirky

Purple in cultural context

Thailand : Mourning

European : Royalty

Catholicism : Mourning, death, crucifixion

Feng Shui : Yin, spiritual awareness, physical and mental healing

————————————————————————–

Purple has been associated with lesbianism. Here you can see it used for a lesbian rights organization

In the catholicism purple is associated with funeral and death, but also purple meanings spirituality, unconscious, and spiritual connection.

White

Spirituality, goddess, peace, higher self, purity, virginity, reverence, simplicity, cleanliness, humility, precision, innocence, youth, birth, winter, snow, good, sterility, cold, clinical, sterility, clarity, perfection, innocence, virginity, goodness, light, fairness, safety, positivity, faith, coolness, charity, successful innovations, union, self-sacrifice, holiness, feminine divinity, pristine, chastity, positivity

All white rooms can be uncomfortable with a stark atmosphere. White is useful for a background or accent colour as it highlights other colours. White is perceived by the eye as a brilliant colour.

White can indicate simplicity with high-tech products and safety and cleanliness with medical products.

White in cultural context

European : Marriage, angels, hospitals, doctors, peace, milk

Japan : Mourning, white carnation means death

China : Death, mourning

India : Unhappiness

Eastern : Funerals

Feng Shui : Yang, Metal, death, mourning, ancestal spirits, ghosts, poise, confidence

Black

Protection, repelling negativity, binding, shapeshifting, power, sexuality, sophistication, formality, elegance, classy, wealth, power, mystery, fear, evil, anonymity, unhappiness, depth, style, evil, sadness, remorse, anger, underground, modern music, space, high quality, bad luck, formality, reservedness, dignity, elegance, secretiveness, fear of the unknown, night, emptiness, dirtiness, sophistication, strength of character, dramatic, authority, prestige, grief, anger, reliability, strong, classic, strength, anti-establishment, modernism, serious.

Black is an excellent technical colour and it assist targetting a sophisticated high-end market or a youth market to add mystery. Over a large area, black can be depressing. Though black backgrounds can enhance perspective and depth, they diminish readibility of text. Useful for web sites for art and photography to help other colours to vibrate.

Black in cultural context

European : Funerals, death, mourning, rebellion, cool, restfulness

China : Colour for young boys

Thailand : Bad luck, unhappiness, evil

Judaism : Unhappiness, bad luck, evil

Australian Aboriginals : colour of the people, ceremonial ochre

Feng Shui : Yin, Water, money, income, career success, emotional protection, power, stability, bruises, evil

Grey

Security, reliability, intelligence, staid, modesty, dignity, maturity, solid, conservative, practical, old age, sadness, boring, practicality, professional, sophisticated, durability, quality, quiet, conservativeness, gloominess, sadness

Grey in cultural context

Feng Shui : Yin, Metal, dead, dull, indefinite

Silver

Glamous, distinguishment, high tech, industrial, graceful aging, telepathy, clairvoyance, clairaudience, psychometry, intuition, dreams, astral energies, female power, communication, goddess, ornate riches, sleekness, modernity

To create a high-tech look, use silver with other colours. Silver works well combined with gold and white to promote a feeling of control and power.

Silver and other reflectors are strong eye attractors and are associated with life-giving water.

Advertisements

Where Am I?

You are currently browsing the Project 2 – Task1 – Written work and research category at Giorgio Scappaticcio's Blog.