现在我想在颜色中使用颜色操作,如颜色：变暗(@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,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,36%) */
@real_target_color: #681844; /* Real Target #681844 = hsl(327,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％值.
