0 DOs and DON’Ts – Color

Tweet

Did you know that color and visual elements activate the right brain (emotions), while the printed words activate the left brain (logic)? Color and Typography remain to be the two most important elements in design. When you harmoniously combine them all you attract a quicker attention to the subject, reinforce impact and recognition, help in establishing powerful identities and brand, set a mood.
Today we’ll examine the DOs and DON’Ts in designing with color, and next time we’ll investigate the topic of Typography.

Babies are colur-dominant: they are more attracted by color than form. And even though we generally become more form-dominant as we mature, color still plays an important role on how we perceive the message. For instance, why does red always call to attention? Whether you want to tweak the colors of your site, or design an ad or a poster to attract people to your products or services, or even paint the walls in your house, these color essentials should help you in becoming more color-wise.
DO take time to learn the color wheel. All colors are
made up of three primaries: red, blue and yellow. When you combine the primaries, you get the three secondary colors: orange, purple and green. When you combine each secondary color with its neighboring primary, you get six tertiary colors: yellow-orange, yellow-green, blue-green, blue-purple, red-purple, red-orange. That’s how you get the familiar 12-color wheel.
Every color has a temperature: from the red/yellow side of the spectrum it’s warm, and from the blue/purple side it’s cool. It has an intensity that’s described as saturation or chroma. Saturation is determined by how much or how little grey a color contains. High intensity colors are pure, bright and vivid. Less saturated colors are muted, soft and subdued. Every color has a value, determined by its lightness or darkness. When planning a color combination, value and saturation are as important as the hue (synonymous with color).
DON’T miss on understanding the basic color wheel rules:

• Most colors look great when combined with the shades in various values or intensities. These color schemes are called Monochromatic, which consist of colors drawn from the same hue.
• Colors also love to hang out with their next door neighbors. Any three neighboring colors on a 12 part colour wheel make up an Analogous color scheme. They are always harmonious as they share the same undertones: yellow-green, yellow and yellow-orange. To add a bit more impact to the analogous group, you can expand it with another neighboring color, e.g. orange.
• Opposites attracts, even with colors, and that’s how you get Complementary colors: they are the opposite hues on the color wheel, that “complete” each other when used as a pair. Warm colors have cool complements and vice versa.

I found this handy Flash application that visually explains the color wheel in an easy to follow style. There’s also a helpful HP colour wheel that showcases different color schemes.
DO analyze the color undertones.
If you like blue but want a subtle effect, choose a white or grey with a blue undertone. A red-orange terracotta pot has a yellow tone to it, hence those colors will blend harmoniously with each other. On the other hand, don’t emphasize an undesired undertone by pairing it with its complement: if the shade of brown has a pink undertone to it, combining it with green (the complement of red) will only intensify the problem.
Learn to identify color tone, its warmth or coolness. A warm blue contains some red that makes it to look more purple, while a cool blue contains some green, which makes it more aqua or teal.
Do keep in mind that neutrals also have undertones. Often people will mistake grey for blue if there’s a blue undertone, or plum if the undertone is violet.
DON’T neglect the fact that colors ‘change’ according to their surrounding:
A large rectangle and a narrow line (or type) of the same color will seem to have different values when placed against a white background: the color in the line will look darker than it does in the rectangle, because it’s surrounded by much brighter white space.
When two shades of the same color, one dark and one light, are paired with each other, the darker shade will look darker and the lighter shade will appear to be lighter: a pink rose will seem to be paler against a purple background.
Larger color spaces will affect the smaller ones: if a small square of medium yellow is surrounded by a larger area of black, the yellow square will seem to be brighter than when surrounded by white. Any color will appear lighter against a darker color and vice versa.
Outlining a color in a darker shade will enhance the enclosed color, helping to keep a color from “spreading” into surrounding areas. On the other hand, a lighter outline will cause a color to spread to adjacent colors, and reduce the strength of the enclosed color.
This valuable tip comes from David Airey: There’s also the illusion how dark colors surrounding light ones will make the lighter area appear smaller than it is if it were the opposite (dark surrounded by light). It’s why you should always bump up the text size if you insist on using white text against a black background.
DO explore the color psychology
While perceptions of color are rather subjective, and have different meanings in various cultures, some colors affect us in a similar way. The human eye sees warm colors before cool hues. Cool colors appear to recede, while warm colors appear to advance, however the degree of saturation can make a difference.

• RED: With its aggressive, stimulating and sexy nature, assertive attention and provoking action, the red is impossible to ignore.
• PINK: Depending on its saturation or value, pink evokes varied mood swings. Magenta and fuchsia are perceived as sensual and theatrical. But water-down the red in lighter pinks and the raw sensuality of red is replaced with gentle romanticism.
• ORANGE: Inheriting some of the drama of red, orange is tempered by the friendly humor of yellow. It’s the color that stimulates the appetite and radiates with warmth and vitality.
• YELLOW: Yellow and black is the most unignorable color combination in nature – tigers, stinging bees – it’s the color that says: you’d better pay attention to me.
• BROWN: Rustic, durable, wholesome and deliciously rich are just some of the traits of the colur that’s often associated with earth and home, substance and stability.
• BLUE: Ever noticed how many corporations and financial institutions use blue in their brands? That’s because blue is seen as dependable and committed. It is also the color we often associate with calm and serenity. Darken the blue and you’ll add an instant authority, credibility and power to it.
• GREEN: Because of its association with nature and foliage, green in design can be used almost like a neutral color: greens never clash with red or pink roses, yellow sunflowers, lilacs or bluebells.
• PURPLE: It’s perhaps the most enigmatic and complex color, with the range of meanings – from royal to elegant to spiritual to mysterious. Purple is often favored by very creative and eccentric people who are not afraid of appearing daring.
• WHITE: Not surprisingly white communicates purity, sense of clarity and simplicity. White is also perceived by the human eye as a bright color, that’s why it works so well in contrast with all other colors.
• BLACK: People see black as the most dramatic, heavy, powerful, classic color with an up-scale look. Because of its extreme contrast to white, black and white is the quintessential combination of depth and clarity, power and innocence.

DON’T be afraid to experiment with color combinations. Sometimes even the forbidden combinations work. Check out various online colour tools and applications that will help you to chose the right color combination for your projects. Mac users can install numerous handy color widget for the Dashboard: Adobe Kuler, Color Theory, ColorSchemer, ColorBurn.
UPDATE: I just found a great list of color resources: Complete Color Matching Guide – it’s definitely worth to be bookmarked.
DO examine other sites and designs to determine which color schemes are more appealing than others. In one of the upcoming weeks, I’ll be featuring sites that were designed with the excellent knowledge and sense of color. Meanwhile, browse numerous CSS galleries, bookmark the sites with attractive color schemes, thumb through the pages of various design magazines, books, not just the ones for graphic designers, but also architectural and interior design publications, where you will be inspired by the innovative and fabulous color combinations.
DON’T forget about the readability when combining
color with type. It’s true that we mainly deal with the black type on white paper/page background, and that a black text on a light background is the easiest to read. However, it doesn’t mean that color and type don’t mix. When used well, color can add an emphasis to your message. Pay attention to the relative values and saturation of colors when a background color interacts with colored type. The contrast between type and background diminishes when their values move closer to each other, and the type becomes less legible. The contrast between the type color and the background color must be considerable to ensure that the type remains visible.
John from iLT also gives this valuable advice: “when using reversed out text (e.g. light on dark), it’s often advisable to make the text a little heavier, as the dark background tends to optically reduce the weight of the text.”