Color Spaces

• I am in chapter 2.5
• The human eye is able to perceive three different values for color.
  • This leads to a theory that only shades of three different primary colors are needed
• Because of history, we work in RGB space.
• RGB Space forms a cube
  • 
  • At the origin is black
  • At (1,1,1) is white
  • Each primary color (RGB) is an axis.
• Early on colors were represented in a table
  • If your frame buffer only had 8 bits
    • You could have 256 distinct colors.
    • You stored the intensities of each color you wanted in the color table.
    • This is indexed color.
    • And for the most part was going in the 80's when I learned this stuff.
    • demo
• Currently you store each color for each pixel in the frame buffer.
  • Most systems support 8 bits per color
  • Or 24 bits total for color
  • Or $2^{24} = 16,777,216 $ or 16 million colors.
  • Since hardware can change, most abstract systems represent the color value between 0 and 1.
• But 24 bits in not really a nice border (32 is)
  • So we use the last 8 bits as a transparency value or alpha value.
  • 0 is transparent, 1 is opaque.
• It turns out for the html5 canvas you can specify colors a number of ways
  • a reference (It says css, but it will do)
  • A known name.
  • A rgb[a] value #FF0000, and #FF0000FF
  • as a function
    • rgb(255, 0, 0)
    • rgb(100%, 0%, 0%)
    • rgba(255, 0, 0, 255)
    • rgba(100%, 0%, 0%, 100%)
• Have a look at the rgba demo
• I have found hsv/hls useful tools as well.
  • This standard is designed to be more intuitive than RGB
    • Transitions are apparently closer to what our eyes do.
  • This is briefly mentioned in 12.9.1 of the book
  • But there as a good wikipedia article.
  • Hue Saturation and Lightness or Hue Saturation and lightness
    • Hue is an angle between 0 and 360.
    • Saturation is a value between 0 and 1.
    • Value or lightness are between 0 and 1 as well.
  • 
  • Hue is the "color"
  • Saturation is how washed out is it.
  • For lightness 0 is black, 1 is white.
  • These form a cone
  • 
  • HTML supports
    • hsl(120, 100%, 50%);
    • hsla(120, 100%, 50%, 85%);
    • There are other variants as well, but these will do nicely.
• Have a look at the hsl demo