Hue: Saturation: Lightness:

HTML code

        <div id="canvas1Space"></div>
        <p>
        <script>
            var canvas = new ColorCanvas(400,400, "canvas1Space");
            canvas.Redisplay();
        </script>
	<p>
Hue: 
<input type="text" 
       size="5" 
       id="hueText" 
       onchange = canvas.ChangeHue("hueText");>
Saturation: 
<input type="text" 
       size="5" 
       id="satText" 
       onchange = canvas.ChangeSaturation("satText");>
Lightness: 
<input type="text" 

color.js

function ColorCanvas(width, height, locID) {

    if (width == undefined || width < 0) {
       width = 300;
    }

    if (height == undefined || height < 0) {
       height = 300;
    }

    var canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;

    if(locID == undefined) {
        document.body.appendChild(canvas);
    } else {
        div = document.getElementById(locID);
        if (null == div) {
            document.body.appendChild(canvas);
        } else {
            div.appendChild(canvas);
        }
    }

    document.body.appendChild(canvas);

    this.width = width;
    this.height = height;
    this.clearColor = "#000000";
    this.ctx =  canvas.getContext("2d");

    this.hue = 0;
    this.saturation = 1;
    this.light = .5;

    this.ctx.font="20px Arial";

    return this;
}

ColorCanvas.prototype = {

    SetClearColor: function(color) {
        this.clearColor = color;
        return;
    },

    Clear: function() {
        this.ctx.fillStyle=this.clearColor;
        this.ctx.fillRect(0,0,this.width,this.height);

        return;
    },

    ChangeSaturation: function(id) {
         var node  = document.getElementById(id);
         var value = parseInt(node.value);

	 this.saturation=Clamp(0,1,value/100);
         this.Redisplay();
         return;
    },

    ChangeLight: function(id) {
         
         var node  = document.getElementById(id);
         var value = parseInt(node.value);

	 this.light = Clamp(0,1,value/100);
         this.Redisplay();
	 return;
    },

    ChangeHue: function(hueID) {
         var hueNode  = document.getElementById(hueID);
         var hue = parseInt(hueNode.value);

         while (hue < 0) {
	    hue = hue + 360;
	 }

	 while (hue > 360) {
	    hue -= 360;
	 }

         this.hue = hue;
         this.Redisplay();

         return;
    },

    Redisplay: function() {
	this.Clear();

	var x1, y1, y2;

	x1 = this.width*.10;
	y1 = this.height * .10;
	y2 = this.height * .55;

        // draw the box using hsl from HTML
        var color = "hsl( " + this.hue +  ", " + this.saturation*100 +"%, "
				   + this.light*100+"%)"

	this.ctx.fillStyle= color
        this.ctx.fillRect(x1,y1,this.width*.8,this.height*.35);
        this.ctx.strokeStyle = "black";
	this.ctx.strokeText(color, this.width*.25, this.height*.25);
	   
      
        // draw the box using RGB converted from hsl.
        color = HSLtoRGB(this.hue, this.saturation, this.light);
        this.ctx.fillStyle= color;
	this.ctx.fillRect(x1,y2,this.width*.8,this.height*.35);
	this.ctx.strokeText(color, this.width*.25, this.height*.75);
	
        return;
    }
};

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 + ")";
}

function Clamp(low, high, value) {
    if (value < low) {
       value = low;
    }

    if (value > high) {
       value = high;
    }

    return value;
}