昨天在看CSS进阶教程时，学习色彩的六种方法，其中hsl有了新的认识，之前也有运用过，不过还不理解它的原理，今发享以下：

这种色彩运用还是比较少的，最多的还是RGB的格式，因为hsl在PS中的表达与在前端CSS中是不同的，不太方便取色，还得转换。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(45,0%,50%)hsl(45,25%,50%)hsl(45,50%,50%)hsl(45,75%,50%)hsl(45,100%,50%)

HSL颜色的两个百分比值必须同时包含饱和度和亮度值才能正常显示。

亮度是指颜色偏向于白色还是黑色。50%的亮度值表示颜色位于黑色和白色中间，这时颜色会基本保持原来的颜色不变。减少亮度会增加黑色调：当亮度为0%时颜色变为黑色。增加亮度会增加白色调：当亮度值为100%时颜色变为白色

HSL亮度值: hsl(90,100%,x%)

hsl(90,100%,0%)hsl(90,100%,25%)hsl(90,100%,50%)hsl(90,100%,75%)hsl(90,100%,100%)

在运用hsl的时候，第一个值表示色环的角度，第二个表示饱和度，第三个表示亮度，如白天：hsl(0,0%,100%)，这样的写法，比RGB中表示白天的写法简洁了些