Get best of the week

忘了RGB和HEX

CSS中有几种表示颜色的方法。HSL系统就是其中之一。在本文中，我将向您展示它为版图设计师带来的可能性。

什么是HSL？


HSL格式的名称由首字母Hue（hue），Saturate（饱和度）和Lightness（亮度或亮度）的组合派生而来。

色相是色轮上的颜色值，以度为单位设置。0°对应红色，120°对应绿色，240°对应蓝色。色相的值可以在0到359之间变化。



饱和度是颜色强度，以百分比为单位，从0％到100％。确定颜色与相同亮度的灰色之间的距离。

亮度表征颜色的亮度，并表示为0％到100％之间的百分比。较小的值会使颜色更暗，较高的值使颜色更亮，极端值0％和100％对应于黑白。



HSL的好处（）


HSL的主要优点是能够彼此独立地指定颜色特征。这为您带来了巨大的机会。您可以轻松地使颜色更亮，更暗，更饱和或变色。并同时保持其阴影。反之亦然-更改阴影而不更改其饱和度或亮度。通常，预处理器用于使用这些功能，但是您也可以不使用它们。

一些例子


相同色调的派生颜色


最常见的任务之一：制作一个采用单一基本阴影但包含多个变体的组件。在我的示例中，这是一个典型的警报，其中文本，背景和笔触的颜色具有相同的色相和饱和度，但亮度不同：

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}


看到多么美丽和清晰？显而易见，这是花朵的一个“家庭”。在其他格式中，它看起来像这样：

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

我不认识你，但是我很难看这样的代码来说这些颜色是否以某种方式联系在一起。

但是这些都是琐事。使用CSS自定义属性时，可以显示出真正的力量。

正如他们所说，请注意双手。如果我们将颜色的任何成分（例如，色调，变量）制成，则只需更改颜色中的基本色调，就可以轻松创建无限数量的成分变化。并且所有衍生产品都将被排斥。

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}



漂


在此示例中，关闭按钮的饱和度降低了。它仍然具有淡淡的蓝色，但是几乎是灰色。当您将鼠标悬停时，按钮会保留色调和饱和度，但会变得更暗。



为了解决这个问题，仅更改三个参数之一就足以获得派生但相似的颜色。使用rgb或hex时不容易做到。

与第一个示例一样，您可以轻松更改色调，而不会影响组件中的所有其他颜色特征。


颜色继承


最酷的技术之一：从另一个开始创建一个阴影。这可以通过在calc（）中简单加法来实现。

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

在此示例中，按钮的色相取决于容器的色相（色轮上+ 130°）。


因此，您可以通过一种简单的方式为您的站点创建成熟灵活的调色板，仅设置一种基本的阴影并从中开始。

如前面的示例所示，所有组件都将保持饱和度和亮度。



未来


在CSS Color Module Level 4规范中，描述了新功能：lab（）和lch（），用于以相同名称的格式指定颜色。LCH具有与hsl相同的灵活性，但是针对现代设备进行了许多改进。您可以在文章“ CSS中的LCH颜色：什么，为什么以及如何？”。

总


我认为，与其他格式相比，hsl格式具有极大的灵活性。与变量结合使用时，您几乎可以使用所有颜色来处理从预处理器到本机CSS的颜色。

PS对不起，标题很大：)

More articles:


All Articles