color theory
TRANSCRIPT
Color Theory
Graphic Design by Horhe
1stPart
The Color Wheel
- A color circle, based on red, yellow and blue, is traditional in the field of art.
- Sir Isaac Newton developed the first 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 defined 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 effect gets calm and soft
Some Formulas for Color Harmony
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.
Some Formulas for Color Harmony
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 fits 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.
Different 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 differences in our perception of color.
2ndPart
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 fire 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.
Psychological or Cultural Associations
- 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 reflects these traits in phrases such as “singing the blues” and “blue chip stocks.”
Red is the color of fire 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)
Psychological or Cultural Associations
2. Political and historical associations: the color of flags, political parties, royalty, etc.
EX. green is the color of Libya's flag; 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 contemporary Western culture, green is associated with extraterrestrial beings.
Psychological or Cultural Associations
4. Linguistic associations: color terminology within individual languages
EX. South Pacific 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 traffic 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 - Influential 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 in Western 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 Secretariat of the Seoul International Color Expo 2004
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. By Institute for Color Research
4. Research suggests 73% of purchasing decisions are now made in-store. Consequently, catching the shopper's eye and conveying information effectively are critical to successful sales. By Henley Centre
Color & Brand Identity
1. Color increases brand recognition by up to 80 %. University of Loyola, 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 efficiently 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 documents better 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
By Xerox Corporation and International Communications Research
- 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 approximately 80% 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 efforts 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 defined, 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 (a Tan 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).
Fighting Metamerism when Colormatch formulating
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.
Fighting Metamerism when Colormatch formulating
- 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 affects 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 affects 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 different 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 off.
- 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 significant 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 significant 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."
3rdPart
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 the Web 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 ColorThe 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 affected 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 the Web 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 Color Theory- 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 your TV, (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 different 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.
Is your computer color blind?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.
Is your computer color blind?- 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.
Is your computer color blind?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 different? Which ones look the most different? 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.
Is your computer color blind?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.
Is your computer color blind?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 first three squares looks almost black, you need to correct your gamma.
- With corrected gamma, the first 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.
Is your computer color blind?
- 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 the Web 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 GammaGamma 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 different 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 affects the range of greys and tones of any given color.
THE WEB-SAFE COLOR PALETTE- This is the web-safe 216 color palette
These are web-safe greens from the 216 color palette.
THE WEB-SAFE COLOR PALETTEIf 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 different on different 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