冲浪网站优化 / Products Center

颜色操作函数

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%, not 11%, and 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

Increase the saturation of a color in the HSL color space by an absolute amount.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： saturate(hsl(90, 80%, 50%), 20%)

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

80e619➜ 80ff00

desaturate

Decrease the saturation of a color in the HSL color space by an absolute amount.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： desaturate(hsl(90, 80%, 50%), 20%)

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

80e619➜ 80cc33

lighten

Increase the lightness of a color in the HSL color space by an absolute amount.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： lighten(hsl(90, 80%, 50%), 20%)

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

80e619➜ b3f075

darken

Decrease the lightness of a color in the HSL color space by an absolute amount.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： darken(hsl(90, 80%, 50%), 20%)

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

80e619➜ 4d8a0f

fadein

Decrease the transparency (or increase the opacity) of a color, making it more opaque.

Has no effect on opaque colors. To fade in the other direction use fadeout.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： fadein(hsla(90, 90%, 50%, 0.5), 10%)

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

fadeout

Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： fadeout(hsla(90, 90%, 50%, 0.5), 10%)

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

fade

Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.

参数：
•color: 颜色对象。
•amount: 百分比 0-100%。

返回值： color

案例： fade(hsl(90, 90%, 50%), 10%)

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

spin

Rotate the hue angle of a color in either direction.

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);

Colors are always returned as RGB values, so applying spin to a grey value will do nothing.

参数：
•color: 颜色对象。
•angle: A number of degrees to rotate (+ or -).

返回值： color

案例：
spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)

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

f2330d➜ f2a60d

f2330d➜ f20d59

mix

Mix two colors together in variable proportion. Opacity is included in the calculations.

参数：
•color1: 颜色对象。
•color2: 颜色对象。
•weight: Optional, a percentage balance point between the two colors, defaults to 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)

ff0000+ 0000ff➜ 800080

greyscale

Remove all saturation from a color in the HSL color space; the same as calling desaturate(@color, 100%).

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: 颜色对象。

返回值： color

案例： greyscale(hsl(90, 90%, 50%))

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

80f20d➜ 808080

Notice that the generated grey looks darker than the original green, even though its lightness value is the same.

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

80f20d➜ 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.

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 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.

参数：
•color: A color object to compare against.
•dark: optional - A designated dark color (defaults to black).
•light: optional - A designated light color (defaults to white).
•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

案例：
contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%), #000000, #ffffff, 40%);
contrast(hsl(90, 100%, 50%), #000000, #ffffff, 60%);

输出：
#000000 // black
#ffffff // white
#dddddd
#000000 // black
#ffffff // white

These examples use the 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 案例：

000000ffffffdddddd000000ffffff

Improve this section.