Understanding and the Meaning of Color Within Design

Color is the perceivable characteristic of light; light is energy, so color is a form of energy. In 1666 sir Isaac Newton discovered that sunlight is a mixture of colors by noticing that when a ray of light passes through a prism it is dispersed into its seven constituent colors: red, orange, yellow, green, blue, indigo and violet. We see different colors because some objects reflect/absorb specific wavelengths. Human eyes perceive these wavelengths as colors.

Understanding Color

In web design colors are very subjective; take black for example, for some it is the color of elegance and it sometimes gives the idea of prosperity (you may imagine immediately a black and elegant limousine), but for others it can be a reminder of something unpleasant (death, hopelessness, evil, mourning). Whats more you can’t use only a single color in your work even if it is a site, logo or a business card. It needs be a combination of two or more colors to be effective. Unfortunately making a wise mixture poses a very difficult choice; the modern monitor displays can render more than 16 million (16,000,000) colors, therefore it’s very easy to make a bad choice.

To combat these situations, designers and in particular web designers, have an important and useful guide for color theory. This is a set of principles that help create harmonious color combinations.

Primary Colors

In traditional color theory there are only three colors which can’t be formed by combining others, to be more specific there are only three colors from which all the rest are created. These colors are: red, yellow and blue – primary colors.

Secondary Colors

Mixing the primary colors we will get the secondary colors – green, orange and purple.

Tertiary Colors

Tertiary colors are combinations between primary and secondary colors (yellow-orange or marigold, red-orange or vermilion, red-purple or magenta, blue-purple or violet, blue-green or aquamarine and yellow-green or chartreuse).

Cool & Warm Colors

As in life, harmony consists of a well balanced arrangement of the parts. To establish some relationships between colors in color theory we distinguish two categories:

• warm colors are the colors from red to yellow including brown, orange, pink. These colors evoke warmth because they remind us of things like the sun or fire. These tend to advance in space.

• cool colors are from green to blue, but also include some shades of violet. Cool colors are better for backgrounds and will give the impression of calm and reduce tension.

White, black and gray are considered to be neutral.

Useful Color Theory Terms

These terms are very useful in color theory too:
• color value measures lightness or darkness of a color;
• saturation or intensity is the brightness or dullness of a color;
• chroma is how pure a hue is in relation to gray;
• shade: a hue produced by the addition of black.
• tint: a hue produced by the addition of white.

We use different sets of primary colors, the widest used being:

• RGB color: this is based upon light. “RGB” stands for Red, Green and Blue (are the primary colors with green replacing yellow). Computer monitors and TV sets use RGB, but not used in printing.
• CMYK color: this is based upon pigments. “CYMK” stands for Cyan, Yellow, Magenta and Black (K stands for black).Using these four colors most of the others can be achieved. CMYK can produce less colors than RGB (yellow-greens sometimes doesn’t have the best quality).This system is used in printing.
• Pantone (PMS) Color: this is another system used in printing; PMS stands for Pantone Matching System and is a very large list of color mixtures made by Pantone Corporation. Unfortunately they are very expensive.
• Hexachrome: more recently Pantone developed another system, based on the regular cyan, yellow, magenta, black and in addition Pantone Hexacrome Orange and Pantone Hexacrome Green. It will be used and it is used in printing, being a step further than PMS or CMYK.

The Meaning of Color

Have you ever asked yourself why Las Vegas is the city of red neon? This is because red makes people take riskier actions than blue, that calms down the spirit. Scientists demonstrated that colors have an impact on the human brain, thus a human being exposed to a certain color can have different reactions, some are excitant, and others increase appetite or give the feeling of warmth or coolness.
Like we mentioned previously, colors are subjective and for each of us a color has an individual impact, but generally accepted meaning of these are as follows:

• black: mystery, elegance, death, evil, power, mourning;
• blue: sadness, calm, loyalty;
• green: abundance, nature, freshness;
• yellow: happiness, concentration, hope;
• red: passion, anger, danger, love;
• white: purity, cleanness, innocence;
• purple: royalty, luxury, wealth, sophistication;
• cream: elegance, purity;
• gray: conservative, formality;

But there are some specific interpretations in certain countries or regions:

• Black is the mark of high quality and trust in China;
• Blue in Iran has the meaning of immortality;
• Green means high-tech in Japan, luck in the Middle East, death in South America;
• Yellow is the color of mourning in Mexico and gives the feeling of strength in Saudi Arabia;
• Red has multiple meanings, from good luck in China, danger in Europe to mourning on the Ivory Coast and death in Turkey;
• White means mourning in Japan;

Is Color our Friend or Foe?

Colors can be a great friend within, but they can also be a very powerful and strange enemy. Strange…? Look at the pictures below, how many colors you see?
You will probably believe that there are four.

The correct answer is only three. Do not forget: color is light, light is energy so color is energy.

You might also like…

15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »