introduction to color
DESCRIPTION
TRANSCRIPT
introduction to
COLORTHEORY
visible lightpaint colors
RGBHSB
CMYKGrayscaleSpot Color
Including...
Did you know...
COLOR isLIGht?either...
1.viewed directly from a light source
or
2.reflected from objects we see
The Electromagnetic spectrum
Before we start, let’s talk about
pinkhttp://tinyurl.com/theresnopink
...or is there??
visible lightpaint colors
RGBHSB
CMYKGrayscaleSpot Color
Including...
The Traditional Color Wheel
The Traditional Color Wheel
Primary Colors
yellowblue
foundational spokes red
Secondary Colors
green
orangepurple
blends of the primary colorshalfway between the primary colors
Tertiary Colors
red-orange
yellow-orange
yellow-greenblue-green
blue-purple
red-purple
primary colors mixed with secondary colors
Complementary Colorsred
yellowblue
are directly across from each other on the color wheel
green
orangepurple
red-orange
yellow-orange
yellow-greenblue-green
blue-purple
red-purple
Complementary Colorsare directly across from each other on the color wheel
This is a “Traditional” Color Wheel.
Do you notice the differences between these two color wheels?
This is an “RGB” Color Wheel.
It’s used in painting. It’s used by electronics to create color.
visible lightpaint colors
RGBHSB
CMYKGrayscaleSpot Color
Including...
red
green blue
Why RGB ?THESE are the Primary Colors.
“ “
yellow
cyan
magenta
Secondary Colorsblends of the primary colors
halfway between the primary colors
RGB Color WHeelThis is also called the additive Color Wheel.
why?because when a screen adds
REdGreenBlue
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’sgoing on
in each one.➦
LCDLiquidCrystaldisplay
CRTvs
LCDLiquidCrystaldisplay
Cathoderaytube
What color would this be?➦
What color would this be?➦
80xmagnification
Check Outhttp://tinyurl.com/ppilistFor a giant pixel density
chart.
Text
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 256 256x x
=
16,777,216
Common colorsColor 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) codeUsed in web design.
(HTML + CSS)
##RRGGBB16 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!?
Color Hexidecimal Notation - (#RRGGBB)
(#000000)
(#ffffff)
(#ff0000)
(#00ff00)
(#0000ff)
(#ffff00)
(#00ffff)
(#ff00ff)
Common colors
Just one more thing...
What is H:, S:, B:?
A cone diagram is helpful
visible lightpaint colors
RGBHSB
CMYKGrayscaleSpot Color
Including...
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%
20%
40%
20%
40%
20%
40%
20%
40%
20%
40%
20%
40%
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%
20%
40%
20%
40%
20%
40%
20%
40%
20%
40%
20%
40%
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).
visible lightpaint colors
RGBHSB
CMYKGrayscaleSpot Color
Including...
yellow
cyan
magenta
Secondary Colorsblends of the primary colors
halfway between the primary colors
CMYKThis is also called PROCESS COLOR
why?because it applies
CYANMagentaBlueblackINK in color printing.
subtractive Color System
~ ink reduces light that would be reflected
~ ink “subtracts” brightnessfrom the white page
http://www.mathsisfun.com/hexadecimal-decimal-colors.htmlhttp://courseweb.stthomas.edu/mjodonnell/cojo258/chapter07/section7-1.html
http://www.rapidtables.com/web/color/RGB_Color.htmhttp://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.phpRGB Color Wheel: http://www.psdgraphics.com/backgrounds/color-spectrum/
Additive Color Diagram: http://en.wikipedia.org/wiki/File:AdditiveColor.svgPixel Diagram = http://courseweb.stthomas.edu/mjodonnell/cojo258/chapter07/section7-1.html
Computer Images Zoomed In http://www.stealthcopter.com/blog/2010/03/digimicro-200x-zooming-usb-digital-microscope-in-ubuntu-linux/
Sparrow Fact: http://wanderingstan.com/2012-05-28/the-pixel-is-dead-long-live-the-pixelWikipedia LCD - http://commons.wikimedia.org/wiki/
File:Liquid_Crystal_Display_Macro_Example_zoom.jpgDevice Comparison:http://www.extremetech.com/computing/122725-what-the-ipad-3s-retina-
display-looks-like-under-a-microscopeLCS vs CRT http://en.wikipedia.org/wiki/Subpixel_rendering
HSB Cone Diagram - http://www.actfuronair.com/?attachment_id=1553Printer Ink - http://www.misco.co.uk/Product/200575/HP-920XL-CMYK-Ink-Combo-Pack-
C2N92AE