色相

HSL

style="background-color:hsl(0, 0%, 47%);"

颜色分量	解释
色相（hue）	色轮上从 0 到 360 的度数。 0 红色，60黄色，120 绿色， 180青色，240 蓝色，300紫色
饱和度（saturation）	取值`[0,1]、[0%,100%]`，0 灰色阴影，1全色。
亮度（lightness）	取值`[0,1]、[0%,100%]`，0黑色，0.5既不明也不暗，1白色。

HSV

style="background-color:hsv(0, 0%, 47%);"

颜色分量	解释
色相（hue）	色轮上从 0 到 360 的度数。 0 红色，60黄色，120 绿色， 180青色，240 蓝色，300紫色
饱和度（saturation）	取值`[0,1]、[0%,100%]`，0 灰色阴影，1全色。
明度（value）	取值`[0,1]、[0%,100%]`，0黑色，1`光谱色`。

应用

大部分的应用软件，都会采用HSV交互，RGB进行保存：

比较

分量
RGB	面向工业，因为需要精确的颜色值，改变颜色亮度，需要改变三个分量
HSV	面向用户，颜色变暗变量更人性化，改变颜色亮度，只需要改变V分量

透明图背景网格生成

var size=8;
var canvas=document.getElementById("myCanvas");
canvas.width = canvas.height = size * 2;
var ctx=canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制红色的大图
ctx.fillStyle = "green";
ctx.fillRect(0, 0, size, size);// 绘制左上角的绿色块
ctx.translate(size, size); // 重置(0,0)点
ctx.fillRect(0, 0, size, size);// 绘制右下角的绿色块