在前端开发中，我们常常需要使用 CSS 来控制各种元素的颜色。而对于颜色的表达方式，CSS 提供了多种方式，比如 RGB、HEX 等。而在 LESS（一种 CSS 预处理器）中，我们还可以使用 HSL（色相、饱和度、亮度）颜色来表达颜色。
HSL 颜色的基本概念
HSL 颜色包括三个值：
色相（Hue）：表示颜色的基本色调，取值范围是 0~360 度。例如，红色的 H 值是 0 度，绿色的 H 值是 120 度，蓝色的 H 值是 240 度。
饱和度（Saturation）：表示颜色的纯度或鲜艳度，取值范围是 0%~100%。饱和度为 0% 表示无色，100% 表示最鲜艳的颜色。
亮度（Lightness）：表示颜色的明暗程度，取值范围也是 0%~100%。亮度为 0% 表示黑色，100% 表示白色。
LESS 中使用 HSL 颜色
在 LESS 中，我们可以使用 hsl() 函数来表示 HSL 颜色。示例代码如下：
.my-element {
/* 纯红色 */
color: hsl(0, 100%, 50%);
/* 饱和度为 50% 的鲜艳的绿色 */
background-color: hsl(120, 50%, 50%);
/* 亮度为 30% 的深蓝色 */
border-color: hsl(240, 100%, 30%);
}我们可以看到，与 CSS 相比，LESS 中使用 HSL 颜色会更加直观和易于理解。同时，使用 HSL 颜色也可以进行更加细致的调整，例如调整元素的亮度值来达到更好的效果。
HSL 颜色的进阶应用
除了基本的 HSL 颜色外，我们还可以利用 HSL 颜色进行一些进阶的应用。
相关颜色的生成
我们可以利用 HSL 颜色计算出相关颜色，比如深色、浅色、饱和度提高或降低的颜色等。示例代码如下：
.my-element {
/* 较浅的红色 */
color: lighten(hsl(0, 100%, 50%), 30%);
/* 较深的绿色 */
background-color: darken(hsl(120, 50%, 50%), 20%);
/* 降低饱和度的蓝色 */
border-color: desaturate(hsl(240, 100%, 30%), 50%);
}我们可以看到，我们可以通过在 lighten()、darken()、desaturate() 等函数中传入 HSL 颜色以及调整参数来生成相关的颜色。
混合多个颜色
在 LESS 中，我们可以利用 mix() 函数将两个颜色进行混合。我们可以通过传入两个 HSL 颜色以及调整参数来生成混合后的颜色。示例代码如下：
.my-element {
/* 红色和绿色的混合 */
color: mix(hsl(0, 100%, 50%), hsl(120, 50%, 50%), 50%);
/* 蓝色和黄色的混合 */
background-color: mix(hsl(240, 100%, 30%), hsl(60, 50%, 50%), 25%);
}我们可以看到，通过混合多个 HSL 颜色，我们可以生成更加多样化、丰富的颜色。
总结
HSL 颜色是一种非常强大、灵活的颜色表达方式，在 LESS 中使用 HSL 颜色也是非常方便、直观的。我们可以利用 HSL 颜色进行基本的颜色表达，同时还可以进行许多进阶的操作，比如生成相关颜色、混合多个颜色等，这些特性都能帮助我们更好地控制元素的颜色，提高页面的设计质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b3782badd4f0e0ffc8a5da