飽和度S調整捲軸：<input type="range" id="sliderS" min="0" max="100" value="80" oninput="hsvTable(this);" onchange="hsvTable(this);" >
<hr>

<script>
var cT=12,rT=30,s=1,v=1;
var esliderS = document.getElementById('sliderS');
esliderS.addEventListener('change', dumpT0, false);  
esliderS.addEventListener('input', dumpT0, false);  
s=esliderS.value/100;  dumpT(cT,rT,s,v);

function dumpT0()
{
	var cT=12,rT=30,s,v=1;
	s=esliderS.value/100;
	dumpT(cT,rT,s,v)

}

function hsv2rgb(hsv)
{
	var h=hsv[0];
	var s=hsv[1];
	var v=hsv[2];
	var f,p,q,t,r,g,b;
	hi=parseInt((h/60) % 6);
	f=h/60-hi;
	p=v*(1-s);
	q=v*(1-f*s);
	t=v*(1-(1-f)*s);
	switch (hi) {
	       	case 0:
	            r = v; g = t; b = p;
        	    break;
	        case 1:
        	    r = q; g = v; b = p;
	       	    break;
	       	case 2:
	            r = p; g = v; b = t;
        	    break;
	        case 3:
        	    r = p; g = q; b = v;
	       	    break;
	       	case 4:
	            r = t; g = p; b = v;
        	    break;
	        case 5:
        	    r = v; g = p; b = q;
	       	    break;
	       	default:
	            break;
	    }
	r = parseInt(r * 255.0).toString(16).toUpperCase();
	g = parseInt(g * 255.0).toString(16).toUpperCase();
	b = parseInt(b * 255.0).toString(16).toUpperCase();
	if (b.length==1) b="0"+b;
	if (g.length==1) g="0"+g;
	if (r.length==1) r="0"+r;

	return [r, g, b];
}


function dumpT(cT,rT,s,v)
{
var h=0,f,p,q,t,r,g,b;
document.writeln("Hue ColorTable("+ " Hue色調h="+h+" Saturation飽和度s="+s+" Value亮度v="+v+") <br>");
document.writeln("色環度數對應(0-60:紅色，60-120:黃色，120-180:綠色，180-240:青色，240-300：藍色，300-360：紅紫色)<br>");
document.writeln("<hr color=cyan><table border=0 bgcolor=white>");
for (row=0;row<rT;row++) {
        document.write("<tr><td>" + row );
        for (col=0;col<cT;col++) {
		h=row*(cT)+col;
		var rgb=hsv2rgb([h,s,v]);
    		var color=rgb[0]+rgb[1]+rgb[2];
	        document.write(  "<td bgcolor=#" + color +">" +color+"("+h+")");
	        }
	}
document.writeln("</table><hr color=yellow>");
}

</script>