我已经在我的网站中使用颜色主题，例如，我有一个标准的十六进制颜色用于链接状态常规/悬停/活动。
现在我想在 LESS 中使用颜色操作，例如 color:darken(@base_color, x%);
所以我的问题是：
如果我知道“变暗”操作后的基色和输出颜色，
我怎么知道用什么 % 进行变暗操作来产生我的输出颜色？
例如：如果我从 #952262 -> #681744 出发，我的百分比是多少？
也许有一个网站可以进行这些转换？
希望答案不是“反复试验”。
【问题讨论】：
通常，人们不会使用像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)，因为目标仍会为 darken() 生成相同的 11% 值。
【讨论】：
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 -> #681744)，lightness-dif 将是 11%。
现在您可以稍微玩一下，例如使用守卫，您可以定义哪种颜色更深/更浅，并使用绝对差异，这取决于您想要使用它的确切用途。
更多颜色操作可以阅读“函数参考”->“颜色函数”下的lesscss.org。
如果您使用的是 less 的 javascript 实现，您可以使用 javascript 插值（带有反引号）和 LESS 中的 javascript 函数做更多事情。
【讨论】：
我创建了一个tool that suggests color functions，因为这每天都会困扰我。它列出了从一种颜色到另一种颜色的大部分 LESS 函数，这样您就可以专注于将darken 或softlight 与颜色一起使用，这对您的设计更有意义。
【讨论】：