css hsl与hsla颜色表示方法有什么区别

坦率地说，HSL 和 HSLA 之间的主要区别在于透明度。
HSLA 支持透明度，HSL 不支持。
我们先来说说最重要的事情。
HSL是基于色相、饱和度、明度三要素的色彩模型。
它只能代表纯色。
例如，hsl(2 00,1 00%,5 0%) 是亮蓝色，没有透明度控制。
在我们去年进行的项目中，大约有3 000个项目是使用HSL实施的，因为它们不需要透明效果。

还有一点：HSLA在HSL的基础上增加了一个alpha通道，可以创建半透明或者透明的效果。
例如，hsla(2 00,1 00%,5 0%,0.5 ) 是透明度为 5 0% 的蓝色。
很多人都没有注意到这一点，但其实它在设计视觉层次时特别有用，比如悬停效果、渐变过渡等。

一开始我也以为HSL和HSLA的兼容性是个问题，后来发现错了。
两者都被现代浏览器广泛支持，语法兼容性强，并且易于切换。
等等，还有一件事。
选择HSL还是HSLA主要取决于您的需求。
如果不需要透明性，可以使用HSL来简化代码；如果您需要透明度或半透明，例如创建悬停按钮或重叠元素，则应使用 HSLA。

我认为值得尝试的是，在需要透明度的场景中，使用HSLA可以让你更灵活地控制视觉效果。
但还要记住，过度使用透明效果会使页面看起来很混乱，因此适度是关键。

CSS颜色表示法

哎，这让我刚学CSS的时候很头疼。
让我告诉你我陷入的陷阱。

当时，我刚刚接受了一份建立小型网站的工作。
客户的要求是“天蓝色”。
请告诉我，这叫什么？我想我应该使用颜色名称，因为它更容易。
结果？在旧版本的 IE 中，这种“天蓝色”按原样显示为“浅灰色”。
你觉得有趣不有趣？然后我切换到十六进制 8 7 CEEB，这是正确的。
在本课程中，如果颜色命名约定不可用，请避免使用它们，尤其是在进行正式项目时。
那一年，我正在合作的一个小型网站客户端已经使用了很长一段时间的旧IE。
最后我不得不切换到十六进制来得到解决方案。

然后我创建了一个活动页面，需要很多颜色。
十六进制数字很有用，但写起来也会让你头晕。
我只用RGB。
例如，当我看FF5 7 3 3 时，红色很多，绿色很少，几乎没有黄色。
这使得思考颜色变得更加容易。
去年，我参与开发了一个电子商务网站。
改变颜色时，RGB 很容易使用，我可以轻松调整它。

然后，当您创建应用程序的界面时，您可能需要匹配背景和文本颜色。
如果你想一想，如果背景是暗的，文字就会亮。
如果背景是浅色的，文字就会是深色的。
这就是 HSL 派上用场的地方。
例如，HSL(0,1 00%,5 0%)是鲜红色，背景是HSL(0,1 00%,9 5 %)，白色略带红色，所以文字是HSL(0,1 00%,1 0%)，黑色略带红色，所以它们看起来很和谐。
两年前，我给美食app配了颜色，用HSL调整了背景和文字。
效果确实不错。

透明，我也用。
以前，网页要么完全透明，要么完全不透明。
通过使用 RGBA 和 HSLA，您现在可以调整为多种灰度。
例如，遮罩层必须具有半透明颜色。
我通常使用 rgba(0,0,0,0.5 )，它是全黑但半透明的。
今年我创作了一个摄影作品集。
我在照片下方添加了 HSLA (0,0%,5 0%,0.3 ) 的半透明灰色背景。
照片很突出，背景看起来很漂亮。

一般都是盲目使用颜色名称，随便使用十六进制数字和RGB，根据情况使用HSL、RGBA、HSLA。
以上是我这1 0年来踩坑的经验。