一、背景和意义

前端开发中用得比较多的颜色表示法是16进制表示法和RGB，如#ffffff或rgb(255, 255, 255)，之前有文章《如何记忆CSS颜色编码》 简要介绍了记忆CSS颜色编码的方法时也是使用这两种颜色表示法，但16进制和RGB在不易于理解和调色。

例如有颜色#2097c9，很多前端工程师在看到这个编码时联想不出是什么颜色，有一定经验的工程师也许看出其主色是蓝色（对应右边两位c9），其次是绿色（对应中间两位97），蓝绿混合是青色，蓝色比绿色多一点所以是青色偏蓝。前面再加个值为20的红色，会让青色稍微白一点点。颜色值在80以上表示偏亮，80以下偏暗，故大体上可推断#2097c9这个颜色是青色偏白偏蓝偏亮。如果后续要以这个颜色为基础，调亮一点或者调暗一点，就有些不太方便了。

相比之下，HSL是一种更适合人类理解的颜色表示方法，且可以更方便地对颜色进行微调（如调亮、调暗、调深、调浅）。本文给出HSL颜色表示法的示例。

二、HSL参数说明

hsl()函数需要3个参数，第一个参数表示色相，是一个0~359的整数值，代表色相环上的360度。从红（0）、黄（60）、绿（120）、青（180）、蓝（240）、洋红/品红（300）依次过渡，最后回到红色，如下图所示：

第二个参数是一个百分数，表示饱和度（即色彩强度），100%是最鲜艳，0%表示没有颜色（即灰色）。第三个参数也是百分数，表示明度（即亮度），0%是黑色，100%是白色。

二、HSL示例

2.1 明度变化示例

以红色为示例，改变第三个参数，使明度从低到高变化的展示效果如下：

从上图看，明度为50%时颜色最鲜艳，明度增加时会变白，明度减少时会变暗。

如果将第一个参数设置为蓝色（即240），对应的明度从低到高的展示效果为：

2.2 饱和度变化示例

以红色为示例，改变第二个参数，使饱和度从低到高变化的展示效果如下：

2.3 灰色示例

hsl的色相环的主要颜色有红、黄、绿、青、蓝，没有灰色。但是第二个参数饱和度如果是0%就表示灰色，所以hsl表示灰色是将第二个参数设置为0%，第三个参数控制灰色的明暗程度，第一个参数不无论取什么值都是一样的：