Colors in web design

Colors in Web Design: Choosing the right combination for your Website

 

• 
  
• 
  
• 
  
• 
  
•  2

Color is undoubtedly the essential means to touch the emotions of your website visitors. It is a non-verbal communication and creates a physical and emotional reaction in the viewers. Colors are able to set the right tone and carry a necessary message for visitors. Colors can calm or excite, arouse plenty of feelings, and stimulate actions. Color is extremely powerful.
When choosing a color scheme for a website, it is important to do it right, guided by the main principles of the color theory, and of course, follow professional advice.
In this article, I intended to cover the most important aspects of color, the main principles of combining colors, its meaning in web design as well as symbolic meaning. Also, you will see some good examples of well-designed websites divided according to the prevailing color as well as get familiar with some useful tips from professional designers as to using colors effectively when creating a website.
So, let’s start discovering the magic of color…

Color theory: the main principles. Learning to combine colors

People, who are not closely familiar with the web design main principles, choose colors for their websites according to their own taste and end up with colors that just look good in combination with each other. It is great if you have a good eye and you feel intuitive what color scheme to choose for a website. But of course, all men can’t be good at it. So, for all those who are not sure what colors to combine for the website, I would recommend learning the basics of color theory – it is very clear and easy to understand.
One of the most useful issues to start with is the Color Wheel.
A little bit of history: The color wheel was invented by Isaak Newton in 1666. He took the bar of colors created by the passage of light through a prism and transformed it into a segmented circle, where the size of each segment differed according to his calculations of its wavelength and its corresponding width in the spectrum.

Source: sustland.umn.edu

The color wheel is an indispensable attribute of many designers and artists all over the world. This great tool is a perfect proof of the theory that the ingenious is always simple. The color wheel allows you to pick the colors that are harmonious together. The wheel consists of 6 basic colors: red, orange, yellow, green, blue, and purple. In addition to the basic colors, we have extra colors (mixes of the basic).

So, to find the right harmonious color scheme, you need to use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any of four colors that form a rectangle (two pairs of colors opposite each other). Color schemes remain harmonious regardless of the rotation angle.

Primary Colors

There are three primary colors: Red (#ff0000 in HTML or #f00 in CSS), Yellow (#ffff00 in HTML or #ff0 in CSS) and Blue (#0000ff in HTML or #00f in CSS). We cannot get them by mixing any other color. The other extra colors can be formed by combining of these three colors. If you mix two of the primary colors, you will have a secondary color.

Secondary colors

There are also three of them: Orange (#ff9900 in HTML or #f90 in CSS), Green (#00ff00 in HTML or #0f0 in CSS) and Purple (#ff00ff in HTML or #f0f in CSS). You can get them by mixing red and yellow (orange), yellow and blue (green) and blue and red (purple).

Tertiary colors

To get one of tertiary colors you need to mix one primary color and one secondary color together. The opportunities for tertiary colors are endless.
Complementary colors
Complementary colors are the ones that are located directly across each other on the color wheel: red and green, blue and orange, purple and yellow. In combination with each other they compose a striking contrast. Such color combinations are usually used for standing out some elements on the website. For example, if you have an orange background and some blue elements on it, the blue items will be almost blinding.
Analogous colors
These colors are located next to each other on the color wheel. They usually look extremely good together, but absolutely quiet. Use such color combinations when you need your visitors to feel comfortable while looking at your website pages.
There are plenty of color groups that refer to various aspects of color, i.e. warm colors, cool colors, neutral colors to name a few.

Colors in different cultures: symbolism

When choosing a color scheme for your website, you should obligatory take into account the fact that this or that color may have different meanings in different cultures. The cultural aspect for color symbolism can be very strong, so you need to be aware of how your audience views the colors. If you understand what you are saying with your website color scheme, you will avoid a huge mistake.
Let’s find out what some colors mean in different cultures:

Source: www.1stwebdesigner.com

Red

• China: the color of brides, Good luck, celebration, summoning • Cherokees: triumph, success • India: purity • South Africa: mourning color • Eastern: worn by brides, joy (in combination with white) • Western: excitement, love, passion, stop • USA : christmas (with green), Valentine’s day (with white) • Hebrew : sacrifice, sin • Japan : life • Christian : sacrifice, passion, love • Feng Shui : Yang, Fire, good luck, respect, protection, vitality, money, recognition

Blue

• European : soothing, “something blue” bridal tradition • Cherokees : defeat, trouble • Iran : mourning, color of heaven and spirituality • China : immortality • Colombia : soap • Hinduism : the color of Krishna • Judaism : holiness • Christianity : Christ’s color • Catholicism : color of Mary’s robe • Middle East : protection • Worldwide : ‘safe’ color • Feng Shui : Yin, water, calm, love, healing, relaxation, peace, trust, adventure, exploration • Western: Sadness, depression, conservative, bridal tradition, corporate, “something blue”

Yellow

• European : happiness, hope, joy, cowardice, hazards, weakness • Asia : imperial, sacred • China : royalty, nourishing • Egypt : mourning • Japan : courage • India : merchants • Buddhism : wisdom • Feng Shui : Yang, Earth, auspicious, sunbeams, warmth, motion

Orange

• European : autumn, harvest, creativity • Netherlands : favorite color (House of Orange) • Ireland : protestants (religious) • USA : halloween (with black), cheap goods • Hinduism : saffron (peachy orange) is a sacred color • Feng Shui : Yang, Earth, purpose, strengthens concentration

Brown

• Colombia : discourages sales • Australian Aboriginals : color of the land, ceremonial ochre • Feng Shui : Yang, Earth, industry, grounded

Green

• 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 • Western: spring, new birth, go, Saint Patrick’s Day, Christmas (with red) • India: Islam • Feng Shui : Yin, Wood, growing energy, refreshing, nurturing, balancing, harmony normalize, healing, health, peaceful, calming

Purple

• Thailand : mourning (widows) • European : royalty • Catholicism : death, mourning, crucifixion • Feng Shui : Yin, physical and mental healing, spiritual awareness

White

• European : marriage, angels, doctors, hospitals, peace • Japan : mourning, white carnation symbolizes death • China: mourning, death, • India : unhappiness • Eastern : funerals • Feng Shui : Yang, metal, death, ghosts, mourning, ancestal spirits, poise, confidence

Black

• European : mourning, funerals, death, rebellion, cool, restfulness • China : color for young boys • Thailand : bad luck, evil, unhappiness, • Judaism : unhappiness, bad luck, evil • Australian Aboriginals : color of the people, ceremonial ochre • Feng Shui : Yin, water, money, career success, income, stability, emotional protection, power, bruises, evil