相信您已经熟悉颜色的 RGB 和 HEX 表示，因为这是大多数文章/教程在编写 CSS 颜色时使用的，但这些并不是在 CSS 中编写颜色的最佳方法。HEX 和 RGB 很难理解，使颜色变浅/变深或将颜色从红色转换为橙色并不容易。这就是 HSL 的用武之地。HSL 是一种更容易阅读的格式，它使更改颜色的亮度或色调等操作变得简单。

什么是 HSL？

HSL 代表色相、饱和度和亮度。这类似于 RGB 如何通过将其红色、绿色和蓝色值组合在一起来表示颜色，但使用 HSL，这些值更直观。

色调

颜色的色调由围绕一个圆圈的度数表示。试想一个色轮，0 度代表红色，180 度代表青色，360 度代表同样的红色。

饱和

饱和度由 0 到 100 之间的百分比表示，并确定颜色的灰色程度。如果颜色是 100% 饱和度，则根本没有灰色，而饱和度为 0% 的颜色将是没有颜色的灰色阴影。

亮度

亮度也用百分比表示，并确定颜色的白色或黑色。如果颜色是 50% 的亮度，那么这意味着没有额外的白色或黑色添加到颜色中。随着百分比增加到 50% 以上，它会在颜色中添加更多的白色，直到在 100% 亮度下达到完全白色。随着百分比降低到 50% 以下，它会为颜色添加更多黑色，直到在 0% 亮度下达到完全黑色

如何使用 HSL？

现在我们了解了 HSL 是什么，我们可以谈谈如何使用它。它的工作原理与 RGB 一样，您可以在 CSS 中调用该hsl函数来定义 HSL 颜色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

传递给 hsl 的第一个值是色调，它是 0 到 360 之间的度数，第二个值是饱和度，它是 0% 到 100% 之间的百分比值，最后传递的最终值是亮度，它是一个百分比值在 0% 和 100% 之间。您还可以使用hsla来表示部分透明的颜色。这个函数接受第四个参数，它是一个介于 0 和 1 之间的值，其中 1 是完全不透明的，而 0 是完全透明的。

为什么这很重要？

像这样写颜色可能看起来有点奇怪，因为你很可能习惯于 HEX 或 RGB，但是一旦你习惯了它，它会让写 CSS 变得更加愉快。以下是几个原因：

轻松更改亮度/饱和度

正如我在本文开头提到的，您经常需要在 CSS 中更改颜色的亮度或饱和度，以执行诸如为按钮引入悬停状态之类的操作。使用 HEX 可能会很痛苦，因为没有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易计算。您只需将亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更进一步，使用calcCSS 中的自定义属性为您自动执行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用这少量代码，我们设置了一个基本的 btn 类，它总是使背景在悬停时变暗 10%，在焦点上变暗 20%。我们也这样做了，以便我们可以更改其他类型按钮的按钮色调，我们甚至不需要修改这些新按钮类型的悬停和焦点状态，因为它们都是使用自定义属性和calc.

轻松获取相关颜色

如果您熟悉任何颜色理论，那么您就会知道理解互补色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很难找出这些不同类型的颜色，但使用 HSL 很容易找到诸如互补色之类的东西。这是因为互补色只是色轮另一侧的颜色，在 HSL 的情况下，这意味着它们的色调彼此相差 180 度。

这很重要，因为您可以使用这些知识在 CSS 中创建一个颜色主题，该主题使用数学来计算这些互补色，并允许您一次轻松地更改整个站点的颜色主题。下面是我建立的一个可以做到这一点的网站的例子。

轻松更改色调

最后，HSL 的最后一个重大胜利是它可以轻松更改颜色的色调。如果你想让你的红色更橙色一点，你可以通过让你的色调更大一点来做到这一点，因为橙色在色轮上的红色之后。这真的很有用，因为在设计和开发的早期阶段，像这样的小颜色变化非常普遍，并且能够轻松地制作它们可以节省大量时间。

结论

HSL 是一种在 CSS 中表示颜色的不同方式，它不仅更易于阅读，而且更易于在 CSS 中修改和使用。在我看来，它是 CSS 中最好的颜色格式。

理

用了很长时间的RGB方式来作为CSS中的颜色样式，却不知道它是什么原理，据说这还是一道面试题，这篇文章就用来总结一下它的原理。

我们生活中最常见的光就是太阳光，据说在1672年牛顿用三棱镜将太阳光分离成了赤橙黄绿蓝紫青七色光。随着科技的进步，人们发现肉眼细胞对红绿蓝三种颜色较为敏感，而且这三种颜色按照不同比例混合会制造出很多其他的颜色，比如7色光中的其他4种颜色就可以用红绿蓝配比出来，是不是很神奇？这有点像电子数字，可以通过8衍生出其他九种数字。

基于上面的理论，咱们就可以在计算机世界里用红绿蓝的搭配来显示各种颜色。

目前RGB方式是将这三种颜色各用一个字节表示，每个字节8位，每位的大小是0到255，即这三种颜色每一个有256个选择，RGB一共可以表示256*256*256=16777216种颜色。虽然这并不能完全描述自然界中所有的光，但已经可以满足正常的生活需要了。

在CSS中，我们的写法如下：

#p1 {background-color:rgb(255,0,0);} /* 红 */
#p2 {background-color:rgb(0,255,0);} /* 绿 */
#p3 {background-color:rgb(0,0,255);} /* 蓝 */

RGB括号中每一位数字都要在0到255之间。

CSS颜色还有另外一种写法，如下：

#p1 {color: #001122}

因为每个颜色是8位，所以还可以将每位颜色转成2位的16进制，三种颜色就是6位。

对于上面重复的数字还可以简写，如下：

#p1 {color: #012}

在CSS代码规范里面咱们可以做一些代码的检测，至少可以少写几个字符。

存储格式

1、RGB565

这种方式用16位二进制来表示一个像素的颜色，红色5位，绿色6位，蓝色5位；

2、RGB55

这种方式也是用16位表示一个像素的颜色，但是最高位是保留位，不用，剩下的15位被三种颜色平分，即各五位。

3、RGB24

这种方式每个颜色用一个字节表示，和原理中说的方式一致。

4、RGB32

这种方式每个颜色用一个字节表示，还剩一个字节为保留位，不用。

5、ARGB32

这种方式用4个字节表示颜色，前三个字节分别表示红、绿、蓝，最后一个字节表示透明度alpha。

总结

在实际生活中我们有很多三原色的应用场景，比如电视，它显示的每个像素点可以认为是隐藏在屏幕后面的三种颜色的小灯照射形成的。所以三原色原理不仅应用在web页面中，生活中的应用场景也随处可见。