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:
|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.
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.
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.
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.
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.
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
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
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
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
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
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
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
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
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
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
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
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.