Color theory

Color Theory
Graphic Design by Horhe

The ColorWheel
- A color circle, based on red, yellow and blue, is traditional in the ﬁeld of art.
- Sir Isaac Newton developed the ﬁrst circular diagram of colors in 1666.
- Any color circle or color wheel which presents a logically arranged sequence of
pure hues has merit.
Primary Colors: Red,Yellow & Blue
- In traditional color theory, these are the 3 pigment colors that can not be mixed
or formed by any combination of other colors.
- All other colors are derived from these 3 hues

Secondary Colors: Green, Orange & Purple
- These are the colors formed by mixing the primary colors.
Tertiary Colors: Yellow-orange, red-orange, red-
purple, blue-purple, blue-green and yellow-green.
- These are the colors formed by mixing a primary and a secondary color.
-That's why the hue is a two word name.

Color Harmony
- Harmony can be deﬁned as a pleasing arrangement of parts, whether it be
music, poetry, color, or even an ice cream sundae.
- In visual experiences, harmony is something that is pleasing to the eye.
- It engages the viewer and it creates an inner sense of order, a balance in the
visual experience.
-When something is not harmonious, it's either boring or chaotic.
-The human brain rejects what it can not organize, what it can not understand.
-The visual task requires that we present a logical structure. Color harmony
delivers visual interest and a sense of order.
- Harmony is a dynamic equilibrium.

Some Formulas for Color Harmony
There are many theories for harmony.The following illustrations and descriptions
present some basic formulas .
A color scheme based on analogous colors
- Analogous colors are any three colors which are side by side on a 12 part color
wheel, such as yellow-green, yellow, and yellow-orange.
- Usually one of the three colors predominates.
-Visual eﬀect gets calm and soft

A color scheme based on complementary colors
- Complementary colors are any two colors which are directly opposite each other,
such as red and green and red-purple and yellow-green.
-These opposing colors create maximum contrast and maximum stability.

A color scheme based on nature
- Nature provides a perfect departure point for color harmony.
- In the illustration above, red yellow and green create a harmonious design,
regardless of whether this combination ﬁts into a technical formula for color
harmony.

Color Context
- How color behaves in relation to other colors and shapes is so important.
- Red appears more brilliant against a black background and somewhat duller
against the white background.
- In contrast with orange, the red appears lifeless
- In contrast with blue-green, it exhibits brilliance.
- Notice that the red square appears larger on black than on other background
colors.

Diﬀerent readings of the same color
-The small purple rectangle on the left appears to have a red-purple tinge when
compared to the small purple rectangle on the right.
-They are both the same color .
-This demonstrates how three colors can be perceived as four colors.
-The relationship of values, saturations and the warmth or coolness of respective
hues can cause noticeable diﬀerences in our perception of color.

Color Symbolisim
-The communicative properties of a color:
· natural associations
· psychological (cultural) associations.
- People are comfortable when colors remind them of similar things.
EX. a soft shade of blue triggers associations with the sky, we get a sense of calm.
- Successful design requires how and why colors communicate meaning.
-The source of these meanings can be quite conspicuous
EX. red is the color of blazing ﬁre and blood, blue the color of cooling waters and
the sky.
- Other meanings may be more complex and not universal.

Natural Associations
- Occurrences of colors in nature are universal and timeless.
EX, green is the color of vegetation can be considered a universal and timeless
association.

Psychological or Cultural Associations
-This symbolism arises from cultural and contemporary contexts.
- It is not universal and may be unrelated to its natural associations.
EX. green’s associations with nature communicate growth, freshness and ecology.
On the other hand, green may also be symbolic of good luck, money and greed; all
of which have nothing to do with green plants.
-These associations arise from a complex assortment of sources.

- Color may have both positive and negative symbolism.
EX. although blue is the beautiful color of the sky, it can be symbolic of sadness or
stability. Idiomatic American English reﬂects these traits in phrases such as
“singing the blues”and“blue chip stocks.”
Red is the color of ﬁre and blood, it is an energizing, aggressive and bold color. In
direct contrast, red is used for“STOP”signs throughout the world today.
- There are no absolutes, but there are logical sources for the range of complex
and sometimes contradictory psychological/cultural meanings of colors:
1. Cultural associations: the color of currency, traditions, celebrations,
geography, etc.
EX. green is associated with heaven (Muslims) and luck (U.S. and Ireland)

2. Political and historical associations: the color of ﬂags, political parties,
royalty, etc.
EX. green is the color of Libya's ﬂag; it’s the favorite color of Emperor Hirohito and
the source of "Green Day" in Japan, and in the U.S., the Green Party.
3. Religious and mythical associations: the colors associated with spiritual or
magical beliefs
EX. the green man was the God of fertility in Celtic myths, a symbolism that carries
over into today’s associations of Green M&M candies with sexuality in the U.S.
Also, in contemporaryWestern culture, green is associated with extraterrestrial
beings.

4. Linguistic associations: color terminology within individual languages
EX. South Paciﬁc languages refer to shades of green by comparison to plants in
various stages of growth.
In Scottish Gaelic the word for blue ('gorm') is also the word used for the color of
grass.
5. Contemporary usage and“on fashion”: current color applications to
objects, sports, and associations generated by modern conventions and trends.
EX. green is used world wide for traﬃc lights signifying "go."
In Scandinavia, green has been a popular color for many decades.
Today, lime green has been a hip and trendy color in fashion and advertising in the
US since the late 1990s.

Color symbolisim - Influential factors
1.The specific shade (variation) of a color
Dark and light shades of any color has completely different meanings.
EX. pink loses all of red's associations with energy and takes on new connotations
of sweetness. Dark blue is dignified and authoritative, sky blue is ethereal and
softer.
2.The quantity and placement of the color
Colors deliver the most powerful symbolism when used in large areas

Color symbolisim - Inﬂuential factors
3.The shape or object the color occupies
Symbolism becomes more complex when a color is used in combination with a
basic shape.
4.The Color combination
Colors take on new meaning when combined with other colors.
EX. red and green are the colors of Christmas inWestern cultures.

Color & Marketing
1. Research, 92.6 % said that they put most importance on visual factors when
purchasing products. Only 5.6 % said that the physical feel via the sense of touch
was most important. Hearing and smell each drew 0.9 %. By SecretariatoftheSeoul
InternationalColorExpo2004
2. When asked people to approximate the importance of color when buying
products, 84.7 % of the total respondents think that color accounts for more than
half among the various factors important for choosing products.
3. Research reveals people make a subconscious judgment about a person,
environment, or product within 90 seconds of initial viewing and that between
62% and 90% of that assessment is based on color alone. ByInstituteforColorResearch
4. Research suggests 73% of purchasing decisions are now made in-store.
Consequently, catching the shopper's eye and conveying information eﬀectively
are critical to successful sales. ByHenleyCentre

Color & Brand Identity
1. Color increases brand recognition by up to 80 %. UniversityofLoyola,Maryland
Ex. Heinz: color influences brand identity in a variety of ways. Consider the
phenomenal success Heinz EZ Squirt Blastin' Green ketchup has had in the
marketplace. More than 10 million bottles were sold in the first seven months
following its introduction, with Heinz factories working 24 hours a day, seven days
a week to keep up with demand.The result: $23 million in sales attributable to
Heinz green ketchup [the highest sales increase in the brand's history]. All because
of a simple color change.
Ex. Apple Computer: Apple brought color into a marketplace where color had not
been seen before. By introducing the colorful iMacs, Apple was the first to say, "It
doesn't have to be beige".The iMacs put on the top a brand that had suffered $1.8
billion of losses in two years.

Color increases memory
- Psychologists have documented that "living color" does more than appeal to the
senses. It also boosts memory for scenes in the natural world.
- Color helps us to process and store images more eﬃciently than colorless (black
and white) scenes.
Color engages & increases participation
- Ads in color are read up to 42% more often than the same ads in black and white
Color attracts attention
-Tests indicate that a black and white image may sustain interest for less than
two-thirds a second, where as a colored image may hold the attention for two
seconds or more.
- A product has 0,12 seconds to halt the customer's attention on a shelf or display

Other research
- 92% Believe color presents an image of impressive quality
- 90% Feel color can assist in attracting new customers
- 90% Believe customers remember presentations and documentsbetter when
color is used
- 83% Believe color makes them appear more successful
- 81%Think color gives them a competitive edge
- 76% Believe that the use of color makes their business appear larger to clients
ByXeroxCorporationandInternationalCommunicationsResearch
- People cannot process every object within view at one time.Therefore, color can
be used as a tool to emphasize or de-emphasize areas.
Ex. An insurance company used color to highlight key information on their
invoices. As a result, they began receiving customer payments an average of 14
days earlier.

Color & the Sense
General facts about sensory input and human beings:
- From the pre-historic era, sight became our most important means of survival.
Furthermore, as hunters and gatherers in the early days of our evolution, we
experienced a variety of colors and forms in the landscape.This has become part of
our genetic code.
- In our current state of evolution, vision is the primary source for all our
experiences.
- Current marketing research has reported that approximately80% of what we
assimilate through the senses, is visual.
- Our nervous system requires input and stimulation.With respect to visual input,
we become bored in the absence of a variety of colors and shapes. Consequently,
color addresses one of our basic neurological needs for stimulation.

How the eyes sees color
- Color originates in light. Sunlight, as we perceive it, is colorless. In reality, a
rainbow is testimony to the fact that all the colors of the spectrum are present in
white light.
- Light goes from the source (the sun) to the object (the apple), and finally to the
detector (the eye and brain).
1. All the" invisible" colors of sunlight shine on the apple.
2.The surface of a red apple absorbs all the colored light rays, except for those
corresponding to red, and reflects this color to the human eye.
3.The eye receives the reflected red light and sends a message to the brain.

Metamerism
It is a phenomenon that occurs when a color swatch and a sample match in one
light source but not in another. Metamerism is almost inevitable with some colors
and less of a problem in others. Several factors can compound this problem,
including colorant class, coloration processes, and color-matching between
manufacturers. Even when metamerism is expected, Colortec/Dyeables constantly
makes eﬀorts to minimize it.
Ex.You just bought a pair of running pants to go with the wind-breaker you
bought a month ago at that big department store.You see the pants and know
they are a good match with the jacket.While you are there you pick up some
running shoes and wrist bands in the same color, what a fashion statement. But
wait, outside the shoes and wristbands are not at all the same color !
Ex. So many times when you print your work in a type of paper with some
Pantones deﬁned, it will change when you use another type of material, paper, etc.

Fighting Metamerism when Colormatch formulating
All colors change when viewed in different light sources.Your goal when mixing a
color is to try to use the same choice of colorants that where used when the target
color was dyed (aTan for instance can be made from many different combinations
of mixing colorants).When you find the right combination of colorants, the finish
color (shoe) will change the same as the target color (dress) in different light
sources. Unfortunately without expensive equipment, software, and education,
Trial & Error is the only practical option to find out what colorants you should use.
Also make every effort to use three or less colorants in a formula as this will also
help to lessen the chances of metamerism.
Different materials (cotton/polyester/rayon/wool/nylon/ect) all have different
color and coloration characteristics.
Optical brighteners are present in most dyeable shoes and hand bags (but not all)
and some dresses (but not all).

Here are a few tips to help you assess color in the retail environment:
- Always compare the sample (broachure, flyer, textil...) to the standard (the color
book, pantone) in the same light source-the agreed-upon cool white fluorescent
- Avoid spotlights, neon signs, track lighting, outdoor windows, skylights, etc. as
well as brightly colored walls, posters, or banners.
- Use a white card or white paper to cover color swatches surrounding the target
swatch. Other colors in your field of vision will affect your color judgment.
- Hold the standard (target swatch) and the sample, at a 30-degree angle to
overhead lighting.
- Small samples are more easily influenced by the color of the standard.The bigger
the sample, the better.
- Don't look at a color for more than 5 seconds at a time when assessing.The brain
compensates for color differences perceived by the eye after a few seconds.

- Do not stand in direct sunlight. Sunlight will affect your eyes' ability to see
beyond the shine of the material to the color.
- If a color matches under both indoor lighting and daylight, it could still have
characteristics of metamerism due to different dye classifications and processes.
-The colors that are most likely to have metameric problems include taupe,
mauve, lilac, tan, gray/blues, and grays.

How Color aﬀects taste & smell
-This is condition known as synaesthesia.
- Our senses work together.
Ex. seeing a color may evoke any number of other sensations. Green may be
evocative of the smell of grass, lemon yellow may evoke a sour taste.
- Each sense has a pathway to the brain.These paths are parallel to each other.

How Color aﬀects taste & smell
- In some situations, a cross over from one pathway to the other occurs.
Ex. Seeing the color yellow-green may evoke taste sensations of sourness; pink
may evoke sweetness. Seeing the color grey may evoke olefactory (smell)
sensations of smokiness.
-We all have some degree of synaesthesia, but a person with a strong sense of
synaesthesia senses stimuli diﬀerent from a "normal" person.
Ex. A color might have a "taste", a sound might be "felt", and a food might be
"heard".

Color and Food Matters
Several years ago, the makers of "m & m's" added a new color to its candy bag:
Blue. Why Blue? Although they reported that this was the result of a vote by m &
m's fans it raises a few questions. It may very well be the last color left in the bag
after the novelty wears oﬀ.
- Of all the colors in the spectrum, blue is an appetite suppressant.
Ex.Weight loss plans suggest putting food on a blue plate, or put a blue light in
the refrigerator to watch munchies disappear. And maybe dye the food blue!

Color and Food Matters
- Dramatic results can also be achieved by using a blue light bulb for a dining area.
- Blue food is a rare occurrence in nature, there are no leafy blue vegetables, no
blue meats , and aside from blueberries and a few blue-purple potatoes from
remote spots on the globe, blue just doesn't exist in any signiﬁcant quantity as a
natural food color.
- Consequently, we don't have an automatic appetite response to blue.
Our primal nature avoids food that are poisonous. A million years ago, when our
earliest ancestors were foraging for food, blue, purple and black were "color
warning signs" of potentially lethal food.
- Some food products fail in the marketplace not because of bad taste, texture, or
smell but because the consumer never got that far.

Who Owns Hues?
- Due to the impact of colors on sales, many businesses have taken steps to protect
their color identity.The principle that a single color may receive trademark
protection is now the law of the land.
- On the other hand, the courts recognize that colors are in limited supply and that
allowing companies to appropriate colors will soon lead to the "depletion" of all of
the attractive colors in each product line.
- Although the courts tend to view that preventing the use of a color would put a
competitor at a signiﬁcant disadvantage, the color must pass the functionality
test.

Who Owns Hues?
Functionality can be defined by multiple criteria. Here’s a simplified list:
- Psychological Effects (symbolism, associations)
When a color’s associations relate to the product in a literal or abstract way, this
is considered to be functional. EX. green is frequently used in packaging of organic,
healthy and natural products because if the association with trees, grass and
nature. Another example is blue fertilizer (indicating the presence of nitrogen).
- Aesthetic Effects (attractive and effective design)
Many color combinations can be considered to be harmonious and“pleasing to
the eye.”EX. green and yellow are harmonious since they are closely related to
each other (analogous). Functional design effects may also include perception of
size and weight. For example a black outboard motor appears smaller than motors
in other colors.

Who Owns Hues?
-Visual Effects (eye catching, text legibility)
The human eye reacts to color in many different ways.Some colors are advancing
(and grab attention), others receding. Some color combinations render text
legible; others are problematic.
In conclusion, in spite of precedent setting lawsuits, the laws of color ownership
are in flux. So companies continue to take legal action and millions are spent to
defend the rights to color. Could all the colors of the rainbow be confiscated in a
marketing war? It’s a wake-up call for everyone.
The most technically accurate definition of color is:
"Color is the visual effect that is caused by the spectral composition of the light
emitted, transmitted, or reflected by objects."

Computer Color Matters
- These images represent a range of what any given image may look like to
someone viewing a web.
- A web site distributes images to many different types of computers and monitors,
an image that looks good on one system might look completely different on
another.
-The image at the far left is true to the real colors, the second one from the left
represents a very limited color palette, the third from the left is a much lighter
version of the first one, and the last image on the right represents a very bad color
distortion.

Does true Color Matters?
EX: If you visit a clothing store on theWeb and see a blue shirt, you are out of luck
if you think that the shirt is really that shade of blue.
How Computers See Color
The following components work together to create color on your computer:
1.The computer hardware on the motherboard
It may or may not be able to see and recreate accurate colors.
2. Graphic cards or video cards/boards
This helps your computer to see better colors and more colors.

3.Your monitor
Cheap monitors deliver terrible color.The colors generated on your monitor are
also aﬀected by anti-glare screens and devices that lower the radiant emissions.
If you have a good video card, good operating system software, and good
application software, a bad monitor can still create inaccurate colors. And even if
you have a fantastic monitor, the other components can still create bad colors. So
you're looking at a case-by-case kind of situation.
4.The web browser (Firefox, Explorer, Safari etc.)
Consider the browser to be the messenger who delivers the colored graphics to
your computer.

About the Colors in Images
-The images you see on theWeb are either GIF, PNG or JPEG images.
- It refer to the computer language that is at work within graphic images.
These images can be viewed by all "brands" of computers, PCs, Macintosh, and
Unix.They also contains color information and this information is based on RGB, on
how much (R) red (G) green and (B) blue is in the image.

RGB ColorTheory
- Computers create colors based on a special set of 3 primary colors: red, green, and
blue.
- So does your television. If you go up close to yourTV, (put your eye right on top of
the screen) you will see little dots of red green and blue.
- In computers and television, light transmissions are creating the color. Red and
green mix to create yellow.
-This is called "Additive Color" and is completely diﬀerent from how colors are
mixed in paints and pigments.
EX.When we mix red and green paint, we get muddy browns.This is "Subtractive
Color" and is based on the primaries, red, yellow, and blue (or red-based/magenta,
yellow-based/yellow, blue-based/cyan).

Is your computer color blind?
There are four tests to see how your computer color vision rates.
1. Here's a test for a pure white pixel
Hold a piece of pure white paper perpendicular to your monitor screen. Do not
place it flush against the screen. Hold it on an angle.The background color for this
Web page is pure white. If you are seeing a very pale greyish or bluish color, your
computer does not view colors accurately. If you do not have a pure white, every
color is affected.You have the "Sunglass Syndrome".
Consider this: Even if you have perfect color vision, if you're wearing sunglasses,
you will still see thousands of colors, but those colors are not the actual color.They
are being filtered through the dark lens. Unfortunately many computer systems
have a similar color blindness. In many cases, the monitor is the primary cause of
this effect.

2. Here's a test for gamma
-The image below allows you to directly estimate the gamma of your display
system.
- Stand about 1,5 - 2m. away and decide which column of the image comes closest
to having equal brightness in the top and bottom halves.
-The number under this column is the gamma of your display system.

- Most PCs have a gamma of roughly 2.5 and many do not provide sufficient
gamma correction. Graphics cards typically perform some gamma correction.
- Macintosh computers, Silicon Graphics workstations and machines have corrected
gamma either from its built-in graphics card (Mac) or hardware (Silicon Graphics).
- Remember, the colors you are seeing on your screen right now are resulting from
several components that are working all at once.
- Different computers do different things and many "systems" have different
configurations of the critical elements.

3. Here's a test for a good range of lightness and darkness of colors
Do some of the squares look the same? If so, which ones? Does each square look
diﬀerent?Which ones look the most diﬀerent? Do you notice anything else ?
-This is known as a GREYSCALE.
- Each square represents a ten percent change.
- It also represents the range of any given color on you may see on your monitor.

This is the same image but with the added information of the % of black used in
each square.
- If any of the greys look the same, your gamma needs correction.
-The human eye requires contrasts for visibility and a wide range of shades of a
color to sustain visual interest and deliver accurate information.
- If the issue is visibility, the answer is contrast.
EX. Recent legislation in the US (the Americans with Disabilities Act), requires high
contrasts between light and dark colors on all signals so that the visually disabled
can see this information. All computers can deliver high contrasts between light
and darks.

4. Here's a color test.
These squares are based on the 216 web-safe color palette (which includes all the
colors that are common to all computers and browsers).
- If any of the ﬁrst three squares looks almost black, you need to correct your
gamma.
-With corrected gamma, the ﬁrst color is a deep rich green, the second color is a
burgundy, and the third color is a medium dark blue.The last square on the right is
a pastel blue-green. If this last square looks very very pale, almost white, your
gamma also needs correction.

- A black strip at the base of the colors so that you can compare each of them to
pure black.
EX:These are colors are "web-safe" colors. If your gamma is sufficiently corrected,
the only one that should be difficult to distinguish is the last one on the right.
-The colors in these squares will look different on theWeb since different
computer systems have different gamma ratings and gamma affects the color
ingredients.
- If JPEG and GIF graphics stored gamma information in addition to how much red,
green and blue, that would be the first step in establishing color accuracy on the
Web. Next ,if your browser could carry that information, that could be the second
part of the solution.Therefore, a graphics format that can store gamma
information would be an essential part of the solution.
- It does exist... and it's the PNG format.

The Power of Gamma
Gamma is one of the most difficult computer terms to define. Lets try to simplify it.
1. Gamma is a measurement. Like gigabytes or calories.
2. Gamma is also a mathematical formula. It reflects a relationship between input
and output.
3. Gamma describes a critical relationship between electricity and what happens
on your monitor.
4. It is a mathematical formula which describes the relationship between the
voltage input and the brightness of the image on your monitor screen.

The Power of Gamma
5. Gamma can also be described as the measurement of contrast that affects the
midtones of an image.
6. A gamma measurement can apply to several elements within your computer system:
* the cathode ray tube (CRT) in your monitor
* the hardware look up table (LUT)
* the overall output
Correcting gamma, we achieve desirable images on our monitors and television screens.
Gamma measurements will range from 1.0 to 3.0. Different systems will have different
gamma measurements.
An effective gamma rating will deliver true colors and a good range of light, middle, and
dark tones.

More....
- Colors viewed at an uncorrected gamma will appear diﬀerent from those viewed at a
corrected gamma.
-The left side, viewed with corrected gamma should look like a bright sunny day at the
beach.
- Gamma also aﬀects the range of greys and tones of any given color.

THEWEB-SAFE COLOR PALETTE
-This is the web-safe 216 color palette
These are web-safe greens from the 216 color palette.

THEWEB-SAFE COLOR PALETTE
If you use a green that is not one of the web-safe colors, the green will consist of a
series of green dots that approximate the color.
EX. the green below is not a web-safe green.
You can see an exaggeration of the "dithering".This is how this color might look on
computers that have 8-bit color.
- On the other hand, many say that the web-safe palette is a thing of the past. It´s
up to you.
- Currently, the colors and the brightness of all images look diﬀerent on diﬀerent
computer systems.
To achieve accurate colors, PNG format can store gamma and chromaticity data for
improved color matching and is designed to work on all computer systems and
Web browsers.

Via: http://www.colormatters.com

Color theory

More Related Content

Similar to Color theory

More from Phi Jack

Recently uploaded

Color theory