hsl parsing

Benchmark created on June 12, 2011

Preparation HTML

<script>
  primary=(function(colors,document,i,f,ua,slice,n,ie,op,html,rainbow){
      
      ie=ua.indexOf("MSIE")>=0
      op=ua.indexOf("Opera")>=0
      html=document.documentElement
      rainbow=html.appendChild(document.createElement("textarea"));
      rainbow.style.display="none"
      
      function nativeColor(a,ret,b,f,h) {
        
          rainbow.style.color = a;
          rainbow.style.display=""
          if(ie){
              rainbow.value = "";
                  b = rainbow.createTextRange().queryCommandValue("ForeColor");
                  b = ((b & 255) << 16 | b & 65280 | (b & 16711680) >>> 16).toString(16);
                  h = "000000"[slice](0, 6 - b.length) + b;
                  ret = [
                  i(h[slice](0, 2), 16), i(h[slice](2, 4), 16), i(h[slice](4, 6), 16)
                  ];
          }
          else{
              ret=op?rainbow.style.color:getComputedStyle(rainbow, null).color;
              ret=/rgb\((.+),(.+),(.+)\)/i.exec(ret);
              ret=[i(ret[1]), i(ret[2]), i(ret[3])]
          }
          rainbow.style.display="none"
          return ret;
      }
      return nativeColor;
      try{
          nativeColor("hsl(120, 75%, 75%)");
          parseColor=function(str){
              if(colors[str]) return colors[str];
              return colors[str]=nativeColor(str);
          }
      }catch(e){
          
          parseColor=function(){
              return [0,0,0]
          }
          
      }
      
      function primary(c){
          this.c=c
      }
      
      function round(c){
          return [i(c[0]),i(c[1]),i(c[2])]
      }
      
      function h(n){
          n=n.toString(16);
          return "00".slice(0,2-n.length)+n;
      }
      
      function each(arr,fn,x){
          for(x=0;arr[x];x++) fn(arr[x],x);
      }
      
      var fn=primary.prototype={
          blend:function(clr,p,a,c,inv){
              a=clr instanceof primary?clr.c:parseColor(clr);
              c=this.c;
              
              inv=1-p;
              
              return new primary([a[0]*p+c[0]*inv,a[1]*p+c[1]*inv,a[2]*p+c[2]*inv]);
              
          },
          
          rgb:function(){
              return "rgb("+round(this.c)+")"
          },
          
          invert:function(c){
              c=this.c
            return new primary([n-c[0],n-c[1],n-c[2]]);  
          },
          
          hex:function(c){
              c=round(this.c);
              return "#"+h(c[0])+h(c[1])+h(c[2]);
          }
      }
      
      each(["red","green","blue"],function(str,i){
          fn[str]=function(val){
              return isNaN(val)?this.c[i]:(this.c[i]=val,this);
          }
      })
      
      return function(s){
          return new primary(typeof s=="string"?parseColor(s):s);
      }
      
  })({},document,parseInt,parseFloat,navigator.userAgent,"slice",255)
  
  function hslToRgb(h, s, l){
      var r, g, b;
  
      if(s == 0){
          r = g = b = l; // achromatic
      }else{
          function hue2rgb(p, q, t){
              if(t < 0) t += 1;
              if(t > 1) t -= 1;
              if(t < 1/6) return p + (q - p) * 6 * t;
              if(t < 1/2) return q;
              if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
              return p;
          }
  
          var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
          var p = 2 * l - q;
          r = hue2rgb(p, q, h + 1/3);
          g = hue2rgb(p, q, h);
          b = hue2rgb(p, q, h - 1/3);
      }
  
      return [r * 255, g * 255, b * 255];
  }
</script>

Test runner

str="hsl(120, 75%, 75%)";
primary(str)

str="hsl(120, 75%, 75%)";
parts=/hsl\(([0-9]+),([0-9]+)%?,([0-9]+)%?\)/.exec(str.replace(/ /g,""));
hslToRgb(parseFloat(parts[1]),parseFloat(parts[2]),parseFloat(parts[3]))

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on June 12, 2011