About Color


Published on

About color PPT is giving a introducton on colour, from how we see, waht all guidelines we need to take care while we are designing, how it affects us, what all cultural values it got.

Published in: Design, Technology, Business
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

About Color

  1. 1. About Colour A brief details on colours, Colour models, characteristic of colour usage of colour in design, etc. Prepared by Naushad T
  2. 2. Content What is Colors? How do We See Colors? Basic Colors Color Models Color Characteristics Color Combinations Color Depth Web & Color Color and Emotions What is Color Good For? Common Mistakes in Color Usage Color Blindness References
  3. 3. What is Colors?  How humans perceive color depends on the interplay of three elements: the nature of light, the reflective properties of an object, and the ways in which our retina and visual cortex process light waves  Pure white light, such as sunlight, is composed of the visible colors. Sir Isaac Newton discovered this in 1666 by passing a beam of light through a prism.
  4. 4. What is colors?  Newton observed that color is not inherent in objects. Rather, the surface of an object reflects some colors and absorbs all the others. We perceive only the reflected colors. When light waves strike an object in nature, the object can transmit, absorb, or reflect various individual light waves. Depending on the nature of the object and its atomic structure.
  5. 5. How do We See Colors?  The human eye and brain together translate light into color. Light receptors within the eye transmit messages to the brain, which produces the familiar of color.  Retina is covered by millions of light-sensitive cells, some shaped like rods and some like cones.
  6. 6. How do we see colors?  Cones are concentrated in the middle of the retina, Six million cones in each eye give the brain enough information to interpret colors.  Three types of cone, each sensitive to a different wavelength-this allows color vision  The actual wavelength that the cone are most sensitive to are 560nm, 530nm, 430nm, commonly labelled "red" "green" "blue" respectively (better labeling would be “short”, “medium”, and “long” wavelengths).  Rods transmit mostly black and white information to the brain There are over 120 million of them in each eye.  Rods are very sensitive to light, and allow us to see under very low level of illumination.  They give us our night vision, in the shades of white, gray and black.  Human eye can distinguish over 10millon different colors.
  7. 7. How do We See Colors? FACTS  Birds, fish and many other mammals perceive the full spectrum.  Bees, can see ultraviolet colors which is invisible to the human eye.  It was thought that dogs didn't see any color at all. Recent studies now show, however, that dogs can differentiate between red and blue  Infants are able to distinguish hues after several weeks.
  8. 8. Basic Colors  Primary (Red, Green, Blue) colors, colors at their basic essence; those colors that cannot be created by mixing others. Primary colors theoretically cannot be mixed from any other colors. Primary colors
  9. 9. Basic Colors  Secondary colors combining any two adjacent primary colors. These will be our secondary colors Secondary colors
  10. 10. Basic Colors  Tertiary Colors are middle colors between the primary and secondary colors in color wheel. Tertiary colors
  11. 11. Color Models  RGB and its subset CMY form the most basic and well-known color model.  Red, green and blue are the additive primary colors of the color spectrum. Combining balanced amounts of red, green and blue lights also produces pure white. Additive primary colors
  12. 12. Color Models  By mixing together various amounts of red, green and blue light, you can make almost any color.  The most common examples of this are television screens and computer monitors.
  13. 13. Color Models  Cyan, magenta and yellow are the three subtractive primaries. When you mix all three together in equal amounts, you get a near black Subtractive colors
  14. 14. Color Models.  Many computer printers and traditional "four-color" printing presses use the CMYK model.
  15. 15. Color Models  HSB/HLS, Lab, Index color, Grayscale are some of other color modes.  HSB: Based on the human perception of color, the HSB model describes three fundamental characteristics of color: Hue, Saturation, Brightness.  LAB: Lightness component (L) can range from 0 to 100. The “a” component (green-red axis) and the “b” component (blue-yellow axis) can range from +120 to –120
  16. 16. Color Models  Grayscale: Uses up to 256 shades of gray. Every pixel of a grayscale image has a brightness value ranging from 0 (black) to 255 (white). Grayscale also called “Achromatic Colors”. Grayscale  Index color: Uses at most 256 colors. a color lookup table (CLUT), which stores and indexes the colors in the image. Index color palette
  17. 17. Color Characteristics  Color consists of three properties: hue (red, green, etc), brightness/value (light-dark) and saturation/chroma (vivid, pale, etc.)  Saturation indicates the degree to which the hue differs from a neutral gray.
  18. 18. Color Characteristics  Lightness indicates the level of illumination. (Brightness) The values run as percentages; 0% appears black (no light) while 100% is full illumination.(white).  Shade and tint are terms that refer to a variation of a hue.  Shade: A hue produced by the addition of black.  Tint: A hue produced by the addition of white.
  19. 19. Color Characteristics  Gamut is the range of colors that a color system can display or print. A. Lab color gamut. B. RGB color gamut C. CYMK color gamut  Human eye is wider than the gamut available in any color model.
  20. 20. Color Combinations  Complementary: those colors across from each other on a color wheel. A complementary palette gives maximum contrast. Complementary colors
  21. 21. Color Combinations  Split-Complementary: one hue and two equally spaced from its complement. Split-Complementary colors
  22. 22. Color Combinations  Triadic colors: Colors that form an equilateral triangle within the color wheel. Triadic colors
  23. 23. Color Combinations  Analogous colors are any colors directly beside a given color on the color wheel. Analogous colors
  24. 24. Color Combinations  Warm colors are made up of the red hues, such as red, orange, yellow. Warm colors
  25. 25. Color Combinations  Cool colors came from blue hues, such as blue, cyan, and green  Monochromatic (one color): Using tints, tones and shades of a single hue.
  26. 26. Color Combinations  Placing small areas of light color on a dark background, or a small area of dark on a light background will create an accent (stress).  Color can add dimension to a design. Dimension can create when two are more colors create contrast. Thereby forcing one color foreground and another to appear in the middle and another to pushed back in space.
  27. 27. Color Combinations  Hue induction (chromatic induction, color induction) refers to the change of hue when colors are perceived in the context of other colors. Depending of the color of the surrounding square the central neutral (gray) square gets a slight tint in the direction of the complementary color.
  28. 28. Color Combinations  Colors look lighter or darker with respect to the background color. The change in appearance of a central area is caused by the presence of a neighboring area.  Color assimilation: The yellow under the red stripes appears warmer than the same yellow under the blue stripes due to color assimilation.
  29. 29. Color Combinations  Simultaneous contrast(Black and white) lets the central gray square look differently, depending on the surrounding gray level, although all the central squares are composed of the same gray.  The gray under the white stripes appears lighter than the same gray under the black stripes due to brightness assimilation.
  30. 30. Color Depth  Color depth(Bit depth), determines the number of colors used to display (or print) an image. (the number of bits of color information per pixel).  Bit has two possible states: it can be on or off. One bit produces two possible colors.  A basic color monitor has 8-bit pixels and is capable of displaying 256 colors.  RGB, grayscale, and CMYK images contain 8 bits of data per color channel. With three channels in an RGB image, this translates to a 24-bit RGB bit depth (8 bits x 3 channels)
  31. 31. Color Depth  Here's a breakdown of bit depth and color depth. Color depth is sometimes called color resolution Bit Depth Color Resolution Calculation 1 bit 2 colors 21 (2) 2 bit 4 colors 22 (2x2) 3 bit 8 colors 23 (2x2X2) 4 bit 16 colors 24 (2X2X2X2) 5 bit 32 colors 25 (2X2X2X2X2) 6 bit 64 colors 26 (2X2X2X2X2X2) 7 bit 128 colors 27 (2X2X2X2X2X2X2) 8 bit 256 colors 28 (2X2X2X2X2X2X2X2) 16 bit 65,536 colors 216 32 bit 16,777,21 colors 232
  32. 32. Web and Colors  In General GIF(graphics Interchange Format) and JEPG(Joint Photographic Expert Group) file format are using for web graphics.  The JPEG format supports 24-bit color(16.7 million colors).  The JPEG compression scheme is “Lossy” compression scheme, because of Some loss of image quality.  JPEG is ideal for images that are photographic, organic in nature, and continuous in tone.  Any JPEG file can be saved as a Progressive JPEG. This is very similar to the interlaced GIF.  The JPEG format should be used on photographic images, and images which do not look as good with only 256 colors.
  33. 33. Web and Colors  GIF files support only 8-bit, or 256 colors.  GIF files support exact (Adaptive)palette.If your image contain fewer than 256 colors, it is the best choice for producing GIFs and it containg smallest number of colors possible.  GIF files use LZW compression which is referred to as “lossless”  GIF files support transparency, and interlacing. GIFs can also be animated.  Transparency allows a graphic designer to designate the background of the image transparent.  The interlacing feature in a GIF file creates the illusion of faster loading graphics
  34. 34. Web and Colors  Dithering a process(in GIF) of placing different-colored pixels next to one another to create the illusion of additional colors. Original image 100% Dither image 50% Dither image
  35. 35. Web and colors  Anti-Aliasing a process that filters or softens the hard stair-stepped edge (and thus removes the jaggies) in bitmapped images by creating a series of gradually blending pixels. Anti-Aliased text Aliased text Anti-Aliased Aliased
  36. 36. Color and Emotions  Color can also be used to convey specific meaning such as warning (red), caution (yellow), safety (green), etc.  Here's a quick rundown of individual colors and the moods they support. PINK-soothes, promotes affection. YELLOW cheers, increases energy, expands the size of a room. ORANGE-cheers, stimulates appetite and conversation. RED-empowering GREEN-balances, refreshes. BLACK-authoritative, shows discipline, encourages independence.
  37. 37. Color and Emotions  Colors have different associations in different cultures. Western Europe China Japan Middle East & USA Danger, Anger, Joy, Festive Danger, Anger Danger, Evil Stop Occasions Sexual Arousal, Youth, Growth Future, Youth, Fertility, Safe, Sour, Go Energy Strength Caution, Honor, Royalty Grace, Nobility, Happiness, Cowardice Childish, Gaiety Prosperity Purity, Virtue Mourning, Mourning, Purity, Humility Death Mourning Masculinity, Strength, Power Villainy Calm, Authority Death, Evil Evil Evil Mystery, Evil
  38. 38. What is Color Good For?  Conveying emotion and meaning.  Changing perception of space  Changing apparent size  Showing similarities and differences  Linking spatially separated objects together  Attracting attention  Creating emphasis  Smoothing to improve image quality  Creating aesthetic and emotional appeal
  39. 39. Common Mistakes in Color Usage  Using insufficient brightness contrast.  Paying attention only to aesthetics  Using color for colors sake without a specific plan or color scheme.  Assigning different colors to the same type or the same color to different types.  Creating large fields of saturated color.  Using too many colors.
  40. 40. Color Blindness  People with normal color vision are called "trichromats". The trichromatic eye has three cone types.  Color blindness comes as a result of a lack of one or more of the types of color receptors, more correctly called color deficiencies.  About 10% of males have a color perception defect. but this is rare in females (1% in 200).  There are many different types and degrees of colorblindness. FACTS  Many color blind people cannot tell whether a woman is wearing lipstick or not.  Many can not tell the difference between green and ripe tomatoes or between ketchup and chocolate syrup
  41. 41. Color Blindness  Deuteranope (a form of red/green color deficit) Normal Deuteranope Vision
  42. 42. Color Blindness  Protanope (another form of red/green color deficit) Normal Protanope Vision
  43. 43. Color Blindness  Tritanope (a blue/yellow deficit- very rare) Normal Tritanope Vision
  44. 44. Guidelines  DON'T give instructions which refer to objects by Color.  DO provide labels next to any Colored indicators.  DON'T use [red | green | brown | grey | purple] [next to | on top of / changing to] [red | green | brown | grey | purple].  DO provide Alternatively text for all your images
  45. 45. Color Schemes  Planning a successful color combination begins with the investigation, and understanding, of color relationships. Using a color wheel and a template, the relationships between colors are easy to identify  The basic tool for combining colors, is the color wheel. It is designed so that virtually any colors you pick from it, will look good together.
  46. 46. References  http://www.colormatters.com/entercolormatters.html  http://veerle.duoh.com/blog/comments/choosing_color_combinations/  http://www.ficml.org/jemimap/style/color/wheel.html  http://meyerweb.com/eric/tools/color-blend/  http://www.colortoy.net/  http://www.vischeck.com/vischeck/vischeckImage.php  http://www.apple.com/pro/color/  http://juicystudio.com/services/luminositycontrastratio.php  http://www.worqx.com/color/index.htm  http://www.webexhibits.org/causesofcolor/index.html