Understanding Color#1

1,710 views

Published on

First Introduction

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,710
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://www.htmltutorials.ca/lesson9c.htm
  • http://www.htmltutorials.ca/lesson9c.htm
  • http://www.htmltutorials.ca/lesson9c.htm
  • http://dr-photoshop.com/zfile/tutorials/swatches/PANTONE-Process-By-EURO.jpg & http://en.wikipedia.org/wiki/Pantone
  • http://www.manifold.net/doc/colors_as_hue_saturation_and_brightness.htm
  • Tell Students that they can find out much more.
  • Understanding Color#1

    1. 1. Understanding ColorJust a beginning! <br />By Beth Rajan Sockman<br />
    2. 2. Additive & Subtractive<br />Two colors most often used:<br />RGB = Additive Color<br />Add light get a LIGHTER image <br />CYMK = Subtractive Color<br />More pigment added, the DARKER the image<br />
    3. 3. Color Spaces<br />Click on image to link to movie about color space<br />
    4. 4. Working with 3 Color Spaces<br />RGB – Red, Green, Blue<br />Monitor<br />Light based devices (NOT SUNLIGHT!)<br />CMY(K) – Cyan, Magenta, Yellow & Black<br />Print <br />Combine Pigments<br />Pantone<br />
    5. 5. RGB<br />Used on computer monitors, digital cameras, televisions, mobile devices & other light-based devices<br />Most PC allow 256 colors<br />216 colors match on Mac® & Windows®  web-safe colors<br />100% Red + 100% Green + 100% Blue = White<br />
    6. 6. RGB - Hexadecimal<br />Remember this website: http://html-color-codes.com/<br />Color codes are not in our number system which is the Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or base 16<br />
    7. 7. RGB - Hexadecimal<br />Decimal System:<br />0 to 9 as in: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 <br />Hexadecimal Number System uses 16 different digits before digits are combined: <br />0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F <br />
    8. 8. RGB - Hexadecimal<br />Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems: <br />Decimal : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 <br />Hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,  A,  B,  C,  D,  E,  F, 10, 11, 12 <br />
    9. 9. RGB - Hexadecimal<br />Intensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). <br />0 is OFF meaning it contains no amount of the color <br />255 is FULL ON meaning full intensity of the color. <br />Since the code for each of the three colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF = Dec 255). <br />
    10. 10. RGB<br />What is the Hex Code for White?<br />What is the Hex Code for Black? <br />FF, FF, FF<br />OO, OO, OO<br />
    11. 11. CMYK<br />CMYK color system is used for printed illustrations. It uses pigments as opposed to light.<br />NOTICE the relationship between RGB & CMYK<br />B<br />G<br />R<br />
    12. 12. Pantone<br />Propriety colors<br />Pigments were developed in 1950’s<br />Include metallic and various hues<br />SPOT COLOR<br />NO Mixing<br />What you select is what you get! <br />
    13. 13. Hue & Saturation<br />Hue<br />Each individual color on the color wheel<br />Saturation<br />Intensity of color from gray tone to the pure color. <br />
    14. 14. Theory<br />Accessibility – <br />8% of web audience will have color discrimination challenges<br />Make colors contrast! http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast<br />Color Psychology – Colors evoke emotions<br />POWER Impulsive<br />Impatience<br />Sexual <br />Joy<br />Intelligence<br />Organization<br />Hard to see! <br />Tranquility<br />Patience<br />Understanding<br />Cooperation<br />Hope<br />Growth<br />Good Health<br />Freshness<br />
    15. 15. Review<br />What model of color is used for light based devices? <br />What do the hexadecimal numbers designate?<br />(T/F) CMYK is in the same color space as RGB.<br />(T/F) Pantone is a type of CMYK color.<br />Is RED a Hue or Saturation? <br />RGB<br />Amount of RGB <br />FALSE<br />FALSE<br />HUE<br />
    16. 16. References<br />http://www.designworksoregon.com/pages/web_design_colors.html<br />http://www.web-colors-explained.com/intro_web_colors.php<br />http://evolt.org/Understanding_Color_and_Accessibility<br />http://www.htmltutorials.ca/lesson9c.htm<br />http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast<br />http://iit.bloomu.edu/vthc/design/hue.htm<br />http://www.youtube.com/watch?v=x0-qoXOCOow&feature=player_embedded<br />

    ×