Understanding ColorJust a beginning! By Beth Rajan Sockman
Additive & SubtractiveTwo colors most often used:RGB =         Additive ColorAdd light get a LIGHTER image CYMK =         Subtractive ColorMore pigment added, the DARKER the image
Color SpacesClick on image to link to movie about color space
Working with 3 Color SpacesRGB – Red, Green, BlueMonitorLight based devices (NOT SUNLIGHT!)CMY(K) – Cyan, Magenta, Yellow & BlackPrint Combine PigmentsPantone
RGBUsed on computer monitors, digital cameras, televisions, mobile devices & other light-based devicesMost PC allow 256 colors216 colors match on Mac® & Windows®  web-safe colors100% Red + 100% Green + 100% Blue = White
RGB  - HexadecimalRemember this website: http://html-color-codes.com/Color codes are not in our number system which is the Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or base 16
RGB  - HexadecimalDecimal System:0 to 9 as in: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 Hexadecimal Number System uses 16 different digits before digits are combined: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
RGB  - HexadecimalOnce you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems: Decimal :         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 Hexadecimal:   0, 1, 2, 3, 4, 5, 6, 7, 8, 9,  A,  B,  C,  D,  E,  F,  10,  11,  12
RGB  - HexadecimalIntensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). 0 is OFF meaning it contains no amount of the color 255 is FULL ON meaning full intensity of the color. Since the code for each of the three colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF = Dec 255).
RGBWhat is the Hex Code for White?What is the Hex Code for Black? FF, FF, FFOO, OO, OO
CMYKCMYK color system is used for printed illustrations. It uses pigments as opposed to light.NOTICE the relationship between RGB & CMYKBGR
PantonePropriety colorsPigments were developed in 1950’sInclude metallic and various huesSPOT COLORNO MixingWhat you select is what you get!
Hue & SaturationHueEach individual color on the color wheelSaturationIntensity of color from gray tone to the pure color.
TheoryAccessibility – 8% of web audience will have color discrimination challengesMake colors contrast! http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrastColor Psychology – Colors evoke emotionsPOWER ImpulsiveImpatienceSexual JoyIntelligenceOrganizationHard to see! TranquilityPatienceUnderstandingCooperationHopeGrowthGood HealthFreshness
ReviewWhat model of color is used for light based devices? What do the hexadecimal numbers designate?(T/F) CMYK is in the same color space as RGB.(T/F) Pantone is a type of CMYK color.Is RED a Hue or Saturation? RGBAmount of RGB FALSEFALSEHUE
Referenceshttp://www.designworksoregon.com/pages/web_design_colors.htmlhttp://www.web-colors-explained.com/intro_web_colors.phphttp://evolt.org/Understanding_Color_and_Accessibilityhttp://www.htmltutorials.ca/lesson9c.htmhttp://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrasthttp://iit.bloomu.edu/vthc/design/hue.htmhttp://www.youtube.com/watch?v=x0-qoXOCOow&feature=player_embedded

Understanding Color#1

Editor's Notes

  • #8 http://www.htmltutorials.ca/lesson9c.htm
  • #9 http://www.htmltutorials.ca/lesson9c.htm
  • #10 http://www.htmltutorials.ca/lesson9c.htm
  • #13 http://dr-photoshop.com/zfile/tutorials/swatches/PANTONE-Process-By-EURO.jpg & http://en.wikipedia.org/wiki/Pantone
  • #14 http://www.manifold.net/doc/colors_as_hue_saturation_and_brightness.htm
  • #15 Tell Students that they can find out much more.