Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Color theory


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

Color theory

  1. 1. Color TheoryGraphic Design by Horhe
  2. 2. 1stPart
  3. 3. The ColorWheel- 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 ofpure hues has merit.Primary Colors: Red,Yellow & Blue- In traditional color theory, these are the 3 pigment colors that can not be mixedor formed by any combination of other colors.- All other colors are derived from these 3 hues
  4. 4. 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.-Thats why the hue is a two word name.
  5. 5. Color Harmony- Harmony can be defined as a pleasing arrangement of parts, whether it bemusic, 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 thevisual experience.-When something is not harmonious, its 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 harmonydelivers visual interest and a sense of order.- Harmony is a dynamic equilibrium.
  6. 6. Some Formulas for Color HarmonyThere are many theories for harmony.The following illustrations and descriptionspresent 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 colorwheel, such as yellow-green, yellow, and yellow-orange.- Usually one of the three colors predominates.-Visual effect gets calm and soft
  7. 7. Some Formulas for Color HarmonyA 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.
  8. 8. Some Formulas for Color HarmonyA 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 colorharmony.
  9. 9. 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 dulleragainst 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 backgroundcolors.
  10. 10. Different readings of the same color-The small purple rectangle on the left appears to have a red-purple tinge whencompared 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 respectivehues can cause noticeable differences in our perception of color.
  11. 11. 2ndPart
  12. 12. 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 conspicuousEX. red is the color of blazing fire and blood, blue the color of cooling waters andthe sky.- Other meanings may be more complex and not universal.
  13. 13. Natural Associations- Occurrences of colors in nature are universal and timeless.EX, green is the color of vegetation can be considered a universal and timelessassociation.
  14. 14. 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; allof which have nothing to do with green plants.-These associations arise from a complex assortment of sources.
  15. 15. 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 orstability. 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. Indirect contrast, red is used for“STOP”signs throughout the world today.- There are no absolutes, but there are logical sources for the range of complexand 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)
  16. 16. Psychological or Cultural Associations2. Political and historical associations: the color of flags, political parties,royalty, etc.EX. green is the color of Libyas flag; it’s the favorite color of Emperor Hirohito andthe source of "Green Day" in Japan, and in the U.S., the Green Party.3. Religious and mythical associations: the colors associated with spiritual ormagical beliefsEX. the green man was the God of fertility in Celtic myths, a symbolism that carriesover into today’s associations of Green M&M candies with sexuality in the U.S.Also, in contemporaryWestern culture, green is associated with extraterrestrialbeings.
  17. 17. Psychological or Cultural Associations4. Linguistic associations: color terminology within individual languagesEX. South Pacific languages refer to shades of green by comparison to plants invarious stages of growth.In Scottish Gaelic the word for blue (gorm) is also the word used for the color ofgrass.5. Contemporary usage and“on fashion”: current color applications toobjects, 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 theUS since the late 1990s.
  18. 18. Color symbolisim - Influential factors1.The specific shade (variation) of a colorDark and light shades of any color has completely different meanings.EX. pink loses all of reds associations with energy and takes on new connotationsof sweetness. Dark blue is dignified and authoritative, sky blue is ethereal andsofter.2.The quantity and placement of the colorColors deliver the most powerful symbolism when used in large areas
  19. 19. Color symbolisim - Influential factors3.The shape or object the color occupiesSymbolism becomes more complex when a color is used in combination with abasic shape.4.The Color combinationColors take on new meaning when combined with other colors.EX. red and green are the colors of Christmas inWestern cultures.
  20. 20. Color & Marketing1. Research, 92.6 % said that they put most importance on visual factors whenpurchasing products. Only 5.6 % said that the physical feel via the sense of touchwas most important. Hearing and smell each drew 0.9 %. By SecretariatoftheSeoulInternationalColorExpo20042. When asked people to approximate the importance of color when buyingproducts, 84.7 % of the total respondents think that color accounts for more thanhalf 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 between62% and 90% of that assessment is based on color alone. ByInstituteforColorResearch4. Research suggests 73% of purchasing decisions are now made in-store.Consequently, catching the shoppers eye and conveying information effectivelyare critical to successful sales. ByHenleyCentre
  21. 21. Color & Brand Identity1. Color increases brand recognition by up to 80 %. UniversityofLoyola,MarylandEx. Heinz: color influences brand identity in a variety of ways. Consider thephenomenal success Heinz EZ Squirt Blastin Green ketchup has had in themarketplace. More than 10 million bottles were sold in the first seven monthsfollowing its introduction, with Heinz factories working 24 hours a day, seven daysa week to keep up with demand.The result: $23 million in sales attributable toHeinz green ketchup [the highest sales increase in the brands history]. All becauseof a simple color change.Ex. Apple Computer: Apple brought color into a marketplace where color had notbeen seen before. By introducing the colorful iMacs, Apple was the first to say, "Itdoesnt have to be beige".The iMacs put on the top a brand that had suffered $1.8billion of losses in two years.
  22. 22. Color increases memory- Psychologists have documented that "living color" does more than appeal to thesenses. It also boosts memory for scenes in the natural world.- Color helps us to process and store images more efficiently than colorless (blackand white) scenes.Color engages & increases participation- Ads in color are read up to 42% more often than the same ads in black and whiteColor attracts attention-Tests indicate that a black and white image may sustain interest for less thantwo-thirds a second, where as a colored image may hold the attention for twoseconds or more.- A product has 0,12 seconds to halt the customers attention on a shelf or display
  23. 23. 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 whencolor 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 clientsByXeroxCorporationandInternationalCommunicationsResearch- People cannot process every object within view at one time.Therefore, color canbe used as a tool to emphasize or de-emphasize areas.Ex. An insurance company used color to highlight key information on theirinvoices. As a result, they began receiving customer payments an average of 14days earlier.
  24. 24. Color & the SenseGeneral 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, weexperienced a variety of colors and forms in the landscape.This has become part ofour genetic code.- In our current state of evolution, vision is the primary source for all ourexperiences.- Current marketing research has reported that approximately80% of what weassimilate 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.
  25. 25. How the eyes sees color- Color originates in light. Sunlight, as we perceive it, is colorless. In reality, arainbow is testimony to the fact that all the colors of the spectrum are present inwhite light.- Light goes from the source (the sun) to the object (the apple), and finally to thedetector (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 thosecorresponding 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.
  26. 26. MetamerismIt is a phenomenon that occurs when a color swatch and a sample match in onelight source but not in another. Metamerism is almost inevitable with some colorsand less of a problem in others. Several factors can compound this problem,including colorant class, coloration processes, and color-matching betweenmanufacturers. Even when metamerism is expected, Colortec/Dyeables constantlymakes efforts to minimize it.Ex.You just bought a pair of running pants to go with the wind-breaker youbought a month ago at that big department store.You see the pants and knowthey are a good match with the jacket.While you are there you pick up somerunning shoes and wrist bands in the same color, what a fashion statement. Butwait, 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 somePantones defined, it will change when you use another type of material, paper, etc.
  27. 27. Fighting Metamerism when Colormatch formulatingAll colors change when viewed in different light sources.Your goal when mixing acolor is to try to use the same choice of colorants that where used when the targetcolor was dyed (aTan for instance can be made from many different combinationsof mixing colorants).When you find the right combination of colorants, the finishcolor (shoe) will change the same as the target color (dress) in different lightsources. 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 alsohelp to lessen the chances of metamerism.Different materials (cotton/polyester/rayon/wool/nylon/ect) all have differentcolor and coloration characteristics.Optical brighteners are present in most dyeable shoes and hand bags (but not all)and some dresses (but not all).
  28. 28. Fighting Metamerism when Colormatch formulatingHere are a few tips to help you assess color in the retail environment:- Always compare the sample (broachure, flyer, textil...) to the standard (the colorbook, pantone) in the same light source-the agreed-upon cool white fluorescent- Avoid spotlights, neon signs, track lighting, outdoor windows, skylights, etc. aswell as brightly colored walls, posters, or banners.- Use a white card or white paper to cover color swatches surrounding the targetswatch. 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 tooverhead lighting.- Small samples are more easily influenced by the color of the standard.The biggerthe sample, the better.- Dont look at a color for more than 5 seconds at a time when assessing.The braincompensates for color differences perceived by the eye after a few seconds.
  29. 29. Fighting Metamerism when Colormatch formulating- Do not stand in direct sunlight. Sunlight will affect your eyes ability to seebeyond the shine of the material to the color.- If a color matches under both indoor lighting and daylight, it could still havecharacteristics 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.
  30. 30. 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 beevocative 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.
  31. 31. 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; pinkmay 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 ofsynaesthesia 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".
  32. 32. Color and Food MattersSeveral years ago, the makers of "m & ms" added a new color to its candy bag:Blue. Why Blue? Although they reported that this was the result of a vote by m &ms fans it raises a few questions. It may very well be the last color left in the bagafter 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 inthe refrigerator to watch munchies disappear. And maybe dye the food blue!
  33. 33. 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, noblue meats , and aside from blueberries and a few blue-purple potatoes fromremote spots on the globe, blue just doesnt exist in any significant quantity as anatural food color.- Consequently, we dont have an automatic appetite response to blue.Our primal nature avoids food that are poisonous. A million years ago, when ourearliest ancestors were foraging for food, blue, purple and black were "colorwarning signs" of potentially lethal food.- Some food products fail in the marketplace not because of bad taste, texture, orsmell but because the consumer never got that far.
  34. 34. Who Owns Hues?- Due to the impact of colors on sales, many businesses have taken steps to protecttheir color identity.The principle that a single color may receive trademarkprotection is now the law of the land.- On the other hand, the courts recognize that colors are in limited supply and thatallowing companies to appropriate colors will soon lead to the "depletion" of all ofthe attractive colors in each product line.- Although the courts tend to view that preventing the use of a color would put acompetitor at a significant disadvantage, the color must pass the functionalitytest.
  35. 35. 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, thisis considered to be functional. EX. green is frequently used in packaging of organic,healthy and natural products because if the association with trees, grass andnature. 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 tothe eye.”EX. green and yellow are harmonious since they are closely related toeach other (analogous). Functional design effects may also include perception ofsize and weight. For example a black outboard motor appears smaller than motorsin other colors.
  36. 36. 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 textlegible; others are problematic.In conclusion, in spite of precedent setting lawsuits, the laws of color ownershipare in flux. So companies continue to take legal action and millions are spent todefend the rights to color. Could all the colors of the rainbow be confiscated in amarketing 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 lightemitted, transmitted, or reflected by objects."
  37. 37. 3rdPart
  38. 38. Computer Color Matters- These images represent a range of what any given image may look like tosomeone 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 onanother.-The image at the far left is true to the real colors, the second one from the leftrepresents a very limited color palette, the third from the left is a much lighterversion of the first one, and the last image on the right represents a very bad colordistortion.
  39. 39. Does true Color Matters?EX: If you visit a clothing store on theWeb and see a blue shirt, you are out of luckif 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 motherboardIt may or may not be able to see and recreate accurate colors.2. Graphic cards or video cards/boardsThis helps your computer to see better colors and more colors.
  40. 40. 3.Your monitorCheap monitors deliver terrible color.The colors generated on your monitor arealso affected by anti-glare screens and devices that lower the radiant emissions.If you have a good video card, good operating system software, and goodapplication software, a bad monitor can still create inaccurate colors. And even ifyou have a fantastic monitor, the other components can still create bad colors. Soyoure 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 toyour computer.
  41. 41. 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, andUnix.They also contains color information and this information is based on RGB, onhow much (R) red (G) green and (B) blue is in the image.
  42. 42. RGB ColorTheory- Computers create colors based on a special set of 3 primary colors: red, green, andblue.- So does your television. If you go up close to yourTV, (put your eye right on top ofthe screen) you will see little dots of red green and blue.- In computers and television, light transmissions are creating the color. Red andgreen mix to create yellow.-This is called "Additive Color" and is completely different from how colors aremixed in paints and pigments.EX.When we mix red and green paint, we get muddy browns.This is "SubtractiveColor" and is based on the primaries, red, yellow, and blue (or red-based/magenta,yellow-based/yellow, blue-based/cyan).
  43. 43. Is your computer color blind?There are four tests to see how your computer color vision rates.1. Heres a test for a pure white pixelHold a piece of pure white paper perpendicular to your monitor screen. Do notplace it flush against the screen. Hold it on an angle.The background color for thisWeb page is pure white. If you are seeing a very pale greyish or bluish color, yourcomputer does not view colors accurately. If you do not have a pure white, everycolor is affected.You have the "Sunglass Syndrome".Consider this: Even if you have perfect color vision, if youre wearing sunglasses,you will still see thousands of colors, but those colors are not the actual color.Theyare being filtered through the dark lens. Unfortunately many computer systemshave a similar color blindness. In many cases, the monitor is the primary cause ofthis effect.
  44. 44. Is your computer color blind?2. Heres a test for gamma-The image below allows you to directly estimate the gamma of your displaysystem.- Stand about 1,5 - 2m. away and decide which column of the image comes closestto having equal brightness in the top and bottom halves.-The number under this column is the gamma of your display system.
  45. 45. Is your computer color blind?- Most PCs have a gamma of roughly 2.5 and many do not provide sufficientgamma correction. Graphics cards typically perform some gamma correction.- Macintosh computers, Silicon Graphics workstations and machines have correctedgamma 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 fromseveral components that are working all at once.- Different computers do different things and many "systems" have differentconfigurations of the critical elements.
  46. 46. Is your computer color blind?3. Heres a test for a good range of lightness and darkness of colorsDo some of the squares look the same? If so, which ones? Does each square lookdifferent?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.
  47. 47. Is your computer color blind?This is the same image but with the added information of the % of black used ineach 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 acolor 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 highcontrasts between light and dark colors on all signals so that the visually disabledcan see this information. All computers can deliver high contrasts between lightand darks.
  48. 48. Is your computer color blind?4. Heres a color test.These squares are based on the 216 web-safe color palette (which includes all thecolors that are common to all computers and browsers).- If any of the first three squares looks almost black, you need to correct yourgamma.-With corrected gamma, the first color is a deep rich green, the second color is aburgundy, and the third color is a medium dark blue.The last square on the right isa pastel blue-green. If this last square looks very very pale, almost white, yourgamma also needs correction.
  49. 49. Is your computer color blind?- A black strip at the base of the colors so that you can compare each of them topure 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 differentcomputer systems have different gamma ratings and gamma affects the coloringredients.- 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 theWeb. Next ,if your browser could carry that information, that could be the secondpart of the solution.Therefore, a graphics format that can store gammainformation would be an essential part of the solution.- It does exist... and its the PNG format.
  50. 50. 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 inputand output.3. Gamma describes a critical relationship between electricity and what happenson your monitor.4. It is a mathematical formula which describes the relationship between thevoltage input and the brightness of the image on your monitor screen.
  51. 51. The Power of Gamma5. Gamma can also be described as the measurement of contrast that affects themidtones 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 outputCorrecting 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 differentgamma measurements.An effective gamma rating will deliver true colors and a good range of light, middle, anddark tones.
  52. 52. More....- Colors viewed at an uncorrected gamma will appear different from those viewed at acorrected gamma.-The left side, viewed with corrected gamma should look like a bright sunny day at thebeach.- Gamma also affects the range of greys and tones of any given color.
  53. 53. THEWEB-SAFE COLOR PALETTE-This is the web-safe 216 color paletteThese are web-safe greens from the 216 color palette.
  54. 54. THEWEB-SAFE COLOR PALETTEIf you use a green that is not one of the web-safe colors, the green will consist of aseries 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 oncomputers that have 8-bit color.- On the other hand, many say that the web-safe palette is a thing of the past. It´sup to you.- Currently, the colors and the brightness of all images look different on differentcomputer systems.To achieve accurate colors, PNG format can store gamma and chromaticity data forimproved color matching and is designed to work on all computer systems andWeb browsers.
  55. 55. Via: