本文摘自PHP中文网，作者青灯夜游，侵删。
CSS中，颜色值有多种表示方法，例如颜色名、十六进制颜色、RGB()、HEX()、HSL()等等。那你知道HEX、RGB和HSL之间有什么区别吗？下面本篇文章就来给大家简单对比一下HEX、RGB、HSL，看看它们区别。
不知道你是否了解 HEX、RGB 和 HSL 之间的区别，以及其中任意一种的各种优势？
在深入探讨这个问题之前，让我们简要了解每种颜色方法的含义。
颜色方法的定义
Hex 颜色值是最流行的设置 CSS 颜色属性的方法之一，尤其是在开发人员中。几乎所有浏览器都支持它。
我们可以在十六进制颜色代码中定义紫色，如下所示：
1 |
|
这里的颜色的格式规定是 #RRGGBB，其中 RR（红色）、GG（绿色）和 BB（蓝色）是介于 00 和 FF 之间的十六进制整数，表示色彩强度。
HEX 和 RGB 的区别
RGB 或 Red/Green/Blue（即红/绿/蓝）也被用于在 CSS 中定义颜色，是另一种广受欢迎的方法。RGB 配色方案是一种三通道格式，其中 r、g、b 三色的数值是 0 到 255 之间的整数。以下是 RGB 颜色的示例：
1 |
|
上述 RGB 颜色代码的实现与上文中 HEX 颜色一致。你可能想知道，明明十六进制颜色代码更容易记住和输入，为什么我们还要使用 RGB 呢？
嗯，每种颜色方法都有自己的好处。RGB 的美妙之处在于它允许你为颜色添加不透明度。
这就是 RGBA 的强处了。在 CSS3 中，RGB 配色方案新增了一个额外的 alpha 通道，以指示颜色的不透明度。
译者注：其实嘛，Hex 也支持，比如说 50% 黑色就是
#00000088，最后两位数为十六进制的透明度，范围也是00到FF。
新人，HSL！
HSL 代表色相 Hue、饱和度 Saturation 和亮度 Lightness，是另一种在 CSS 中声明颜色的方式。紫色的 HSL 颜色值可以指定如下：
1 |
|
如你所见，第一个参数用于定义色相，它是实际纯色的值，例如红色、黄色、绿色、蓝色、洋红色等。色相是一个颜色轮，取值为 0 到 360 的度数。这里 0 和 360 度代表红色，120 度代表绿色，240 度代表蓝色。
与 RGB 不同，在 HSL 中，颜色的饱和度和亮度都可以改变。
这些颜色可以是暗淡的，也可以是鲜艳的。颜色越少，它变成灰色的阴影就越多。饱和度指代混合色中存在多少颜色，它能控制颜色的鲜艳或暗淡程度。
如你所见，当饱和度值沿线从 100% 变为 0% 时，颜色会从纯色调变为暗色调。
此外，还有第三个参数代表亮度。这玩意也是一个百分比值，数值范围也是 0% 到 100%，用于描述颜色中黑色或白色的占比。
这类似于水彩在绘画中的使用。如果你想让颜色更亮，你可以添加白色，如果你想让颜色更深，你可以添加黑色。因此，100% 的亮度表示完全的白色，50% 表示实际色调颜色，0% 表示纯黑色。
HSLA 与 RGBA 类似，是 HSL 的扩展。第四个通道表示颜色的不透明度，与 RGBA 和 Hex-alpha 并无二致。不透明度以十进制值指定，就像在 RGBA 中一样，其中 1 表示完全不透明，0 表示完全透明，中间的所有取值都是部分不透明的。
然而，尽管大多数浏览器支持 RGB 和 Hex 颜色代码，HSL 颜色主要还是在基于 HTML5 的浏览器中得到支持。
你可能已经在 CSS 中设置颜色属性时使用过所有或部分的这些颜色方法。Hex 是我个人的最爱，但是他们之间究竟有什么区别，各自又有着怎样的优势？话不多说，一起来了解一下吧！
在 CSS 中指定颜色的最佳方法是什么？
如果你习惯了 HTML，你可能更习惯使用 Hex 颜色值，因为 Hex 颜色值在 HTML 中被大量使用。但如果你学过设计，你可能会使用 RGB 表示法，因为它是大多数设计软件（如 Photoshop、Corel 和 Illustrator）中最常用的格式。
我的建议是，如果你是一名纯粹的开发人员并且只想完成你的项目，请继续使用你最熟悉的颜色方式。
因为浏览器并不真正关心你使用的是哪种颜色格式，即使不同方法之间有细微的性能变化，但性能差异可以忽略不计。
除此之外，如果你担心可用性、决策对开发人员的影响等，让我们看看哪种方法最适合你的情况。
让我们从十六进制表示法开始。由于其简短的符号，十六进制非常有吸引力。许多开发人员发现，与 RGB 和 HSL 相比，Hex 值非常易于阅读，而且更容易复制到他们喜欢的文本编辑器中。
RGB 在较旧版本的 Internet Explorer（9 及更早版本）中广为人知并受支持。
HSL 旨在让人类更容易理解！
相关阅读 >>
更多相关阅读请进入《CSS颜色》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
