Easy Tutorial

❮ Sass Variables Sass Nesting ❯

Sass Color Functions

Sass color functions can be divided into three parts: color setting, color retrieval, and color manipulation.

The table below lists Sass color functions:

Sass Color Setting

Function	Description & Example
rgb(red, green, blue)	Creates a Red-Green-Blue (RGB) color. R stands for "red" which is red, G for "green" which is green, and B for "blue" which is blue. <br> <br> Example: <br>rgb(0, 0, 255);
rgba(red, green, blue, alpha)	Creates a color based on red, green, blue, and alpha values. <br> <br> Example: <br>rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness)	Creates a color by hue, saturation, and lightness values. <br> <br> Example: <br>hsl(120, 100%, 50%); // Green <br>hsl(120, 100%, 75%); // Light green <br>hsl(120, 100%, 25%); // Dark green <br>hsl(120, 60%, 70%); // Soft green
hsla(hue, saturation, lightness, alpha)	Creates a color by hue, saturation, lightness, and alpha values. <br> <br> Example: <br>hsl(120, 100%, 50%, 0.3); // Green with transparency <br>hsl(120, 100%, 75%, 0.3); // Light green with transparency
grayscale(color)	Converts a color to gray, equivalent to desaturate(color, 100%). <br> <br> Example: <br>grayscale(#7fffd4); <br>Result: #c6c6c6
complement(color)	Returns a complementary color, equivalent to adjust-hue($color, 180deg). <br> <br> Example: <br>complement(#7fffd4); <br>Result: #ff7faa
invert(color, weight)	Returns an inverted color, with red, green, and blue values reversed, and transparency unchanged. <br> <br> Example: <br>invert(white); <br>Result: black

Sass Color Retrieval

Function	Description & Example
red(color)	Retrieves the red value (0-255) from a color. <br> <br> Example: <br>red(#7fffd4); <br>Result: 127 <br>red(red); <br>Result: 255
green(color)	Retrieves the green value (0-255) from a color. <br> <br> Example: <br>green(#7fffd4); <br>Result: 255 <br>green(blue); <br>Result: 0
blue(color)	Retrieves the blue value (0-255) from a color. <br> <br> Example: <br>blue(#7fffd4); <br>Result: 212 <br>blue(blue); <br>Result: 255
hue(color)	Returns the hue value (0deg - 255deg) in HSL color. <br> <br> Example: <br>hue(#7fffd4); <br>Result: 160deg
saturation(color)	Retrieves the saturation value (0% - 100%) from a color. <br> <br> Example: <br>saturation(#7fffd4); <br>Result: 100%
lightness(color)	Retrieves the lightness value (0% - 100%) from a color. <br> <br> Example: <br>lightness(#7fffd4); <br>Result: 74.9%
alpha(color)	Returns the alpha channel of a color as a number between 0 and 1. <br> <br> Example: <br>alpha(#7fffd4); <br>Result: 1
opacity(color)	Get the color opacity value (0-1). <br> <br> Example: <br>opacity(rgba(127, 255, 212, 0.5)); <br>Result: <br> 0.5

Sass Color Operations

Function	Description & Example
mix(color1, color2, weight)	Mix two colors together. The weight parameter must be between 0% and 100%. The default weight is 50%, indicating that the new color is a mix of 50% of color1 and 50% of color2. If the 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 (-360deg to 360deg) of a color. <br> <br> Example: <br>adjust-hue(#7fffd4, 80deg); <br>Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)	This function can adjust one or more properties of a given color, including RGB and HSL values, as well as the alpha channel. The adjustment depends on the key value parameters passed, which are added or subtracted from the corresponding color values. <br> <br> Example: <br>adjust-color(#7fffd4, blue: 25); <br>Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)	Similar to adjust-color, but the parameters passed directly replace the original values without any calculations. <br> <br> Example: <br>change-color(#7fffd4, red: 255); <br>Result: <br> #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha)	Another practical color adjustment function. adjust-color adds or subtracts the passed parameters from the original color values, which can sometimes cause overflow. scale-color avoids this by ensuring the adjustments stay within valid thresholds. <br> <br> For example, if a color's lightness is between 0% and 100%, running scale-color($color, $lightness: 40%) increases the lightness by (100 - original value) × 40%. <br> <br> Another example, running scale-color($color, $lightness: -40%) decreases the lightness by (original value - 0) × 40%. <br> <br> All parameters are between 0% and 100%, and RGB and HSL parameters cannot conflict. <br> <br> scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)<br>scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)<br>scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha)	Create a color based on red, green, blue, and alpha values. <br> <br> Example: <br>rgba(#7fffd4, 30%); <br>Result: <br> rgba(127, 255, 212, 0.3)
lighten(color, amount)	Create a new color by increasing the lightness value (0% - 100%) of a color.
darken(color, amount)	Create a new color by decreasing the lightness value (0% - 100%) of a color.
saturate(color, amount)	Increase the saturation of the input color. Equivalent to adjust-color(color, saturation: amount)
desaturate(color, amount)	Reduces the saturation of a color to produce a new color value. The saturation range is between 0% and 100%. Equivalent to adjust-color(color, saturation: -amount)
opacify(color, amount)	Decreases the transparency of a color, with values ranging from 0 to 1. Equivalent to adjust-color(color, alpha: amount)
fade-in(color, amount)	Decreases the transparency of a color, with values ranging from 0 to 1. Equivalent to adjust-color(color, alpha: amount)
transparentize(color, amount)	Increases the transparency of a color, with values ranging from 0 to 1. Equivalent to adjust-color(color, alpha: -amount)
fade-out(color, amount)	Increases the transparency of a color, with values ranging from 0 to 1. Equivalent to adjust-color(color, alpha: -amount)

❮ Sass Variables Sass Nesting ❯