Understanding Color#1
-
Upload
beth-sockman -
Category
Documents
-
view
110 -
download
2
description
Transcript of Understanding Color#1
![Page 1: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/1.jpg)
Understanding Color
Just a beginning!
By Beth Rajan Sockman
![Page 2: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/2.jpg)
Additive & Subtractive
• Two colors most often used:– RGB = Additive Color• Add light get a LIGHTER image
– CYMK = Subtractive Color• More pigment added, the DARKER the image
![Page 3: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/3.jpg)
Color Spaces
Click on image to link to movie about color space
![Page 4: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/4.jpg)
Working with 3 Color Spaces
• RGB – Red, Green, Blue– Monitor– Light based devices (NOT SUNLIGHT!)
• CMY(K) – Cyan, Magenta, Yellow & Black– Print – Combine Pigments
• Pantone
![Page 5: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/5.jpg)
RGB• Used on computer monitors,
digital cameras, televisions, mobile devices & other light-based devices
• Most PC allow 256 colors– 216 colors match on Mac® &
Windows® web-safe colors
100% Red + 100% Green + 100% Blue = White
![Page 6: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/6.jpg)
RGB - Hexadecimal
• Remember this website: http://html-color-codes.com/
• 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
![Page 7: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/7.jpg)
RGB - Hexadecimal
• Decimal System:– 0 to 9 as in: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• Hexadecimal Number System uses 16 different digits before digits are combined: – 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
![Page 8: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/8.jpg)
RGB - Hexadecimal
• Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems:
Decimal : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
Hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12
![Page 9: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/9.jpg)
RGB - Hexadecimal
• Intensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). – 0 is OFF meaning it contains no amount of the
color – 255 is FULL ON meaning full intensity of the color. – 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).
![Page 10: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/10.jpg)
RGB
• What is the Hex Code for White?
• What is the Hex Code for Black?
FF, FF, FF
OO, OO, OO
![Page 11: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/11.jpg)
CMYK
• CMYK color system is used for printed illustrations. It uses pigments as opposed to light.
• NOTICE the relationship between RGB & CMYK
R
B G
![Page 12: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/12.jpg)
Pantone
• Propriety colors• Pigments were
developed in 1950’s• Include metallic and
various hues• SPOT COLOR– NO Mixing What you
select is what you get!
![Page 13: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/13.jpg)
Hue & Saturation
Hue• Each individual color on
the color wheel
Saturation• Intensity of color from gray
tone to the pure color.
![Page 14: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/14.jpg)
Theory
• Accessibility – – 8% of web audience will have color discrimination
challenges– Make colors contrast!
http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast
• Color Psychology – Colors evoke emotions
POWER ImpulsiveImpatienceSexual
JoyIntelligenceOrganizationHard to see!
TranquilityPatienceUnderstandingCooperation
HopeGrowthGood HealthFreshness
![Page 15: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/15.jpg)
Review
• What model of color is used for light based devices?
• What do the hexadecimal numbers designate?
• (T/F) CMYK is in the same color space as RGB.
• (T/F) Pantone is a type of CMYK color.
• Is RED a Hue or Saturation?
RGB
Amount of RGB
FALSE
FALSE
HUE
![Page 16: Understanding Color#1](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c83e0c4a7959925f8b45a5/html5/thumbnails/16.jpg)
References
• http://www.designworksoregon.com/pages/web_design_colors.html
• http://www.web-colors-explained.com/intro_web_colors.php
• http://evolt.org/Understanding_Color_and_Accessibility
• http://www.htmltutorials.ca/lesson9c.htm• http://www.lighthouse.org/accessibility/design/
accessible-print-design/effective-color-contrast• http://iit.bloomu.edu/vthc/design/hue.htm• http://www.youtube.com/watch?v=x0-
qoXOCOow&feature=player_embedded