Sco*_*ttS 18
有一些挑战和注意事项
通常情况下,人们不会使用喜欢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 generate(#671844),因为目标仍然产生相同的11%值darken().
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.
如果你使用较少的javascript实现,你可以使用jESS内插(带有反向标记)和jESS内部的javascript函数做更多.
