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
...
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-orang...
Do you notice the differences
between these two color wheels?
This is a “Traditional” Color Wheel.

It’s used in painting....
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 tog...
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
...
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, ??? 0)
255,
(0, ???...
➦

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 valu...
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)
...
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% 10...
B = brightness

~ How “bright” the color is.
~ Measured in percent
(from the bottom of the cone)
100% 100% 100% 100% 100% ...
Color Project:
Create three palettes.
1) Choose 10 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 inclu...
Color Project:
Create three palettes.
1) Choose 1 Hue.
2) Create a gradient palette for this hue. The
palette should inclu...
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
Yellow
black
INK in color printing.
subtractive Color System
~ ink reduces light that
would be reflected
~ ink “subtracts” brightness
from the white page
~ Th...
recap

~ CMYK
~ subtractive color system
~ used in printing

~ RGB
~ additive color system
~ used in electronics
Check this out...

Makes sense, right?
What about white?
What about black?
What about everything else?
Resources
http://www.mathsisfun.com/hexadecimal-decimalcolors.html
http://courseweb.stthomas.edu/mjodonnell/cojo258/
chapt...
Images
Traditional Color Wheel - http://nhsdesigns.com/graphic/color/color-wheel.php
RGB Color Wheel: http://www.psdgraphi...
Introduction to color
Introduction to color
Introduction to color
Introduction to color
Introduction to color
Introduction to color
Introduction to color
Upcoming SlideShare
Loading in...5
×

Introduction to color

747

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
747
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
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 LIGht? is 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, stage lighting, and more
  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, ??? 0) 255, (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. Color Project: Create three palettes. 1) Choose 10 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 ten colors/shades. 3) The saturation should range from 0-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 ten colors/shades. 3) The brightness should range from 0-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 Yellow black INK in color printing.
  57. 57. subtractive Color System ~ ink reduces light that would be reflected ~ ink “subtracts” brightness from the white page ~ The color in the middle is not pure black, so we have to add black ink.
  58. 58. recap ~ CMYK ~ subtractive color system ~ used in printing ~ RGB ~ additive color system ~ used in electronics
  59. 59. Check this out... Makes sense, right? What about white?
  60. 60. What about black?
  61. 61. What about everything else?
  62. 62. Resources http://www.mathsisfun.com/hexadecimal-decimalcolors.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-electromagneticspectrum http://www.tomjewett.com/colors/index.html
  63. 63. Images 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 CMYK Girl ~ http://www.masterpress.co.th/page1/page11/page11.html hot air balloons - http://www.spielberg-ocr.com/printing.html CMYK Butterfly - http://w3.unisa.edu.au/printing/new/lvl3/printing-colour.asp http://cisftp.kirtland.edu/ART275-CS3/Week4/color-management.htm http://www.spielberg-ocr.com/printing.html
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×