Sass Color Functions

Sass Color Functions

We divide the color functions in Sass into three parts: setting color functions, getting color functions, and operating color functions:

Sass Color Functions

Function Description & Example
rgb(red, green, blue)

Set colors using the Red-Green-Blue (RGB) model.
Specify RGB color values through rgb(red, green, blue).
Each parameter defines the intensity of the color, which can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

Example:

rgb(0, 0, 255);
// The color is displayed as blue because the blue parameter is set to its maximum value (255), and other parameters are set to 0
rgba(red, green, blue, alpha)

Sets the color using the Red-Green-Blue-Alpha (RGBA) model.
RGBA color values are an extension of RGB color values with an alpha channel - the channel specifies the opacity of the color.
alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Example:

rgba(0, 0, 255, 0.3); // Blue with transparency
hsl(hue, saturation, lightness)

Sets the color using the Hue-Saturation-Lightness model - and represents the cylindrical coordinate representation of the color.
Hue (hue) is the degree on the color wheel (from 0 to 360) - 0 or 360 is red, 120 is green, 240 is blue
Saturation (saturation) is a percentage value; 0% represents gray shadow, 100% represents full color.
Lightness (brightness) is also a percentage; 0% is black, 100% is white.

Example:

hsl(120, 100%, 50%); // Green
hsl(120, 100%, 75%); // Light green
hsl(120, 100%, 25%); // Dark green
hsl(120, 60%, 70%); // Light green

hsla(hue, saturation, lightness, alpha)

Sets the color using the Hue-Saturation-Lightness-Alpha (HSLA) model.
HSLA color values are an extension of HSL color values, with an alpha channel - specifying the opacity of the color.
alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Example:

hsl(120, 100%, 50%, 0.3); // Green with opacity
hsl(120, 100%, 75%, 0.3); // Light green with opacity

grayscale(color)

Sets the grayscale with the same brightness as the color.

Example:

grayscale(#7fffd4);

Result: #c6c6c6
complement(color)

Sets the complementary color of the color.

Example:

complement(#7fffd4);

Result: #ff7faa
invert(color, weight)

Sets the inverse or negative color of the color.
weightThe parameter is optional and must be a number between 0% and 100%. The default value is 100%.

Example:

invert(white);

Result: black

Sass color function

Function Description & Example
red(color)

Returns the red value of the color with a number between 0 and 255.

Example:

red(#7fffd4);

Result: 127

red(red);

Result: 255
green(color)

Returns the green value of the color with a number between 0 and 255.

Example:

green(#7fffd4);

Result: 255

green(blue);

Result: 0
blue(color)

Return the color's blue value as a number between 0 and 255.

Example:

blue(#7fffd4);

Result: 212

blue(blue);

Result: 255
hue(color)

Return the color's hue as a number between 0deg and 360deg.

Example:

hue(#7fffd4);

Result: 160deg
saturation(color)

Return the color's HSL saturation as a number between 0% and 100%.

Example:

saturation(#7fffd4);

Result: 100%
lightness(color)

Return the color's HSL lightness as a number between 0% and 100%.

Example:

lightness(#7fffd4);

Result: 74.9%
alpha(color)

Return the color's alpha channel as a number between 0 and 1.

Example:

alpha(#7fffd4);

Result: 1
opacity(color)

Return the color's alpha channel as a number between 0 and 1.

Example:

opacity(rgba(127, 255, 212, 0.5));

Result: 0.5

Sass Color Functions

Function Description & Example
mix(color1, color2, weight)

Create a mixed color of color 1 and color 2.
weight The parameters must be between 0% and 100%. The default value is 50%.
A higher weight means more of color1.
A lower weight means more of color2.

adjust-hue(color, degrees)

Adjust the hue of the color by degrees from -360 to 360.

Example:

adjust-hue(#7fffd4, 80deg);

Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

Adjust one or more parameters by the specified amount.
This function adds or subtracts the specified amount from the existing color values.

Example:

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

Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

Set one or more color parameters to new values.

Example:

change-color(#7fffd4, red: 255);

Result: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) Scale one or more color parameters.
rgba(color, alpha)

Create a new color using the given alpha channel.

Example:

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
Create lighter colors using values between 0% and 100%.color, amount) lighten(
amount Parameters increase the HSL lightness by percentage.
darken(color, amount) Create darker colors using values between 0% to 100%.
amount Parameters decrease the HSL lightness by percentage.
saturate(color, amount) Create more saturated colors using values between 0% and 100%.
amount Parameters increase the HSL saturation by percentage.
desaturate(color, amount) Create less saturated colors using values between 0% and 100%.
amount Parameters decrease the HSL saturation by percentage.
opacify(color, amount) Create less opaque colors using values between 0 and 1.
amount Parameters increase the Alpha channel according to their values.
fade-in(color, amount) Create less opaque colors using values between 0 and 1.
amount Parameters decrease the Alpha channel according to their values.
transparentize(color, amount) Create more transparent colors using values between 0 and 1.
amount Parameters decrease the Alpha channel according to their values.
fade-out(color, amount) Create more transparent colors using values between 0 and 1.
amount Parameters increase the Alpha channel according to their values.