Less 颜色操作函数

颜色操作通常使用与更改值相同的单位进行参数设置,百分比则作为绝对值处理,因此将 10%的值增加 10%,结果就是 20%。将选项方法参数设置为相对,可获得相对百分比。使用相对百分比时,10% 的值增加 10%,结果为 11%。数值被限制在其允许的范围内,不会环绕。在显示返回值的地方,我们使用了格式,除了你通常要使用的十六进制版本外,还清楚地显示了每个函数的功能。

saturate

按绝对值增加 HSL 色彩空间中颜色的饱和度。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: saturate(hsl(90, 80%, 50%), 20%)

输出: #80ff00 // hsl(90, 100%, 50%)

Less 颜色操作函数

desaturate

按绝对值降低 HSL 色彩空间中颜色的饱和度。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: desaturate(hsl(90, 80%, 50%), 20%)

输出: #80cc33 // hsl(90, 60%, 50%)

Less 颜色操作函数

lighten

按绝对值增加 HSL 色彩空间中颜色的亮度。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: lighten(hsl(90, 80%, 50%), 20%)

输出: #b3f075 // hsl(90, 80%, 70%)

Less 颜色操作函数

darken

按绝对值降低 HSL 色彩空间中颜色的亮度。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: darken(hsl(90, 80%, 50%), 20%)

输出: #4d8a0f // hsl(90, 80%, 30%)

Less 颜色操作函数

fadein

降低颜色的透明度(或增加不透明度),使其更不透明。

对不透明颜色无效。要向另一个方向渐变,请使用 fadeout。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: fadein(hsla(90, 90%, 50%, 0.5), 10%)

输出: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

增加颜色的透明度(或降低不透明度),使其不那么不透明。要向另一个方向渐变,使用 fadein。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

  • method: 可选项,设置为 relative 时,调整值将相对于当前值。

返回: color

示例: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

输出: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

设置颜色的绝对不透明度。无论颜色是否已经有不透明度值,都可以应用。

参数:

  • color: 一个颜色对象。

  • amount: 百分比 0-100%。

返回: color

示例: fade(hsl(90, 90%, 50%), 10%)

输出: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

沿任一方向旋转颜色的色调角度。

虽然角度范围是 0-360,但它应用的是模数 360 操作,因此您可以输入更大的值(或负值),它们也会被包围,例如 360 和 720 的角度会产生相同的结果。请注意,颜色是通过 RGB 转换传递的,而 RGB 转换不会保留灰色的色相值(因为在没有饱和度的情况下,色相没有任何意义),因此请确保以保留色相的方式应用函数,例如不要这样做:

@c: saturate(spin(#aaaaaa, 10), 10%);

不如这样做:

@c: spin(saturate(#aaaaaa, 10%), 10);

颜色总是以 RGB 值返回,因此将旋转应用于灰色值不会有任何效果。

参数:

  • color: 一个颜色对象。

  • angle: 旋转的度数(+ 或 -)。

返回: color

示例:

spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)

输出:

#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)

Less 颜色操作函数

mix

将两种颜色按不同比例混合在一起。计算中包括不透明度。

参数:

  • color1: 一个颜色对象。

  • color2: 一个颜色对象。

  • weight: 可选项,两种颜色之间的平衡点百分比,默认为 50%。

返回: color

示例:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

输出:

#800080
rgba(75, 25, 0, 0.75)

Less 颜色操作函数

tint

以可变比例将颜色与白色混合。这与调用 mix(#ffffffff, @color, @weight) 相同

参数:

  • color: 一个颜色对象。

  • weight: 可选项,色彩和白色之间的百分比平衡点,默认为 50%。

返回: color

示例:

no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%);

输出:

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

Less 颜色操作函数

shade

以可变比例将颜色与黑色混合。这与调用 mix(#000000, @color, @weight) 相同

参数:

  • color: 一个颜色对象。

  • weight: 可选项,颜色和黑色之间的百分比平衡点,默认为 50%。

返回: color

示例:

no-alpha: shade(#007fff, 50%); 
with-alpha: shade(rgba(00,0,255,0.5), 50%);

输出:

no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

Less 颜色操作函数

greyscale

去除 HSL 色彩空间中颜色的所有饱和度;与调用 desaturate(@color, 100%) 相同。

由于饱和度不受色相的影响,因此生成的颜色映射可能会有些暗淡或浑浊;由于 luma 提取的是感知亮度而非线性亮度,因此可能会提供更好的结果,例如,greyscale('#0000ff') 将返回与 greyscale('#00ff00') 相同的值,尽管它们在人眼看来亮度差别很大。

参数: color: 一个颜色对象。

返回: color

示例: greyscale(hsl(90, 90%, 50%))

输出: #808080 // hsl(90, 0%, 50%)

Less 颜色操作函数

请注意,生成的灰色看起来比原始的绿色更暗,尽管其亮度值是相同的。

与使用 luma 进行比较(用法不同,因为 luma 返回的是单个值,而不是颜色):

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

输出: #cacaca

Less 颜色操作函数

这一次,灰色的亮度看起来与绿色差不多,但其数值实际上更高。

contrast

从两种颜色中选择与另一种颜色对比度最大的一种。

这对于确保一种颜色在背景中的可读性非常有用,对于符合可访问性要求也非常有用。该功能与 Compass for SASS 中的对比度功能工作原理相同。根据 WCAG 2.0,比较颜色时使用的是经伽马校正的 luma 值,而不是亮度。

明暗参数可以任选一个顺序提供--该功能将计算它们的 luma 值并自动分配明暗,这意味着您无法使用该功能通过颠倒顺序来选择对比度最小的颜色。

参数:

  • color: 要与之比较的颜色对象。

  • dark: 可选的 - 指定的深色(默认为黑色)。

  • light: 可选的 - 指定的灯光颜色(默认为白色)。

  • threshold: 可选的- 0-100% 的百分比,指定从 "暗 "到 "亮 "的过渡位置(默认值为 43%,与 SASS 一致)。例如,您可以用它来决定 50% 灰色背景下的文字是黑色还是白色。一般来说,"浅色 "调色板可以设置得低一些,而 "深色 "调色板则可以设置得高一些。

返回: color

示例:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

输出:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

这些示例使用上述计算出的颜色作为背景和前景色;您可以看到,您永远不会得到 "白底黑字 "或 "黑底白字 "的结果,尽管可以使用阈值来允许较低对比度的结果,如最后一个示例所示:

Less 颜色操作函数

说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号