Introduction to Color

• This discussion is taken mainly from an older version of Computer Graphics by Hern and Baker.
• So far, we have just assumed the hardware people were right in giving us three "color" planes in the frame buffer
  • 8 bits for red (0 to 255)
  • 8 bits for green (0 to 255)
  • 8 bits for blue (0 to 255)
  • And the not yet mentioned 8 bits for alpha.
  • Which gives us a nice 32 bit data chunk.
  • And 16 million colors (2^24)
• Other systems might allow more colors by providing more bits..
  • For monitors this is not such an issue
    • But on my monitor, 1680x1050 the maximum colors I could display is 1.7 million pixels.
    • And three times that on all three monitors (5.2 million)
    • So I could not display all 16 million colors if I wanted to.
  • A medium range color laser printer prints 2400x800 dots per inch.
  • Paper is 8x11 so that is 168 million dots (give or take)
• So generally in more comprehensive graphics packages
  • We store color values between [0,1]
  • And only scale them to the display device when it is time.
  • Simply by multiplying the value of each component by the max value.
• The HTML canvas does not do this because HTML in general is aimed at display on monitors and the color representation suffices
• But when we get to OpenGL we will be using ranges of [0,1]
• We "see" light in the visible spectrum.
  • This varies by person.
  • But typically we can see wavelengths between 390 and 700 nm
  • Or a frequency between 430 and 770 THz.
  • 
  • A screen shot of a picture on wikipedia
  • Do we know the relationship between frequency and wavelength?
  • Some colors (like pink) are a mixture of two or more wavelengths.
  • Apparently we all see colors slightly differently.
  • And most humans can distinguish 400,000 different colors.
• Light
  • Might contain all colors (or frequencies)
  • Or might contain a subset of the frequencies (think blue light)
  • when it strikes an object, some frequencies are reflected and some absorbed.
  • So the reflected light will not contain all frequencies.
  • For many distributions of light there will be a narrow band of high intensity at a single or small frequency.
  • This is called the dominant wavelength or color or even hue.
• We also see a luminance or brightness of the light.
  • This is a relative intensity of the light.
  • The higher the intensity, the brighter the light.
• We also see a characteristic called purity or saturation.
  • This describes how pure the light is.
• So in white light, no dominant frequency is present.
  • 
  • The energy distribution for white light, reproduced based on the text.
  • 
  • The energy distribution for an dominant frequency, again reproduced based on the book.
  • The energy of the dominate frequency is labeled E_d
  • The energy of the other frequencies is labeled E_w
  • Brightness is really the area under the curve.
  • Saturation is the difference between E_d and E_w
    • The larger the difference the more "pure" the color.
• If two different colored lights can be combined to form white light, these two colors are called complementary colors.
  • The proper mixture of Cyan (#00FFFF) and Red (#FF0000) make white and are thus complementary
  • The same is true for Magenta (#FF00FF) and Green (#00FF00).
  • And many others.
• Color models typically select three dominate frequencies, called primary colors to represent all colors.
  • No set of primary colors can produce all possible frequencies within the visible spectrum.
  • You would need an infinite set to do this.
  • But three are sufficient for most purposes.
• The International Commission on Illumination (CIE) established a model for describing colors.
  • In 1931
  • For three primary colors A,B, and C (remember these are frequencies)
  • x = A/(A+B+C), y = B/(A+B+C) and z=C/(A+B+C)
  • and x+y+z = 1.
  • So z = 1-(x+y)
  • 
  • A CIE chromacity diagram, from Wikipedia.
• Selecting any two points in this diagram as two colored light sources
  • Any color on the line can be produced by proportionally mixing these colors.
• Any three points define a triangle which is equivalent to a selection of these three frequencies as primary colors.
  • Points within the triangle are colors which can be produced with that selection of primary colors.
  • Notice, not triangle can encompass all colors.
  • Knowing the coordinates of the triangles allow users to compare the color range of different devices.
  • A representation of the Color triangle for RGB from wikipedia.
  • 
• Color Models
  • RGB
    • Selected to best match the physiology of our eye.
    • Frequently represented as a cube.
    • 
    • The point (0,0,0) is black.
    • The point (1,0,0) is red
    • The point (1,1,1) is white.
    • (1,0,1) is Magenta
    • This is known as an additive model. As we add more "light" the color becomes more "white"
    • This model is great for our displays, but not the best for smooth transformation between more than two colors.
    • HTML: rgb(r,g,b), we have seen this.
  • CYM
    • Cyan, Magenta, Yellow.
    • This is frequently used for hard copy color devices.
    • This is subtractive color as colored ink absorbs light.
      • Pure Cyan does not reflect red light.
    • We won't do much with this in graphics.
  • HSV and HSL
    • We have already looked at this.
    • It is nice for smooth transformation between a set of colors.
  • Conversion between models involves warping the RGB cube to the HSL cone, or back.
    • If you care, wikipedia has a good article on this.
    • It generally involves projecting the cube onto the HSV/HSL cone to get the HUE
    • Then looking at intensities to get lightness
    • And the difference between the minimal and maximum intensities to get the saturation.
    • Here is some code

      function HSLtoRGB(hue, saturation, light){
          var r,g,b;
      
          var c = (1-Math.abs(2*light -1))*saturation;
          var h = hue/60;
          var x = c*(1-Math.abs(h %2 -1))
          var m = light - 1/2 * c ;
      
          if( h < 1) {
                 r = c; g = x; b = 0;
          } else if (h < 2) {
                 r = x; g = c; b = 0;
          } else if (h < 3) {
                 r = 0; g = c; b = x;
          } else if (h < 4) {
                 r = 0; g = x; b = c;
          } else if (h < 5) {
                 r = x; g = 0; b = c;
          } else {
                 r = c; g = 0; b = x;
          }
      
          r = Math.floor((m+r) * 255);
          g = Math.floor((m+g) * 255);
          b = Math.floor((m+b) * 255);
          return "rgb(" + r  + "," + g + "," + b + ")";
      }
      
      

    • And a demo:

    • Hue: Saturation: Lightness:

  • The code for the demo is here