有几个挑战和注意事项

通常情况下，人们不会使用像darken()这样的函数来获取他们已经知道的最终颜色（他们只是将他们已经知道的颜色值放在他们想要的颜色值）。但是，我认为这个问题背后还有更多的问题。

darken()功能

The darken() function of LESS会影响从hsl设置（色调，饱和度，亮度）的角度考虑的颜色的“亮度”或“亮度”部分。以下是从该视图中考虑的两种颜色（based on this site，我注意到网站之间存在一些差异 - 有些可能比其他颜色更准确）：

#952262 = hsl(327, 63%, 36%)
#681744 = hsl(327, 64%, 25%)

因此，您寻找的暗度值可以通过减法36% - 25% = 11%从该站点计算手。将其插入您的功能：

darken(@base_color, 11%);

产量

#671844 /* not 681744! */

嘿！那与我的目标不匹配！

请注意，上面的s（饱和度）值显示从您的基地到目标的1%不同，这意味着从技术上讲，您无法从基色到目标颜色纯粹通过darken()功能。相反，您需要使用其他函数来调整s值，或者您的目标应略微调整为以下值（将s保持在63%）：

#681844 = hsl(327, 63%, 25%)

但是这个数字（#681844）仍然与LESS输出（#671844）不匹配。该网站将LESS输出显示为hsl(327, 62%, 25%)（注意饱和度值降至62%）。我怀疑这意味着网站计算和LESS函数计算之间的舍入计算有何不同。这可能就是为什么你的原始数字在饱和状态下被1%关闭的原因，无论你使用的程序与网站的不同程度如何。这可能不是一个大问题，因为它会让您接近目标值。

使用LESS计算

现在，根据您的实际操作，您可以使用LESS计算该百分比，而不是使用lightness()函数手动计算它。假设您已根据网站将目标调整为#681844。然后这是获得您想要的百分比的示例（我使用假属性color-calc来显示计算：

@base_color: #952262;  /* Base #952262 = hsl(327, 63%, 36%) */
@real_target_color: #681844; /* Real Target #681844 = hsl(327, 63%, 25%) */
@color_calc: (lightness(@base_color) - lightness(@real_target_color));

.test {
  color-calc: @color_calc;
  color: darken(@base_color, 11%);
}

输出：

.test {
  color-calc: 11%;
  color: #671844;
}

请注意，它计算了黑暗中11%的差异。此外，请注意，由于（我认为）舍入问题，它仍然会以略微不同于目标的值结束。插入最终值LESS会生成（#671844），因为目标仍会为11%生成相同的darken()值。

Answer 2

LESS具有 lightness() 功能，可返回hsl空间中颜色的亮度通道。

所以，显然

lightness(hsl(90, 100%, 50%))

将返回

50%

但你可以做一些更复杂的事情，比如mixin，它可以计算两种颜色之间的亮度差异：

@nice-blue: #5B83AD;
@lighter-blue: #6F92B7;

.test(@color1, @color2) {
  @lightdif: (lightness(@color1) - lightness(@color2));
  color1: @color1;
  color2: @color2;
  lightness-dif:  @lightdif;
}

.test {
   .test(@lighter-blue, @nice-blue);
   output-color: lighten(@nice-blue, @lightdif);
}

会返回：

.test {
  color1: #6f92b7;
  color2: #5b83ad;
  lightness-dif: 6%;
  output-color: #6f92b7;
}

在你的情况下（＃952262 - ＆gt;＃681744），lightness-dif将是11％。

现在您可以稍微玩一下，例如使用防护装置，您可以定义哪种颜色更暗/更亮并使用绝对差异，取决于您想要使用它的确切位置。

要获得更多色彩操作，您可以阅读“功能参考”下的lesscss.org - ＆gt; “颜色功能”。

如果你使用较少的javascript实现，你可以使用jESS插值（带有反向标记）和jESS内的javascript函数做更多的事情。

Answer 3

我创建了一个tool that suggests color functions，因为这会让我每天都感到烦恼。它列出了从一种颜色到另一种颜色的大多数LESS函数，因此您可以专注于使用darken或softlight颜色，在设计方面更有意义。

色彩操作少

3 个答案:

有几个挑战和注意事项