颜色操作少 [英] Color operations in less

问题描述

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

I'm already using color theme in my website, where, for example I have a standard hex color for link states regular/hover/active.

想要在LESS中使用颜色操作，如 color：darken（@base_color，x％）;

Now I want to use color operations in LESS like color:darken(@base_color, x%);

所以我的问题是：

So my question is:

如果我知道我的基本颜色和'darken'操作后的输出颜色，

If I know my base color and my output color after the 'darken' operation,

我如何知道什么％给予变暗操作以产生我的输出颜色？

how do I know what % to give the darken operation to produce my output color?

例如：如果我要从＃952262 - ＃681744什么是我的％？

eg: If i'm going from #952262 -> #681744 what would be my %?

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

Maybe there's a site that does these conversions?

希望答案不是'Trial and error'。

Hopefully the answer is not 'Trial and error'.

推荐答案

有很少的挑战和注意事项

不使用像 darken（）的函数来获得他们已经知道他们想要结束的颜色（他们只是输入他们已经知道他们想要的颜色值）。

Has A Few Challenges and Caveats

Normally, people do not use a function like darken() to get a color that they already know they want to end up at (they just put the color value they already know they want). However, I will assume there is more behind this question than that.

darken（）函数

The darken() Function

darken（）函数影响从其 hsl 设置（色调，饱和度）的角度考虑的颜色的亮度或亮度 ，亮度）。这是您从该视图考虑的两种颜色（基于此网站），我注意到了一些网站 - 有些可能比别人更准确）：

The darken() function of LESS affects the "brightness" or "lightness" portion of a color considered from the viewpoint of its hsl settings (hue, saturation, lightness). Here's your two colors considered from that view (based on this site, I have noticed some variations between sites--some are probably more accurate than others):

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

可以通过减去 36％ - 25％= 11％从该网站计算的手。将它插入您的函数：

So the darkness value you seek can be hand calculated from that site, by just a subtraction, 36% - 25% = 11%. Plugging that into your function:

darken(@base_color, 11%);

产生

#671844 /* not 681744! */ 

嘿！

Hey! That Didn't Match My Target!

请注意，上面的 s （饱和度）值显示因为 1％从你的基础到你的目标，这意味着技术上你不能从你的基本颜色到目标颜色纯粹通过 darken （）函数。相反，你需要使用另一个函数来调整 s 值，或者你的目标应该稍微调整到以下（保持 s 63％）：

Notice that the s (saturation) value above shows as different by 1% from your base to your target, which means that technically you cannot get from your base color to the target color purely through the darken() function. Instead, you either need to use another function to tweak the s value also, or your target should be adjusted slightly to the following (which keeps s at 63%):

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

＃681844 ）仍然不匹配LESS输出（＃671844 ）。网站显示LESS输出为 hsl（327，62％，25％）（注意饱和度值降至 62％）。我怀疑这意味着网站计算和LESS函数计算之间的舍入计算的差异。这可能是为什么你的原始号码在饱和度以及你的原始号码关闭由于 1％，无论你使用的程序与网站也不同。

But that number (#681844) still does not match the LESS output (#671844). The website shows the LESS output as being hsl(327, 62%, 25%) (notice the saturation value dropped to 62%). I suspect what this means is a difference in rounding calculations between the website calculations and the LESS function calculations. This may well be why your original number was off by 1% on saturation as well, whatever program you used rounded differently than the website also. This is probably not a big issue, as it gets you close to your target value.

使用LESS来计算

现在，根据你实际做什么，你可以使用LESS计算该百分比，而不是手动计算它，使用 lightness（）函数。假设您已根据网站调整您的目标为＃681844 。然后，这是一个例子，获得你想要的百分比（我使用假的属性 color-calc 显示计算：

Now, depending on what your actually doing, you can use LESS to calculate that percentage, instead of hand calculating it, using the lightness() function. Assume you had adjusted your target to #681844 based off the website. Then this is an example of getting the percentage you want (I use a fake property color-calc to show the calcuation:

@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生成$ c>＃671844 ）仍然会为 darken（）产生相同的 11％ $ c>。

Notice that it calculated the 11% difference in darkness. Also, notice that it still ends up with a value slightly different than target because of that (I suppose) rounding issue. Plugging in the final value LESS generates (#671844) as the target still yields the same 11% value for darken().

这篇关于颜色操作少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！