颜色操作通常采用与它们正在更改的值相同的单位的参数,并且百分比作为绝对值处理,因此将 10% 的值增加 10% 会导致 20%。将选项方法参数设置为 relative 以获得相对百分比。当使用相对百分比时,将 10% 的值增加 10% 会导致 11%。值被限制在允许的作用域内;他们不环绕。在显示返回值的地方,除了你通常会使用的十六进制版本之外,我们还使用了使每个函数的功能一目了然的格式。
¥Color operations generally take parameters in the same units as the values they are changing, and percentages are handled as absolutes, so increasing a 10% value by 10% results in 20%. Set the option method parameter to relative for relative percentages. When using relative percentages increasing a 10% value by 10% results in 11%. Values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we've used formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with.
saturate
按绝对量增加 HSL 颜色空间中颜色的饱和度。
¥Increase the saturation of a color in the HSL color space by an absolute amount.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:saturate(hsl(90, 80%, 50%), 20%)
¥Example: saturate(hsl(90, 80%, 50%), 20%)
输出:#80ff00 // hsl(90, 100%, 50%)
¥Output: #80ff00 // hsl(90, 100%, 50%)
➜
desaturate
按绝对量降低 HSL 颜色空间中颜色的饱和度。
¥Decrease the saturation of a color in the HSL color space by an absolute amount.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:desaturate(hsl(90, 80%, 50%), 20%)
¥Example: desaturate(hsl(90, 80%, 50%), 20%)
输出:#80cc33 // hsl(90, 60%, 50%)
¥Output: #80cc33 // hsl(90, 60%, 50%)
➜
lighten
按绝对量增加 HSL 颜色空间中颜色的亮度。
¥Increase the lightness of a color in the HSL color space by an absolute amount.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:lighten(hsl(90, 80%, 50%), 20%)
¥Example: lighten(hsl(90, 80%, 50%), 20%)
输出:#b3f075 // hsl(90, 80%, 70%)
¥Output: #b3f075 // hsl(90, 80%, 70%)
➜
darken
按绝对量降低 HSL 颜色空间中颜色的亮度。
¥Decrease the lightness of a color in the HSL color space by an absolute amount.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:darken(hsl(90, 80%, 50%), 20%)
¥Example: darken(hsl(90, 80%, 50%), 20%)
输出:#4d8a0f // hsl(90, 80%, 30%)
¥Output: #4d8a0f // hsl(90, 80%, 30%)
➜
fadein
降低颜色的透明度(或增加不透明度),使其更不透明。
¥Decrease the transparency (or increase the opacity) of a color, making it more opaque.
对不透明颜色没有影响。要朝另一个方向淡入淡出,请使用 fadeout
。
¥Has no effect on opaque colors. To fade in the other direction use fadeout
.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:fadein(hsla(90, 90%, 50%, 0.5), 10%)
¥Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)
输出:rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
¥Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout
增加颜色的透明度(或降低不透明度),使其不透明。要朝另一个方向淡入淡出,请使用 fadein
。
¥Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein
.
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
amount
:百分比 0-100%。
¥amount
: A percentage 0-100%.
method
:可选,设置为 relative
以相对于当前值进行调整。
¥method
: Optional, set to relative
for the adjustment to be relative to the current value.
返回:color
¥Returns: color
示例:fadeout(hsla(90, 90%, 50%, 0.5), 10%)
¥Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)
输出:rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
¥Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
fade
设置颜色的绝对不透明度。可以应用于颜色,无论它们是否已经具有不透明度值。
¥Set the absolute opacity of a color. Can be applied to colors whether they already have an opacity value or not.
参数:
¥Parameters:
返回:color
¥Returns: color
示例:fade(hsl(90, 90%, 50%), 10%)
¥Example: fade(hsl(90, 90%, 50%), 10%)
输出:rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
¥Output: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
spin
沿任一方向旋转颜色的色调角度。
¥Rotate the hue angle of a color in either direction.
虽然角度作用域是 0-360,但它应用了 mod 360 操作,因此你可以传入更大(或负)的值,它们将环绕,例如 360 度和 720 度的角度将产生相同的结果。请注意,颜色是通过 RGB 转换传递的,它不会保留灰色的色调值(因为没有饱和度时色调没有意义),因此请确保以保留色调的方式应用函数,例如不要 做这个:
¥While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colors are passed through an RGB conversion, which doesn't retain hue value for greys (because hue has no meaning when there is no saturation), so make sure you apply functions in a way that preserves hue, for example don't do this:
@c: saturate(spin(#aaaaaa, 10), 10%);
改为这样做:
¥Do this instead:
@c: spin(saturate(#aaaaaa, 10%), 10);
颜色始终作为 RGB 值返回,因此将 spin
应用于灰度值将不会执行任何操作。
¥Colors are always returned as RGB values, so applying spin
to a grey value will do nothing.
参数:
¥Parameters:
返回:color
¥Returns: color
示例:
¥Example:
spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)
输出:
¥Output:
#f2a60d
#f20d59
➜
➜
mix
将两种颜色按可变比例混合在一起。不透明度包括在计算中。
¥Mix two colors together in variable proportion. Opacity is included in the calculations.
参数:
¥Parameters:
color1
:颜色对象。
¥color1
: A color object.
color2
:颜色对象。
¥color2
: A color object.
weight
:可选,两种颜色之间的百分比平衡点,默认为 50%。
¥weight
: Optional, a percentage balance point between the two colors, defaults to 50%.
返回:color
¥Returns: color
示例:
¥Example:
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
输出:
¥Output:
#800080
rgba(75, 25, 0, 0.75)
➜
tint
以可变比例将颜色与白色混合。与调用 mix(#ffffff, @color, @weight)
相同
¥Mix color with white in variable proportion. It is the same as calling mix(#ffffff, @color, @weight)
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
weight
:可选,颜色和白色之间的百分比平衡点,默认为 50%。
¥weight
: Optional, a percentage balance point between color and white, defaults to 50%.
返回:color
¥Returns: color
示例:
¥Example:
no-alpha: tint(#007fff, 50%);
with-alpha: tint(rgba(00,0,255,0.5), 50%);
输出:
¥Output:
no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);
➜
shade
以可变比例混合颜色和黑色。与调用 mix(#000000, @color, @weight)
相同
¥Mix color with black in variable proportion. It is the same as calling mix(#000000, @color, @weight)
参数:
¥Parameters:
color
:颜色对象。
¥color
: A color object.
weight
:可选,颜色和黑色之间的百分比平衡点,默认为 50%。
¥weight
: Optional, a percentage balance point between color and black, defaults to 50%.
返回:color
¥Returns: color
示例:
¥Example:
no-alpha: shade(#007fff, 50%);
with-alpha: shade(rgba(00,0,255,0.5), 50%);
输出:
¥Output:
no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);
➜
greyscale
从 HSL 颜色空间中的颜色中移除所有饱和度;与调用 desaturate(@color, 100%)
相同。
¥Remove all saturation from a color in the HSL color space; the same as calling desaturate(@color, 100%)
.
由于饱和度不受色调影响,因此生成的颜色映射可能有些暗淡或浑浊;luma
可能会提供更好的结果,因为它提取的是感知亮度而不是线性亮度,例如 greyscale('#0000ff')
将返回与 greyscale('#00ff00')
相同的值,尽管它们在人眼看来的亮度有很大不同。
¥Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; luma
may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff')
will return the same value as greyscale('#00ff00')
, though they appear quite different in brightness to the human eye.
参数:color
:颜色对象。
¥Parameters: color
: A color object.
返回:color
¥Returns: color
示例:greyscale(hsl(90, 90%, 50%))
¥Example: greyscale(hsl(90, 90%, 50%))
输出:#808080 // hsl(90, 0%, 50%)
¥Output: #808080 // hsl(90, 0%, 50%)
➜
请注意,生成的灰色看起来比原始绿色更暗,即使其亮度值相同。
¥Notice that the generated grey looks darker than the original green, even though its lightness value is the same.
与使用 luma
比较(用法不同,因为 luma
返回单个值,而不是颜色):
¥Compare with using luma
(usage is different because luma
returns a single value, not a color):
@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);
输出:#cacaca
¥Output: #cacaca
➜
这次灰色的明度看起来和绿色差不多,但实际上它的值更高。
¥This time the grey's lightness looks about the same as the green, though its value is actually higher.
contrast
选择两种颜色中哪一种颜色与另一种颜色形成最大对比。
¥Choose which of two colors provides the greatest contrast with another.
这对于确保颜色在背景下可读很有用,这对于可访问性合规性也很有用。此功能与 Compass for SASS 中的对比函数 的工作方式相同。根据 WCAG 2.0,使用伽玛校正后的 luma 值而不是亮度来比较颜色。
¥This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their gamma-corrected luma value, not their lightness.
明暗参数可以按任意顺序提供 - 该函数将计算它们的亮度值并自动分配明暗,这意味着你不能使用此函数通过颠倒顺序来选择对比度最小的颜色。
¥The light and dark parameters can be supplied in either order - the function will calculate their luma values and assign light and dark automatically, which means you can't use this function to select the least contrasting color by reversing the order.
参数:
¥Parameters:
color
:要比较的颜色对象。
¥color
: A color object to compare against.
dark
:optional - 指定的深色(默认为黑色)。
¥dark
: optional - A designated dark color (defaults to black).
light
:optional - 指定的亮色(默认为白色)。
¥light
: optional - A designated light color (defaults to white).
threshold
:optional - 百分比 0-100%,指定从 "dark" 到 "light" 的过渡位置(默认为 43%,与 SASS 匹配)。这用于以一种或另一种方式偏置对比度,例如,允许你决定 50% 的灰色背景是否应产生黑色或白色文本。你通常会将 'lighter' 调色板设置得较低,'darker' 调色板设置得较高。
¥threshold
: optional - A percentage 0-100% specifying where the transition from "dark" to "light" is (defaults to 43%, matching SASS). This is used to bias the contrast one way or another, for example to allow you to decide whether a 50% grey background should result in black or white text. You would generally set this lower for 'lighter' palettes, higher for 'darker' ones.
返回:color
¥Returns: color
示例:
¥Example:
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%);
}
输出:
¥Output:
p {
a: #000000
b: #ffffff
c: #dddddd
d: #000000
e: #ffffff
}
这些示例使用上面计算的背景和前景颜色;你可以看到你永远不会以白底白字或黑底黑字结束,尽管可以使用阈值来允许较低对比度的结果,如上一个示例所示:
¥These examples use the above calculated colors for background and foreground; you can see that you never end up with white-on-white, nor black-on-black, though it's possible to use the threshold to permit lower-contrast outcomes, as in the last example: