HSL Demo

Hue

Saturation

Lightness
Hue
Saturation
Lightness
The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1>HSL Demo</h1>

<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<p>
<table>
   <tr><th>Hue</th><td> <input type="range" min="0", max="360" class="slider" id="hue" onchange="ChangeColor(this.value,'hue')"></input> </td></tr>
   <tr><th>Saturation</th><td> <input type="range" min="0", max="100" class="slider" id="sat" onchange="ChangeColor(this.value,'sat')"></input> </td></tr>
   <tr><th>Lightness</th><td> <input type="range" min="0", max="100" class="slider" id="light" onchange="ChangeColor(this.value,'light')"></input> </td></tr>
</table>

<script type="text/javascript">
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
let cx = canvas.width/2;
let cy = canvas.height/2;


let hue = 0;
document.getElementById("hue").value = hue.toString();

let sat = 100;
document.getElementById("sat").value = sat.toString();

let light = 50;
document.getElementById("light").value = light.toString();

function MakeColor(h, s, l) {
     let rv = "hsl(";
     rv += h.toString()+", ";
     rv += s.toString()+"%, ";
     rv += l.toString()+"%)";

     return rv;
}

function ChangeColor(value, color) {
    switch (color) {
       case "hue": hue = value; break;
       case "sat": sat = value; break;
       case "light": light = value; break;
    }
    Draw();
}

function Draw() {

    ctx.clearRect(0,0,canvas.width, canvas.height);

    
    ctx.beginPath();

    // draw the small box.
    ctx.fillStyle = MakeColor(hue, sat, light);
    ctx.fillRect(cx/2, cy/2, cx, cy);

    ctx.fill();

    return;
}

Draw();
</script>