8

我已经在我的网站中使用了颜色主题，例如，我有一个标准的十六进制颜色用于链接状态常规/悬停/活动。

现在我想在 LESS 中使用颜色操作，例如color:darken(@base_color, x%);

所以我的问题是：

如果我在“变暗”操作后知道我的基色和输出颜色，

我怎么知道给变暗操作以产生我的输出颜色的百分比是多少？

例如：如果我从 #952262 -> #681744 出发，我的百分比是多少？

也许有一个网站可以进行这些转换？

希望答案不是“反复试验”。

4

3 回答 3

19

有一些挑战和注意事项

通常，人们不会使用函数darken()来获取他们已经知道想要的颜色（他们只是输入他们已经知道想要的颜色值）。但是，我会假设这个问题的背后还有更多。

darken()功能_

darken()LESS的hsl功能会影响从其设置（色调、饱和度、亮度）的角度考虑的颜色的“亮度”或“亮度”部分。这是从该视图考虑的两种颜色（基于此站点，我注意到站点之间存在一些差异-有些可能比其他颜色更准确）：

#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()。

于 2013-05-01T14:15:09.137 回答
8

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 实现，您可以在 LESS 中使用 javascript 插值（带反引号）和 javascript 函数做更多事情。

于 2013-05-01T13:50:12.040 回答
7

我创建了一个建议颜色功能的工具，因为这每天都会困扰我。它列出了从一种颜色到另一种颜色的大多数 LESS 功能，这样您就可以专注于使用darken或softlight使用一种颜色，这在您的设计方面更有意义。

建议颜色功能过渡

于 2015-11-26T08:39:21.733 回答