Introduction to Color
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Color

on

  • 262 views

Including

Including
~ Visible Light
~ Paint C

Statistics

Views

Total Views
262
Views on SlideShare
262
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Color Presentation Transcript

  • 1. introduction to COLOR THEORY
  • 2. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  • 3. Did you know... COLOR is LIGht? either... 1. 2. viewed directly from a light source or reflected from objects we see
  • 4. The Electromagnetic spectrum
  • 5. Before we start, let’s talk about pink http://tinyurl.com/theresnopink ...or is there??
  • 6. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  • 7. The Traditional Color Wheel
  • 8. The Traditional Color Wheel
  • 9. Primary Colors foundational spokes red blue yellow
  • 10. Secondary Colors blends of the primary colors halfway between the primary colors orange purple green
  • 11. Tertiary Colors primary colors mixed with secondary colors red-purple bluepurple blue-green red-orange yelloworange yellow-green
  • 12. Complementary Colors are directly across from each other on the color wheel red purple orange blue yellow green
  • 13. Complementary Colors are directly across from each other on the color wheel red-purple bluepurple blue-green red-orange yelloworange yellow-green
  • 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. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  • 16. Why “RGB“? THESE are the Primary Colors. red green blue
  • 17. Secondary Colors blends of the primary colors halfway between the primary colors yellow magenta cyan
  • 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. Additive Color System ~ created by mixing light ~ for computer monitors, phones, televisions, lighting, and more stage
  • 20. Remember Pixels?
  • 21. ➦ This is what’s going on in each one.
  • 22. LCD Liquid Crystal display
  • 23. Cathode ray tube CRT vs LCD Liquid Crystal display
  • 24. ➦ ➦ What color would this be? What color would this be?
  • 25. 80x Text magnification Check Out http://tinyurl.com/ppilist For a giant pixel density chart.
  • 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. How does this work? What about blue?
  • 28. How does this work? What about green?
  • 29. How does this work? What about black?
  • 30. How does this work? What about white?
  • 31. How does this work? What about everything else?
  • 32. How does this work? How many possible colors could we create?
  • 33. 256 x 256 x 256 = 16,777,216
  • 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. ➦ Please tell me more! What is this thing?
  • 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. 16 x 16 x 16 x 16 x 16 x 16 = 16,777,216
  • 38. How does this work? What about blue?
  • 39. How does this work? What about green?
  • 40. How does this work? What about black?
  • 41. How does this work? What about white?
  • 42. How does this work? What about everything else?
  • 43. How does this work? Easy, Right!?
  • 44. Common colors Color Hexidecimal Notation - (#RRGGBB) (#000000) (#ffffff) (#ff0000) (#00ff00) (#0000ff) (#ffff00) (#00ffff) (#ff00ff)
  • 45. Just one more thing... What is H:, S:, B:?
  • 46. A cone diagram is helpful
  • 47. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  • 48. H = Hue ~ Hue means COLOR. ~ Measured in Degrees 300° 359° 245° 46° 167° 67° 190°
  • 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. 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. HSB Palette Activity: Create three palettes. 1) Choose 5 Hues. 2) Name them (all three ways).
  • 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. 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. Including... visible light paint colors RGB HSB CMYK Grayscale Spot Color
  • 55. Secondary Colors blends of the primary colors halfway between the primary colors yellow magenta cyan
  • 56. CMYK This is also called PROCESS COLOR why? because it applies CYAN Magenta Blue black INK in color printing.
  • 57. subtractive Color System ~ ink reduces light that would be reflected ~ ink “subtracts” brightness from the white page
  • 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. 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