13.15. Sass color function

rgb(red, green, blue)

Create a Red-Green-Blue (RGB) color. Where R is “red” for red, G is “green” green, and B is “blue” blue.

Example: rgb (0,0,255)

hsl(hue, saturation, lightness)

Create a color from the values of hue, saturation, and luminance (lightness).

Example: hsl (120,100%, 50%); // green hsl (120,100%, 75%); // light greenhsl (120,100%, 25%); // dark green hsl (120,60%, 70%); // soft green

grayscale(color)

Turning a color to gray is equivalent to desaturate (color,100%).

Example: grayscale (# 7fffd4); result: # c6c6c6

invert(color, weight)

Returns an inverted color with red, green, and blue values reversed, while the transparency remains the same.

Example: invert (white); result: black

red(color)

Gets the red value (0-255) from a color.

Example: red (# 7fffd4); result: 127red (red); result: 255th

blue(color)

Gets the blue value from a color (0-255).

Example: blue (# 7fffd4); result: 212 blue (blue); result: 255

saturation(color)

Gets the saturation value of a color (0%-100%).

Example: saturation (# 7fffd4); result: 100%

alpha(color)

Returns the alpha channel of color as a number between 0 and 1.

Example: alpha (# 7fffd4); result: 1

mix(color1, color2, weight)

Mix the two colors. The weight parameter must be 0 to 100%. The default weight is 50%, indicating that the new color takes 50% of the color values of color1 and color2. If weight is 25%, that means the new color is the sum of 25% color1 and 75% color2.

adjust-color(color, red, green, blue, hue, saturation, ightness, alpha)

This function adjusts one or more attribute values of a given color, including the color value parameters of RGB and HSL colors, as well as the values of the alpha channel. The adjustment of these attribute values depends on the passed-in key value parameters, which are then added and subtracted from the corresponding color values of a given color.

Example: adjust-color (# 7fffd4, blue: 25); result:

scale-color(color, red, green, blue, saturation, lightness, alpha)

Another practical color adjustment function. Adjust-color simply adds or subtracts from its own color parameters through the passed parameters, whichmay sometimes cause cumulative value overflows. Of course, the function will keep the result within a valid threshold. The scale-color function avoids this situation and allows the parameters to be effectively adjusted within the threshold range without having to worry about overflow.

For example, the luminance lightness of a color is between 0% and 100%. If you perform scale-color ($color, $lightness: 40%), the brightness of the color will increase by (100-original) × 40%.

Another example is to execute scale-color ($color, $lightness:-40%), indicating that the brightness of this color will be reduced by as much as (original value-0) x 40%.

The values of all passed parameters range from 0% to 100%, and the parameters passed by RGB and HSL cannot conflict.

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%) scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229) scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7) 

lighten(color, amount)

Create a new color by changing the luminance value of the color (0%-100%) to brighten the color.

saturate(color, amount)

Increase the color saturation of incoming colors. Equivalent to adjust-color (color, saturation: amount)

opacify(color, amount)

Reduce the transparency of the color, with a value of 0-1. Equivalent to adjust-color (color, alpha: amount)

transparentize(color, amount)

Improve the transparency of the color, with a value between 0 and 1. Equivalent to adjust-color (color, alpha:-amount)