Sass Color Functions

Sass 函数Sass Functions

Sass color functions can be divided into three parts: color settings, color retrieval, and color operations.

The table below lists Sass's color functions:

Sass Color Settings

Function Description & Examples
rgb(red, green, blue) Create a Red-Green-Blue (RGB) color. R stands for "red", G for "green", and B for "blue".

Example:
rgb(0, 0, 255);
rgba(red, green, blue, alpha) Create a color from red, green, blue, and alpha values.

Example:
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness) Create a color from hue, saturation, and lightness values.

Example:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // soft green
hsla(hue, saturation, lightness, alpha) Create a color from hue, saturation, lightness, and alpha values.

Example:
hsl(120, 100%, 50%, 0.3); // green with transparency
hsl(120, 100%, 75%, 0.3); // light green with transparency
grayscale(color) Turn a color into gray, equivalent to desaturate( color,100%).

Example:
grayscale(#7FBFFF);
Result: #c6c6c6
complement(color) Return a complementary color, equivalent to adjust-hue($color,180deg).

Example:
complement(#7FBFFF);
Result: #ff7faa
invert(color, weight) Return an inverted color, with red, green, and blue values reversed, and the alpha value unchanged.

Example:
invert(white);
Result: black

Sass Color Retrieval

Function Description & Examples
red(color) Get the red value (0-255) from a color.

Example:
red(#7FBFFF);
Result: 127
red(red);
Result: 255
green(color) Get the green value (0-255) from a color.

Example:
green(#7FBFFF);
Result: 255
green(blue);
Result: 0
blue(color) Get the blue value (0-255) from a color.

Example:
blue(#7FBFFF);
Result: 212
blue(blue);
Result: 255
hue(color) Return the hue angle of a color in the HSL color space (0deg - 255deg).

Example:
hue(#7FBFFF);
Result: 160deg
saturation(color) Get the saturation value (0% - 100%) of a color.

Example:
saturation(#7FBFFF);
Result: 100%
lightness(color) Get the lightness value (0% - 100%) of a color.

Example:
lightness(#7FBFFF);
Result: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

Example:
alpha(#7FBFFF);
Result: 1
opacity(color) Get the alpha (transparency) value (0-1) of a color.

Example:
opacity(rgba(127, 191, 255, 0.5);
Result: 0.5

Sass Color Operations

Function Description & Examples
mix(color1, color2, weight) Mix two colors together.weightThe weight parameter must be between 0% and 100%. The default weight is 50%, meaning the new color takes 50% of color1 and 50% of color2. If weight is 25%, it means the new color is 25% color1 and 75% color2.
adjust-hue(color, degrees) Create a new color by changing the hue value of a color (-360deg - 360deg).

Example:
adjust-hue(#7FBFFF, 80deg);
Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) This function can adjust one or more attribute values of a given color, including the various color value parameters of RGB and HSL colors, as well as the alpha channel value. These adjustments depend on the keyword parameters passed in, which are added to or subtracted from the corresponding color values of the given color.

Example:
adjust-color(#7FBFFF, blue: 25);
Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Similar to adjust-color above, except that the parameters passed to this function directly replace the original values without any arithmetic operations.

Example:
change-color(#7FBFFF, red: 255);
Result: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Another practical color adjustment function. adjust-color simply adds to or subtracts from the color's own value parameters using the passed arguments, which may sometimes cause accumulated values to overflow; of course, the function keeps the result within valid thresholds. The scale-color function avoids this situation, allowing parameters to be adjusted effectively within thresholds without worrying about overflow.

For example, a color's lightness value is between 0% and 100%. If scale-color($color, $lightness: 40%) is executed, it means the color's lightness will increase by (100 - original value) × 40%.

Another example, executing scale-color($color, $lightness: -40%), means the color's lightness will decrease by (original value - 0) × 40%.

All parameter values must be between 0% and 100%, and RGB and HSL parameters 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)
rgba(color, alpha) Create a color from red, green, blue, and alpha values.

Example:
rgba(#7FBFFF, 30%);
Result: rgba(127, 191, 255, 0.3)
lighten(color, amount) Create a new color by increasing the lightness value (0% - 100%) of a color to make it lighter.
darken(color, amount) Create a new color by decreasing the lightness value (0% - 100%) of a color to make it darker.
saturate(color, amount) Increase the saturation of a given color. Equivalent to adjust-color( color, saturation: amount)
desaturate(color, amount) Decrease the saturation of a color to produce a new color value. Again, the saturation value range is 0% ~ 100%. Equivalent to adjust-color(color, saturation: -amount)
opacify(color, amount) Decrease the transparency of a color, with values between 0-1. Equivalent to adjust-color(color, alpha: amount)
fade-in(color, amount) Decrease the transparency of a color, with values between 0-1. Equivalent to adjust-color(color, alpha: amount)
transparentize(color, amount) Increase the transparency of a color, with values between 0-1. Equivalent to adjust-color(color, alpha: -amount)
fade-out(color, amount) Increase the transparency of a color, with values between 0-1. Equivalent to adjust-color(color, alpha: -amount)

Sass 函数Sass Functions

Other Extensions