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

Introduction to Color

on

  • 362 views

 

Statistics

Views

Total Views
362
Views on SlideShare
362
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 Introduction to Color Presentation Transcript

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