开发过程中经常和颜色打交道，但是你对颜色的多种表示方式真的非常理解么？
色相
网络异常，图片无法展示
|
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);// 绘制右下角的绿色块 复制代码
网络异常，图片无法展示
|
