• LinkedIn
  • Subcribe to Our RSS Feed
Browsing "Design"

Colour Association

Jun 21, 2011   //   by B Powell   //   Design  //  No Comments

A fantastic article by Rikard Rodin of Zeven Design, truly excellent reference material!

There is a large array of emotional responses that are associated with colours. Some of these are obvious, some are more obscure. Here is a collection of emotions and concepts associated with particular colours which should be useful to those working in design, photography and illustration.

Contents

Warmth, anger, crudity, excitement, power, strength, love, passion, fire, blood, extreme emotions, battle. Red is supposed to prompt impulse buying. It is used much by the Church to give the feeling of pomp and circumstance. In history it represents royalty, majesty and triumph. Usually thought of as a violent and exciting colour.

Emotional Response

Red is a very emotionally intense colour. It enhances human metabolism, increases respiration rate, and raises blood pressure. It has very high visibility, which is why stop signs, stoplights, and fire equipment are usually painted red. In heraldry, red is used to indicate courage. It is a colour found in many national flags.

Use in Design & Advertising

Red brings text and images to the foreground. It is used to stimulate people to make quick decisions; it is a perfect colour for ‘Buy Now’ or ‘Click Here’ buttons on Internet banners and websites. In advertising, red is often used to evoke erotic feelings (red lips, red nails, red-light districts, ‘Lady in Red’, etc). Red is widely used to indicate danger (high voltage signs, traffic lights). This colour is also commonly associated with energy, so you can use it when promoting energy drinks, games, cars, items related to sports and high physical activity.

Additional Associated Meanings

  • Signifies: strength, health, vigor, lust, danger
  • Holiday: Yule
  • Planet: Mars
  • Day: Tuesday
  • Astrological: Scorpio

Related Colours

  • Light red represents joy, sexuality, passion, sensitivity, and love.
  • Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.
  • Dark red is associated with vigor, willpower, rage, anger, leadership, courage, longing, malice, and wrath.
  • Brown suggests stability and denotes masculine qualities.
  • Reddish-brown is associated with harvest and fall.

Examples

Back to Top

Spring, the macabre, freshness, mystery, envy, hope, eternal life. Being composed of yellow and blue, presents the feeling of light and coolness, cheer and restraint. It is the colour of nature as usually seen. Green alleviates tension. Implies restfulness.

Emotional Response

Green has great healing power. It is the most restful colour for the human eye; it can improve vision. Green suggests stability and endurance. Sometimes green denotes lack of experience; for example, a ‘greenhorn’ is a novice. In heraldry, green indicates growth and hope. Green, as opposed to red, means safety; it is the colour of free passage in road traffic.

Use in Design & Advertising

Green is used to indicate safety when advertising drugs and medical products. Green is directly related to nature, so is used to promote ‘green’ or natural products. Dull, darker green is associated with money, the financial world, banking, Wall Street.

Additional Associated Meanings

  • Signifies: finances, fertility, luck, success, charity, growth, rejuvenation, ambition, greed and jealousy, plant kingdom, herbal healing,
  • Planets: Venus, Mercury
  • Days: Friday, Wednesday
  • Holidays: Spring Equinox, Beltane, Saint Patrick’s Day
  • Astrological: Taurus

Related Colours

  • Dark green is associated with ambition, greed, and jealousy.
  • Yellow-green can indicate sickness, cowardice, discord, and jealousy.
  • Aqua is associated with emotional healing and protection.
  • Olive green is the traditional colour of peace.

Examples


Back to Top

Value, sunlight, the Orient, treachery, brilliance, joy. Being nearest to sunlight, it is connected with cheer and springtime. Yellow claims attention first and fastest.

Emotional Response

Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy. Yellow is often associated with food. Bright, pure yellow is an attention getter, which is the reason taxicabs are painted this colour. When overused, yellow may have a disturbing effect; it is known that babies cry more in yellow rooms. Yellow is seen before other colours when placed against black; this combination is often used to issue a warning. In heraldry, yellow indicates honor and loyalty. Later the meaning of yellow was connected with cowardice.

Use in Design & Advertising

Use yellow to evoke pleasant, cheerful feelings. You can choose yellow to promote children’s products and items related to leisure. Yellow is very effective for attracting attention, so use it to highlight the most important elements of your design. Men usually perceive yellow as a very lighthearted, ‘childish’ colour, so it is not recommended to use yellow when selling prestigious, expensive products to men—nobody will buy a yellow business suit or a yellow Mercedes. Yellow is an unstable and spontaneous colour, so avoid using yellow if you want to suggest stability and safety. Light yellow tends to disappear into white, so it usually needs a dark colour to highlight it. Shades of yellow are visually unappealing because they loose cheerfulness and become dingy.

Additional Associated Meanings

  • Signifies: knowledge, learning, concentration, persuasion, charm, confidence, jealousy, joy, comfort
  • Planet: Mercury
  • Day: Wednesday
  • Astrological: Gemini, Leo

Related Colours

  • Dull (dingy) yellow represents caution, decay, sickness, and jealousy.
  • Light yellow is associated with intellect, freshness, and joy.

Examples

Back to Top

Blue is usually associated with knowledge and serenity. Coolness, ethereality, the infinite, significance, repose, formality. It is associated with the sky, the ocean and ice. It has always been the symbol of truth and purity. Loyalty, compassion, connotes serenity.

Emotional Response

Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness. In heraldry, blue is used to symbolize piety and sincerity.

Use in Design & Advertising

You can use blue to promote products and services related to cleanliness (water purification filters, cleaning liquids, vodka), air and sky (airlines, airports, air conditioners), water and sea (sea voyages, mineral water). As opposed to emotionally warm colours like red, orange, and yellow; blue is linked to consciousness and intellect. Use blue to suggest precision when promoting high-tech products. Blue is a masculine colour; according to studies, it is highly accepted among males. Dark blue is associated with depth, expertise, and stability; it is a preferred colour for corporate America and by survey is the “favorite” colour.

Avoid using blue when promoting food and cooking, because blue suppresses appetite. When used together with warm colours like yellow or red, blue can create high-impact, vibrant designs; for example, blue-yellow-red is a perfect colour scheme for a superhero.

Additional Associated Meanings

  • Signifies: tranquility, understanding, patience, health, truth, devotion, sincerity, honor, loyalty, peace, wisdom, protection during sleep, astral projection
  • Planets: Moon, Venus, Saturn, Jupiter
  • Days: Monday, Friday, Saturday, Thursday
  • Astrological: Libra, Sagittarius

Related Colours

  • Light blue is associated with health, healing, tranquility, understanding, and softness.
  • Dark blue represents knowledge, power, integrity, and seriousness.

Examples


Back to Top

Death, gloom, sorry, hidden action, evil, mourning, disorientation through absence of light.

Black denotes strength and authority; it is considered to be a very formal, elegant, and prestigious colour (black tie, black Mercedes).

Emotional Response

Black is a mysterious colour associated with fear and the unknown (black holes). It usually has a negative connotation (blacklist, black humor, ‘black death’). In heraldry, black is the symbol of grief.

Use in Design & Advertising

Black gives the feeling of perspective and depth, but a black background diminishes readability. A black suit or dress can make you look thinner. When designing for a gallery of art or photography, you can use a black or gray background to make the other colours stand out. Black contrasts well with bright colours. Combined with red or orange – other very powerful colours – black gives a very aggressive colour scheme. Black also communicates elegance and prestige and thus is commonly used in high-end products, such as the iTouch, limousines, formal suits and Jack Daniel packaging.

Additional Associated Meanings

  • Signifies: Negation without reflecting, unlocking when stuck, banishing evil or negativity
  • Holiday: Samhain
  • Planet: Saturn
  • Day: Saturday
  • Deities: The Crone
  • Astrological: Scorpio & Capricorn

Examples


Back to Top

Snow, delicacy, purity, cold, peace, cleanliness, elegance, frailty, mourning, enlightenment, faith, glory, salvation. Orientation through light. In war, means surrender.

Emotional Response

White is associated with goodness, innocence and virginity. It is considered to be the colour of perfection. White means safety, purity, and cleanliness. As opposed to black, white usually has a positive connotation. White can represent a successful beginning. In heraldry, white depicts faith and purity.

Use in Design & Advertising

In advertising, white is associated with coolness and cleanliness because it’s the colour of snow. You can use white to suggest simplicity in high-tech products. White is an appropriate colour for charitable organizations; angels are usually imagined wearing white clothes. White is associated with hospitals, doctors, and sterility, so you can use white to suggest safety when promoting medical products. White is often associated with low weight, low-fat food, and dairy products.

Additional Associated Meanings

  • Signifies: purity, consecration, meditation, divination, exorcism, the full moon, healing, peace, spiritual strength, may be substituted for any other colour
  • Planet: Moon
  • Day: Monday
  • Astrological: Cancer

Examples


Back to Top

Being made of yellow and red, given associations of light and heat. It is the colour of pride and ambition. Associated with sunshine and warmth, considered cheerful.

Emotional Response

Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement and stimulation.

Use in Design & Advertising

To the human eye, orange is a very hot colour, so it gives the sensation of heat. Nevertheless, orange is not as aggressive as red. Orange increases oxygen supply to the brain, produces an invigorating effect, and stimulates mental activity. It is highly accepted among young people. As a citrus colour, orange is associated with healthy food and stimulates appetite. Orange is the colour of fall and harvest. In heraldry, orange is symbolic of strength and endurance.

Orange has very high visibility, so you can use it to catch attention and highlight the most important elements of your design. Orange is very effective for promoting food products and toys.

It’s disadvantage is that by survey of “favorite colour” orange usually comes the lowest and thus it is rarely used for longer term products, such as cars or electronic products.

Additional Associated Meanings

  • Signifies: encouragement, adaptability, stimulation, attraction, plenty, kindness
  • Holiday: Candlemas
  • Deities: Brigid
  • Planets: Sun, Mars, Mercury
  • Days: Sunday, Tuesday, Wednesday

Related Colours

  • Dark orange can mean deceit and distrust.
  • Red-orange corresponds to desire, sexual passion, pleasure, domination, aggression, and thirst for action.
  • Gold evokes the feeling of prestige. The meaning of gold is illumination, wisdom, and wealth. Gold often symbolizes high quality.

Examples


Back to Top

Colour of royalty. Has a strong religious significance. It is used as half-mourning. By associations, it gives a feeling of mystery. It is the colour of shadows.

Emotional Response

Purple combines the stability of blue and the energy of red. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.

Use in Design & Advertising

According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colours. Purple is a very rare colour in nature; some people consider it to be artificial.

Light purple is a good choice for a feminine design. You can use bright purple when promoting children’s products.

Additional Associated Meanings

  • Signifies: power, piety, sanctity, sentimentality, tension, sadness amplification of other energies, wisdom, high ideals, spiritual protection and healing, psychic ability, protective energy
  • Planet: Jupiter
  • Day: Thursday
  • Astrological: Sagittarius

Related Colours

  • Light purple evokes romantic and nostalgic feelings.
  • Dark purple evokes gloom and sad feelings. It can cause frustration.

Examples


Back to Top

COLOUR COMBINATIONS

There are certain colour combinations which together have their own symbolism.
Red and green together denote pain (and, ironically, Christmas).

Black relieved with white signifies sophistication, vigor, newness.

Black and red together are the colours of enemy.

Examples

Back to Top

Colour Harmonies

Jun 20, 2011   //   by B Powell   //   Design  //  No Comments

Another great article by Rikard Rodin of Zeven Design.

One of the basics of design is colour harmony. This is how colours are combined in an image. Done correctly, the image will look good. Done incorrectly and the image will look amateur.

Colour harmony is determined using a colour wheel. This is a wheel representing all colours in a circular fashion. As it is circular, each of the colours are next to their closest relatives—red is next to orange, green is next to aqua (blue-green) and so forth. Every designer should have a color wheel. You can get the iPhone app Color Expert here.

The first thing to understanding colour harmony is to understand what a “key colour” is. This is the colour in a scene or piece of art which cannot change (as in an outdoor scene where there may be predominantly green grass). It is either the biggest amount of colour in the scene (a blue sky, for example) or what you are trying to concentrate your public’s attention on in the picture (an animal in the forest).

Using a colour wheel, the key colour determines the rest of the colours in your color harmony.

There are four primary types of colour harmony: direct, split, triad and related. These can be seen above—and any of these can be used for an image.

Let’s take a closer look at each one.

DIRECT HARMONY

Also called Complementary harmony or Complement. This is the colour directly opposite the key colour on the colour wheel. In the direct harmony one has the equal or lesser amount of colour in the scene as the complementary.

Here are some examples of direct harmony:

RELATED COLOURS

Also called Analogous harmony. The immediate adjacent areas to the key colour are the analogous colours. When you go two spaces away from the key colour on a colour wheel, you are stretching colour harmony.

Here are some examples of related (analogous) harmony:

I mentioned above that if you two spaces on the colour wheel (away from the key colour) you are stretching colour harmony. And in case there is any question, this is a bad thing. The image will start to look “wrong”. Here’s an example, where the sky should have been more purple. Because it isn’t, the whole image looks like it has too many different colours.

SPLIT COMPLEMENTARY

Also called Splits. These refer to the colours immediately adjacent to the complement of the key colour.

Here are some examples of images that use split complementary:

TRIADIC HARMONY

Also called Triadics or Triads. This refers to the colour two spaces to either side of the key colour’s complement. When using triadics, you are dealing with just spots of colour in a picture.

This is my personal favourite of the four colour harmonies. These are much more restrained in their colour usage and give a touch of contrast with spots of other colours.

Here are some examples of the Triadic Colour harmony:

SUMMARY

There is no “right” or “wrong” colour harmony to use in your design. As you use them, however, you will find that certain harmonies work better for certain applications. For example, Direct Harmony, is more commonly used for children’s products whereas high-end products usually use Triadic or Related as these are more sophisticated (using a smaller colour palette).

Not using any of the colour harmonies is the only fault you can make. While it may not be obvious, it is irritating to look at an image that isn’t harmonious. A good example is the poster above for X-Men, which just looks like the designer couldn’t decide on a colour to use and so used too many.

RGB vs CMYK

Jun 20, 2011   //   by B Powell   //   Design  //  No Comments

Article by Rikard Rodin of Zeven Design.

One of the first things to learn about color is the difference between RGB and CMYK. I imagine most designers already know the difference. But I’ve met some people who work in design and assume they know the difference while really just knowing what each one stands for.

So let’s start with some definitions.

RGB stands for Red, Green and Blue. It is a color space—a means of representing color—that is based on light. Through the combination of red, green and blue light any other color can be created. Because of this, these three colors are referred to as additive primaries. Primary is in reference to the fact that they are the base colors used to create all other colors. Additive is in reference to the fact that white is created by adding equal parts of all three. Conversely, black is created by the complete absence of red, green and blue light.

CMYK standards for Cyan, Magenta, Yellow and blacK (or Key). These are the subtractive primaries. Like red, green and blue, these colors—mixed together—can create all other colors (this is theoretical, see below). Subtractive is in reference to the fact that subtracting all of these colors creates white. And mixing equal parts of all these colors together creates black. (For the absolute beginners, cyan is an aqua blue color. Magenta is a strong pink color.)

So why two color spaces? The simple fact is that RGB is based on light. And printers can’t print light.

The RGB color space is used by monitors (TVs, projectors, etc.). CMYK is used by any printing method (paint, dyes, etc.).

Now that we have some basics out of the way, let’s go a little deeper.

The Differences

Aside from the obvious differences between RGB and CMYK  explained above, there are real differences that a designer must be aware of.

  • First and foremost, more colors can be created in RGB than in CMYK. Every color space has a gamut. And while there are more color spaces than just RGB and CMYK, we’ll stick to these for the purpose of this article. A gamut is the full range of colors that can be recreated within a color space. Overall, RGB has a much larger gamut than CMYK.
  • Blues normally look better in RGB than in CMYK. You can have a great looking blue on your screen (RGB) that prints like a flat purple.
  • Bright greens will look flat when converted from RGB to CMYK.
  • Some reds and burgundies look better in CMYK than in RGB.

What to Use When Designing

The simple answer is RGB.

When you are working on a design in Photoshop or some other editing/compositing program, you should use the RGB color space. There are two reasons for this:

  1. In today’s audiovisual world, it is more than likely your design will be multi-purposed for web or video use. Having your original design in RGB will mean the nicest design possible.
  2. There are a lot of blending tools and effects that will work in the RGB color space but will not in CMYK. A good example is the screen blending mode—extremely useful in design. Works in RGB, is terrible in CMYK.

Thus the best design method is to design in RGB and convert to CMYK as close to the printing stage as possible. If you are working on a design that starts in Photoshop, goes through InDesign and finally prints from a PDF, then convert to CMYK while PDFing.

So are there any scenarios where it is better to design in CMYK? Yeah, afraid to say there are. While there are probably a few, the one that comes to mind is a design that is predominantly grey. And predominantly is the key word—because designs that are entirely grey should be done in greyscale. Let’s take, for example, a photo of a silver globe. There’s some subtle color in the reflection, but it’s mostly grey. If this is created in RGB, the grey will be made up of equal parts of red, green and blue. When converted to CMYK, it will be made of equal parts of cyan, magenta and yellow.  This will be very hard to control when on press. And, more than likely, will come out pink when printed.

But if the design is being created in CMYK, you can control the grey and create it using the black channel. The result is that the item will actually print looking grey with almost zero effort by the printer.

Color Correcting for Print

In many cases, no color correction is required when converting from RGB to CMYK. But it’s a good thing to preview your RGB image in CMYK before converting. If you are using photoshop,  go to the menu VIEW > PROOF COLORS. This will show you what the image will look like when converted to CMYK.

You’ll usually notice differences in the bright blues and bright greens.

For greens, use a SELECTIVE COLOR adjustment layer and pull out cyan and add yellow. Do this until you see the detail come back into the image.

For blues, also use a SELECTIVE COLOR adjustment layer—pull out magenta, add some cyan and some black. This will avoid the blues turning purple.

Obviously the above is a simplified version of everything that goes into color correction. But rest assured it will handle 90% of the problems you run into.

Other Incidental Facts

Secondary Colors: The mixing of two RGB colors results in one of the CMY colors and the mixing of two CMY colors results in an RGB color. Red and green result in yellow. Red and blue result in magenta. Green and blue result in Cyan. These can be a bit confusing because colors are created by the mixing of light. The CMY combinations are more obvious—Cyan and Yellow result in green. Cyan and Magenta result in blue. Yellow and Magenta result in red.

So are there any secondary colors that are actually secondary? Well, secondary colors commonly refer to the “in-between” colors of Orange (Yellow plus some Magenta), Violet (Cyan plus some Magenta) and Green (Yellow plus Cyan).

In addition to equalling each other in mixing, every RGB color has an opposite in CMY. This is good to know when color correcting.

Red is the opposite of Cyan
Green is the opposite of Magenta
Blue is the opposite of Yellow

So if you have a photo that is too pink and you are working in the RGB color space, you can add green to counter act the magenta.

Summary

As a designer, it’s important to know the differences between RGB and CMYK, when to use them, their advantages and disadvantages.

Hopefully this article will help.