示例HSL模式基于360色相环。第一个数字代表色相（色相圈的角度），60度为黄色。120度绿色。180度青色。240度蓝色。300度洋红色。360度红。第二个数字代表饱和度。该值为百分比。第三个数字是亮度，数值是百分比。hsl(255,90%,50%)介绍了现代浏览器广泛支持的CSS3的HSL方法，但是很多开发者不喜欢使用它，部分原因是HSL颜色模式与其他CSS颜色模式有很大不同：你可以轻松地将十六进制颜色模式转换为RGB颜色模式，但转换为HSL颜色模式则比较困难。Photoshop中的Hex和RGB颜色可以直接在CSS文件中使用，但是HSB模式颜色和Photoshop中的HSL是不同的。HSL的颜色范围与Hex和RGB颜色相同。虽然上面有一些限制，但HSL颜色模式仍然是推荐的颜色模式。了解HSL色彩模式系统要了解HSL色彩，首先需要从另一个角度来了解色彩。注意上面的色轮，可以看到红绿蓝三种颜色。什么是最上面的红色，它设置为0度，绿色是120度，蓝色是240度。他们将色轮分为三个部分。中间是黄色、青色和品红色（CMYK颜色系统）。它们的角度分别为60度、180度和300度。从色轮顶部顺时针方向是彩虹的颜色。从60度开始，它们是：黄色、绿色、青色、蓝色、品红色和红色。HSL颜色指的是色轮上面多少度的颜色值。比如紫色介于蓝色（240°）和洋红色（300°）之间，那么他的HSL颜色就是hsl(270,100%,50%)。如果想让紫色偏蓝，需要将角度值往色轮的蓝色方向移动，得到hsl(255,100%,50%)。你会注意到角度后面多了两个百分比数值，第一个数值是颜色的饱和度，也就是数值颜色的“强度”。在色轮的最外层，颜色的饱和度为100%，最外层的颜色最“艳”。您越靠近色轮的中心，颜色就会变得越灰。所以饱和度也可以理解为：颜色离灰色有多远？当HSL颜色的饱和度为0%时，它们都变成相同的灰色。HSL饱和度值：hsl(45,x%,50%)**HSL颜色的两个百分比值必须同时包含饱和度和亮度值才能正常显示。亮度是指颜色是更白还是更黑。亮度值为50%，表示颜色处于黑白中间，颜色基本保持原色不变。降低亮度会增加黑色调：当亮度为0%时，颜色变为黑色。增加亮度会增加白色调：当亮度值为100%时，颜色会变成白色。HSL亮度值：hsl(90,100%,x%)当你熟悉了上面色轮的颜色分布后，你会发现在CSS中使用HSL颜色比使用RGB颜色更容易管理。有时，使用HSL颜色有一些优势。HSL颜色在网站中的三种应用场景（优势）。在某些情况下，在CSS中使用HSL颜色会比使用其他颜色模式更有优势。本文将从三个方面介绍何时使用HSL颜色。为网站配色方案创建快速原型HSL颜色非常适合插入网站配色方案，尤其是当开发人员对色彩理论没有很好的了解时。可以使用一些简单的规则创建HSL颜色以适应任何所需的配色方案。HSL的补色方案比如你想快速为你的网站创建一个配色方案，如果你的网站LOGO是橙色，那么它对应的HSL色值为：hsl(30,90%,29%)。要生成补色，可以将色调值增加180度，在本例中，生成的HSL颜色为：hsl(210,90%,29%)。HSL的单色配色方案让我们看看如何创建单色配色方案：一种简单的方法是从饱和度值中减去30%。如果我们的基色是hsl(30,90%,29%)，那么另外两种颜色就是：hsl(0,90%,29%)和hsl(60,90%,29%)。此外，还可以配置三色方案：只需将基色的色相值增加120度即可。以上简单的配置就可以得到三种网站颜色的配色方案，是不是非常快捷简单呢？快速调整颜色如果你网站的颜色模式是RGB模式或者HEX颜色模式，那么当你想把网站的颜色调的更亮一些的时候，就得同时调整三个值，这些fine-调整工作很烦人。如果你使用的是HSL颜色模式，那么工作就变得简单了：body{background:hsl(60,100%,50%);}你只需要调整一些亮度值body{background:hsl(60,100%,40%);如果你使用我们上面提到的HSL配色方案，那么你可以很容易地调整其他颜色。为样式创建快速颜色变体让我们以带有渐变的点按钮为例。其基本外观如右图所示（只有webkit核心浏览器才能看到正确的样式）。它的CSS3代码如下，注意没有写浏览器厂商的前缀：input{background-image:radial-gradient(hsla(0,100%,90%,1)0%,hsla(0,100%,70%,1)15%,hsla(0,100%,60%,.3)28%,hsla(0,100%,30%,0)70%);}如果我们想把按钮渐变的颜色改成蓝色，我们只要需要它的色调值只需：输入{background-image:radial-gradient(hsla(200,100%,90%,1)0%,hsla(200,100%,70%,1)15%,hsla(200,100%,60%,.3)28%,hsla(200,100%,30%,0)70%);}可以看出新生成的蓝光和原来的红光的亮度和强度是一样的，只是色相值有改变了一点。您可以轻松地将其更改为任何其他颜色。什么时候不应该使用HSL颜色？答案是：当你的网站必须指向IE8及以下浏览器时，你不能使用HSL颜色作为你的网站颜色。Sass可以自动将HSL颜色转换为RGB颜色或HEX颜色。rgbtohslconversion这里有个小提示，可能有的人不知道，我们在开发阶段只有一个rgb值，但是我们想把它转换成hsl值，使用chrome开发者工具可以很方便的完成，如图如下图，我们只需要选择我们要转换的颜色值，按住键盘左shift键，点击颜色表示框进行转换：
