Question

我正在尝试将一些LESS颜色函数（变亮/变暗）转换为使用CSS颜色混合函数，这样我就可以使用CSS变量。

我有一个在内部使用这些的依赖项，并编写了一个NPM安装后脚本，可以自动转换它们。转换工作正常，但我面临的问题是输出关闭。

以下是输出示例：

对于颜色混合，我使用：

color-mix(in srgb, white 5%, var(--my-color)); // lighten(@mycolor, 5%);
color-mix(in srgb, white 50%, var(--my-color)); // lighten(@mycolor, 50%);

你知道我如何才能更紧密地匹配我从LESS看到的东西吗？

Answer 1

LESS＜code＞lighten（）＜/code＞处理HSL颜色值的亮度部分请参阅此处的文档。因此，如果您的起始颜色是#348298，将转换为hsl（193，49%，40%），然后使用LESS将其减亮50%意味着50%将被添加到该颜色的亮度（最后）值中，因此生成的颜色为hsl。

您可以在CSS中复制这一点，只需使用HSL格式的颜色并调整亮度值。因此，可以使用CSS变量来处理色调和饱和度分量，但不能使用亮度。

颜色混合的效果截然不同，它将两种颜色按指定比例混合在一起。我相信你可以通过实验找到产生你想要的颜色的值，但我不知道如何从数学上做到这一点。

:root {
  --h1: 193;
  --s1: 49%;
}
body {
  display: flex;
  gap: 2px;
  font-family: sans-serif;
}
div {
  color: white;
  background-color: hsl(var(--h1), var(--s1), 40%); /* base colour */
  flex: 1;
  text-align: center;
  padding: 1em;
}
.m1 {
  background-color: hsl(var(--h1), var(--s1), 45%); /* five percent added to luminance */
}
.m2 {
  background-color: hsl(var(--h1), var(--s1), 90%); /* fifty percent added to luminance */
}

<div>Base</div>
<div class="m1">add 5% luminance</div>
<div class="m2">add 50% luminance</div>

友情链接