RGB color model and HSL color model

The RGB color model is an additive color model in which red, green, and blue light are added together to produce many other different colors.

Typically, each channel are represented in the range of 0×00-0xff.  In theory, there could be 256x256x256 different colors generated from this color model.

HSL color model is a common cylindrical-coordinate representations of points in an RGB color model. H stands for hue, people can understand hue as different colors, like red, green,blue or orange. S stands for saturation, we can understand saturation as adding gray onto colors. L stands for lightness, each color has it’s own lightness from darkest to brightest.

RGB and HSL color model are just two different representation models for digital device to understands color more easily. Usually there is no use to convert from one to other, however in some cases, we do need convert a color from RGB model to HSL model or vise versa. In Adobe Photoshop there are four color blending modes: hue,  saturation,  color and luminance which will require the color conversion first.

I will provide the source code to convert RGB color to HSL and HSL convert back to RGB. You will find these two static functions defined in COLOR_SPACE object will be used in the image blending algorithm later.

COLOR_SPACE.rgb2hsl = function(red,green,blue){
   var r = red, g = green, b = blue;
   var h, s, l;
   var min, max;
   var delta;

   if (r > g){
      max = Math.max (r, b);
      min = Math.min (g, b);
   }else{
      max = Math.max (g, b);
      min = Math.min (r, b);
   }

   l = (max + min) / 2.0;

   if (max == min){
      s = 0.0;
      h = 0.0;
   }else{
      delta = (max - min);

      if (l < 128){
         s = 255 * delta / (max + min);
      }else{
         s = 255 * delta / (511 - max - min);
      }
      if (r == max){
         h = (g - b) / delta;
      }else if (g == max){
         h = 2 + (b - r) / delta;
      }else{
         h = 4 + (r - g) / delta;
      }

      h = h * 42.5;

      if (h < 0){ h += 255; }
      else if (h > 255){ h -= 255; }
   }

   red   = Math.round (h);
   green = Math.round (s);
   blue  = Math.round (l);
   return {h:red,s:green,l:blue};
};

COLOR_SPACE.hsl2rgb = function(hue,saturation,lightness){
   var h = hue, s = saturation, l = lightness;

   if (s == 0){
      /*  achromatic case  */
      hue        = l;
      lightness  = l;
      saturation = l;
   }else{
      var m1, m2;

      if (l < 128){
         m2 = (l * (255 + s)) / 65025.0;
      }else{
         m2 = (l + s - (l * s) / 255.0) / 255.0;
      }
      m1 = (l / 127.5) - m2;

      /*  chromatic case  */
      hue        = COLOR_SPACE.hslValue (m1, m2, h + 85);
      saturation = COLOR_SPACE.hslValue (m1, m2, h);
      lightness  = COLOR_SPACE.hslValue (m1, m2, h - 85);
   }
   return {r:hue,g:saturation,b:lightness};
};

COLOR_SPACE.hslValue = function(n1,n2,hue){
   var value;

   if (hue > 255){ hue -= 255; }
   else if (hue < 0) { hue += 255; }

   if (hue < 42.5){
      value = n1 + (n2 - n1) * (hue / 42.5);
   }else if (hue < 127.5){
      value = n2;
   }else if (hue < 170){
      value = n1 + (n2 - n1) * ((170 - hue) / 42.5);
   }else{
      value = n1;
   }
   return Math.round(value * 255.0);
};