CSS3中HSL色彩模式介绍

大家如果使用过PS，一定对于里面的颜色选择器很有印象，大家都知道色调、饱和度和亮度3个参数设置。HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”，使用十六进制组合会颇麻烦吧。幸运的是，通过HSL，它就是仅仅一个简单的数字改变。HSL被广泛使用的原因在于比较容易检测色彩边界，L是亮度，人眼最敏感，RGB的变化不是很敏感，不好做分割。

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

语法：<length> || <percentage> || <percentage>
例如：div {background: hsl(30, 50%, 80%);}

HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定，0º 就是红色，120º 是绿色，而240º 就是蓝色。当然，你可以选择中间的不同的色彩组合，这样你就有这些：

Saturation(饱和度)是该色彩被使用了多少。0%表示灰度，也就是我们并没有使用这个颜色，而100%表示该颜色很饱满。通俗的讲，饱和度就是颜色的深浅程程度，鲜艳程度 Lightness(明度)也就是该色彩有多亮。较低设置意味着暗，较高设置意味着亮，0% 和100%意味着分别为黑和白。

HSL被大部分浏览数支持，包括Safari 3.2+、Chrome、Firefox、Opera 9.6+，IE不支持。

下面这个例子就是HSL颜色使用的代码示例，如果你看不到对应结果，说明你的浏览器不支持。

下面这个例子就是HSL颜色使用的代码示例，如果你看不到对应结果，说明你的浏览器不支持。

1 <p style="color:hsl(30,50%,50%)">HSL颜色设置</p>

HSL颜色设置hsl(30,50%,50%)

HSL颜色设置hsl(60,50%,50%)

HSL颜色设置hsl(30,80%,50%)

HSL颜色设置hsl(30,50%,80%)