CSS颜色设置方法：HEX、RGB、HSL的简单对比(2)-木庄网络博客

RGB 和 Hex 等格式的机器可读性比人类可读性强。相反，HSL 旨在让人类更好地理解。HSL 是一种更新且自然的颜色处理方式。

与在 Hex 和 RGBA 中你必须通过一些数字来获得你想要的颜色不同，在 HSL 中，我们可以使用 Hue 定义颜色并使用第二和第三个参数百分比来获得你想要的饱和度和亮度级别。

如果我告诉你网页标题需要是 #578557 或 rgb(87, 133, 87)，你能猜出是什么颜色吗？不，除非你是电脑。但是，与此同时，如果我给你 HSL 中的颜色：hsl(120, 21%, 43%)？现在猜测有点容易了吧？ Hue 值为 120°，表示它是纯绿色。接下来，它的饱和度为 61%，表明它距离暗灰色（一种非常不饱和的绿色）还有 21%。最后，亮度 43% 意味着颜色从纯色到较暗的一面有 7%。

好的，假设你想让按钮颜色在悬停时更亮，单击时更暗。使用 HSL 轻而易举 ―― 只需要增加和减少亮度值，仅此而已，是不是非常吃惊！！但是在不使用工具或设计师的帮助下用十六进制或 RGB 来做到这一点是不可能的。

HSL 是一种模仿现实世界的直观颜色符号。

例如，让我们考虑一张浅蓝色的色纸。它的三种格式的颜色值分别是：

Hex	RGB	HSL
#ADD8E6	rgb(173, 216, 230)	hsl(195, 53.3%, 79%)

好的，现在把你的手握在离表面几英寸的地方。你手的影子让表面变暗了一点，对吧？在不改变颜色本身的情况下，我们是无法使用 RGB 或十六进制表示法表示这种颜色变化的。但是在 HSL 中，我们仅仅需要稍微调整亮度值，然后就 大功告成了！我们根本不需要对原始颜色进行任何更改，是不是真的很酷？

	Hex	RGB	HSL
原值	#4f2017	rgb(79, 32, 23)	hsl(195, 53.3%, 79%)
新值	#2F819D	rgb(47, 129, 157)	hsl(195, 53.3%, 50%)

如你所见，Hex 和 RGB 值已经被改到面目全非了，而对于 HSL，只有一个值发生了变化。毫无疑问，在构建配色方案时，HSL 是最有用的。以底色为基础，根据需要调整饱和度和亮度，就是这样！有了 HSL，建立一个配色方案，简直就是小菜一碟。

最后，这一切都取决于个人喜好！

现在你可能认为 HSL 是最好的颜色表示法。但是，正如我上面提到的，旧版本的 Internet Explorer 不支持 HSL。同样，每种颜色格式都有其优点和缺点。问题是，这并不重要。

最重要的是尽可能保持在项目中使用到的类型的一致性，因为它有助于提高生产力。

和其他两种颜色相比 Hex 有不支持透明度的限制（译者注：Hex 是支持的……）
不使用特定工具来调整 RGBA 颜色是很很困难的
旧浏览器不支持 HSLA
- 如果你所服务的浏览器支持 HSLA 那就忽略这条吧！你可以选择使用任何格式！

在选择在项目中设置 CSS 颜色属性的最佳方法时，你可以考虑以下因素。

1、使用与开发团队其他成员相同的格式来提高可维护性。

2、如果你已经熟悉 RGB 格式，请使用它。

3、如果你的目标访问者使用严重过时的浏览器访问你的网站，请使用 Hex，或者使用如下后备代码：

p {
    color: #FF0000;
    color: hsla(0, 100%, 50%, 1);
}

4、如果以上三点还是没能让你决定使用哪一种，请使用 HSLA。HSLA 允许你像 RGBA 一样使用透明度，而且更具备可访问性。

有哪些替代方案？

除了上面提到的方法，还有一些其他方法可以用来在 CSS 中设置颜色属性。

使用颜色名称：所有现代浏览器都支持 140 个标准 CSS 颜色名称。颜色名称是代表特定颜色的关键字，如 coral。
currentcolor 关键字：如果需要引用一个元素的颜色，可以使用这个关键字。
HWB 值： HWB 代表色相、白度、黑度。虽然目前 HTML 不支持它，但它被建议作为 CSS4 的新标准。
CMYK 值：CMYK 是青色、洋红色、黄色和黑色的组合。尽管计算机屏幕使用 RGB 值来显示颜色，但打印机通常使用 CMYK 颜色值来显示颜色。与 HWB 类似，CMYK 在 HTML 中尚不支持，不过也是被建议作为 CSS4 中的新标准。

最后

颜色在网页中起着至关重要的作用。在 CSS 中，我们能使用 RGB、Hex 和 HSL 等方法来定义颜色。在本文中，我们了解了用于在 CSS 中设置颜色属性的三种主要方法，以及它们的区别和各自的优缺点，还有可用于在 CSS 中定义颜色属性的其他替代方法。

尽管 HSLA 由于其人类可读性而比其他两种方法略有优势，但如果不是针对特定情况，则无关紧要。你可以使用任何你觉得舒服的方式。

看看不同的优缺点，每种方法都优于其他方法，总而言之，决定使用哪种方式在 CSS 中设置颜色属性应取决于以下三个因素：

偏好
可维护性
性能与效果

那么，你更喜欢用什么来设置 CSS 中的颜色？Hex、RGBA、HSLA 或其他什么？原因又是什么？在评论区告诉我吧。

英文原文地址：https://link.juejin.cn/?target=https%3A%2F%2Fblog.bitsrc.io%2Fhex-vs-rgb-vs-hsl-what-is-the-best-method-to-set-css-color-property-f45d2debeee
原文作者：Nethmi Wijesinghe

更多编程相关知识，请访问：编程视频！！

以上就是CSS颜色设置方法：HEX、RGB、HSL的简单对比的详细内容，更多文章请关注木庄网络博客！

返回前面的内容