在 CSS 中使用 HSL 颜色

根据我的经验，我看到人们在这里 CSS 大用的颜色大多是 hex 和 RGB。最近，我开始看到更多 HSL 然而，我仍然认为使用颜色 HSL 所有的潜力都被忽略了。在本文的帮助下，我想向您展示 HSL 如何真正帮助我们更好地处理它？ CSS 中的颜色。

简介

一般，我们使用16进制颜色代码(16进制颜色)，这很好，但它们有几个问题:

• 它们是有限的；
• 通过阅读很难理解。

所谓有限，我的意思是不打开色轮，自己选择颜色，不容易改变颜色。此外，通过查看16进制代码来猜测颜色并不容易。

考虑下图：

我为天蓝色和深色选择了16种进制颜色。请注意，16种进制颜色不相关。很难说它们都是蓝色的，但颜色不同。

在现实生活中，你可能需要创建浅色或深色阴影来快速测试或验证某些内容。在你打开颜色选择器之前，这是不可能的。

幸运的是，值得庆幸的是，HSL 颜色可以帮助我们解决这个特定的问题，它为我们打开了很多可能性。

什么是 HSL？

HSL 基于色相、饱和度和亮度。 RGB 色轮。每种颜色都有一个角度以及饱和度和亮度值的百分比值。

让我们以我们之前讨论过的天蓝色为例。首先，我们像往常一样从颜色选择器中选择颜色，并确保获得它 HSL 值。

注意：我使用的是 Sketch 但是你可以使用任何你想要的设计工具。

考虑下图：

其中请注意 HSL 值。第一个是角度，它代表了我们所拥有的颜色的角度。在这种情况下，它是天蓝色的。一旦我们有了一个角度，我们就可以调整饱和度和亮度。

饱和度

饱和度控制颜色饱和度。0%而完全不饱和100%完全饱和。

亮度

至于亮度，它控制颜色的亮度或暗度。0%是黑色的，100%是白色的。

考虑下图：

这样，我们就有三个值，分别代表颜色、角度、饱和度和亮度。以下是我们在做什么 CSS 中使用颜色：

.element {     background-color: hsl(196, 73%, 62%); } 

通过修改颜色角度，我们可以得到类似于基本颜色的饱和度和亮度。这在处理新品牌颜色时非常有用，因为它可以创建一组相同的二级品牌颜色。

考虑下图：

你认为这三种颜色在颜色饱和度、深度或浅度上是相互关联的吗？这只能通过改变颜色的角度来实现。 HSL 颜色的优点。它比任何其他颜色类型都更容易阅读和编辑。

HSL 颜色的用例

悬挂时改变颜色

当悬挂时，特定组件中的颜色需要变暗，HSL 颜色可能是完美的选择。对按钮、卡片等组件很有帮助。

:root {   --primary-h: 221;   --primary-s: 72%;   --primary-l: 62%; }  .button {   background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); }  .button:hover {   --primary-l: 54%; } 

请注意我是怎么做到的 CSS 变量与 HSL 颜色组合在一起。悬挂时，我只需要改变亮度值。请记住，值越高，越轻。我们需要减少暗影的值。

有色组合

当我们有一个设计使用相同的颜色但不同的颜色时，HSL 考虑以下设计：

主题导航有原色，辅助导航有浅阴影。 HSL，我们可以通过改变亮度很容易得到浅阴影。

这在拥有多个主题的 UI 非常有用。我创建了两个主题，从一个主题到另一个主题，我只需要编辑色调度数。

第一个主题：

第二个主题：

调色板

我们可以通过改变亮度来改变整个亮度 UI 用尽可能多的颜色创造一组阴影。

这对于设计师为开发人员提供品牌每种颜色的色调的设计系统很有用。

自定义白色

通常，我们需要用白色为文本着色以使文本突出。这种白色很无聊，我们可以用我们拥有的颜色的非常浅的阴影来代替它。

考虑以下示例：

​

 注意右边的白色太多了。我们可以将其替换为自定义白色，该白色源自我们拥有的颜色的非常浅的阴影。在我看来，这要好得多。

按钮的变体

HSL 颜色的另一个有用用例是当我们有来自相同颜色但具有不同阴影的主要和次要选项时。在此示例中，辅助按钮具有非常浅的主色色调。HSL 颜色非常适合。

:root {
  --primary-h: 221;
  --primary-s: 72%;
  --primary-l: 62%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.button--secondary {
    --primary-l: 90%;
    color: #222;
}

.button--ghost {
    --primary-l: 90%;
    background-color: transparent;
    border: 3px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)); 
}

快速调整主要按钮变体，并且可以更多地扩展以供更广泛的使用。更改hue值将更改所有按钮的主题。

动态褪色效果 

在某些情况下，我们可能需要渐变来使其他色标具有非常浅的阴影。使用 HSL，我们可以为第二种颜色使用相同的颜色但具有不同的亮度值。

​

.section {
  background: linear-gradient(to left, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primary-s), 95%));
}

.section-2 {
  --primary-h: 167;
}

渐变从右侧以纯色开始，然后逐渐淡出至较浅的阴影。例如，这可以用于装饰英雄部分。

结论

当我们以正确的方式使用 HSL 颜色时，它们会非常强大。它们可以节省我们的时间和精力，甚至可以帮助我们探索如何将颜色应用于设计的选项。