Introduction to Color

275 views
170 views

Published on

Including
~ Visible Light
~ Paint C

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
275
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Color

  1. 1. introduction to COLOR THEORY
  2. 2. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  3. 3. Did you know... COLOR is LIGht? either... 1. 2. viewed directly from a light source or reflected from objects we see
  4. 4. The Electromagnetic spectrum
  5. 5. Before we start, let’s talk about pink http://tinyurl.com/theresnopink ...or is there??
  6. 6. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  7. 7. The Traditional Color Wheel
  8. 8. The Traditional Color Wheel
  9. 9. Primary Colors foundational spokes red blue yellow
  10. 10. Secondary Colors blends of the primary colors halfway between the primary colors orange purple green
  11. 11. Tertiary Colors primary colors mixed with secondary colors red-purple bluepurple blue-green red-orange yelloworange yellow-green
  12. 12. Complementary Colors are directly across from each other on the color wheel red purple orange blue yellow green
  13. 13. Complementary Colors are directly across from each other on the color wheel red-purple bluepurple blue-green red-orange yelloworange yellow-green
  14. 14. Do you notice the differences between these two color wheels? This is a “Traditional” Color Wheel. It’s used in painting. This is an “RGB” Color Wheel. It’s used by electronics to create color.
  15. 15. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  16. 16. Why “RGB“? THESE are the Primary Colors. red green blue
  17. 17. Secondary Colors blends of the primary colors halfway between the primary colors yellow magenta cyan
  18. 18. RGB Color WHeel This is also called the additive Color Wheel. why? because when a screen adds REd Green Blue light together, it makes WHITE.
  19. 19. Additive Color System ~ created by mixing light ~ for computer monitors, phones, televisions, lighting, and more stage
  20. 20. Remember Pixels?
  21. 21. ➦ This is what’s going on in each one.
  22. 22. LCD Liquid Crystal display
  23. 23. Cathode ray tube CRT vs LCD Liquid Crystal display
  24. 24. ➦ ➦ What color would this be? What color would this be?
  25. 25. 80x Text magnification Check Out http://tinyurl.com/ppilist For a giant pixel density chart.
  26. 26. Did you know... “Most mammals see only blue and green. Sparrows see red, green, blue, and ultraviolet — and thus would be unimpressed with your new HDTV, no matter how big.” wanderingstan.com
  27. 27. How does this work? What about blue?
  28. 28. How does this work? What about green?
  29. 29. How does this work? What about black?
  30. 30. How does this work? What about white?
  31. 31. How does this work? What about everything else?
  32. 32. How does this work? How many possible colors could we create?
  33. 33. 256 x 256 x 256 = 16,777,216
  34. 34. Common colors Color Decimal Notation - (R,G,B) (0, 0, 0) (255, 255, 255) (255, 0, 0) (0, 255, 0) (0, 0, 255) (255, 255, 0) (0, 255, 255) (255, 0, 255)
  35. 35. ➦ Please tell me more! What is this thing?
  36. 36. hexidecimal (HEX) code Used in web design. (HTML + CSS) #RRGGBB # 16 16 16 16 16 16 Each digit could have one of 16 values: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E,F It makes sense... ➙
  37. 37. 16 x 16 x 16 x 16 x 16 x 16 = 16,777,216
  38. 38. How does this work? What about blue?
  39. 39. How does this work? What about green?
  40. 40. How does this work? What about black?
  41. 41. How does this work? What about white?
  42. 42. How does this work? What about everything else?
  43. 43. How does this work? Easy, Right!?
  44. 44. Common colors Color Hexidecimal Notation - (#RRGGBB) (#000000) (#ffffff) (#ff0000) (#00ff00) (#0000ff) (#ffff00) (#00ffff) (#ff00ff)
  45. 45. Just one more thing... What is H:, S:, B:?
  46. 46. A cone diagram is helpful
  47. 47. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  48. 48. H = Hue ~ Hue means COLOR. ~ Measured in Degrees 300° 359° 245° 46° 167° 67° 190°
  49. 49. s = saturation ~ How “pure” the color is. ~ Measured in percent (from the center of the cone) 100% 100% 100% 100% 100% 100% 100% 40% 40% 40% 40% 40% 40% 40% 20% 20% 20% 20% 20% 20% 20%
  50. 50. B = brightness ~ How “bright” the color is. ~ Measured in percent (from the bottom of the cone) 100% 100% 100% 100% 100% 100% 100% 40% 40% 40% 40% 40% 40% 40% 20% 20% 20% 20% 20% 20% 20%
  51. 51. HSB Palette Activity: Create three palettes. 1) Choose 5 Hues. 2) Name them (all three ways).
  52. 52. Color Project: Create three palettes. 1) Choose 1 Hue. 2) Create a gradient palette for this hue. The palette should include at least five colors/ shades. 3) The saturation should range from 10-100%. 4) Identify the colors (all three ways).
  53. 53. Color Project: Create three palettes. 1) Choose 1 Hue. 2) Create a gradient palette for this hue. The palette should include at least five colors/ shades. 3) The brightness should range from 10-100%. 4) Identify the colors (all three ways).
  54. 54. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  55. 55. Secondary Colors blends of the primary colors halfway between the primary colors yellow magenta cyan
  56. 56. CMYK This is also called PROCESS COLOR why? because it applies CYAN Magenta Blue black INK in color printing.
  57. 57. subtractive Color System ~ ink reduces light that would be reflected ~ ink “subtracts” brightness from the white page
  58. 58. http://www.mathsisfun.com/hexadecimal-decimal-colors.html http://courseweb.stthomas.edu/mjodonnell/cojo258/chapter07/section7-1.html http://www.rapidtables.com/web/color/RGB_Color.htm http://earthsky.org/space/what-is-the-electromagnetic-spectrum http://www.tomjewett.com/colors/index.html
  59. 59. Traditional Color Wheel - http://nhsdesigns.com/graphic/color/color-wheel.php RGB Color Wheel: http://www.psdgraphics.com/backgrounds/color-spectrum/ Additive Color Diagram: http://en.wikipedia.org/wiki/File:AdditiveColor.svg Pixel Diagram = http://courseweb.stthomas.edu/mjodonnell/cojo258/chapter07/section7-1.html Computer Images Zoomed In http://www.stealthcopter.com/blog/2010/03/digimicro-200xzooming-usb-digital-microscope-in-ubuntu-linux/ Sparrow Fact: http://wanderingstan.com/2012-05-28/the-pixel-is-dead-long-live-the-pixel Wikipedia LCD - http://commons.wikimedia.org/wiki/ File:Liquid_Crystal_Display_Macro_Example_zoom.jpg Device Comparison:http://www.extremetech.com/computing/122725-what-the-ipad-3s-retinadisplay-looks-like-under-a-microscope LCS vs CRT http://en.wikipedia.org/wiki/Subpixel_rendering HSB Cone Diagram - http://www.actfuronair.com/?attachment_id=1553 Printer Ink - http://www.misco.co.uk/Product/200575/HP-920XL-CMYK-Ink-Combo-PackC2N92AE

×