Sass Color Functions

Function

Description & Example

rgb(red, green, blue)

Specify a color using the Red-Green-Blue (RGB) model by indicating the intensity of each color component. The values range from 0 to 255 or can be represented as percentages from 0% to 100%.

For instance, rgb(0, 0, 255) indicates blue as the blue component is set to its maximum intensity (255), while the red and green components are set to 0.

rgba(red, green, blue, alpha)

To define a color using the Red-Green-Blue-Alpha (RGBA) model, include an additional parameter representing the opacity, known as the alpha channel. This parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

For instance, in rgba(0, 0, 255, 0.3), the color blue is specified with an opacity of 30%.

hsl(hue, saturation, lightness)

Define a color using the Hue-Saturation-Lightness (HSL) model, which represents colors in a cylindrical-coordinate system. Hue is specified in degrees on the color wheel (ranging from 0 to 360), where red is 0 or 360, green is 120, and blue is 240. Saturation is a percentage value, where 0% denotes a shade of gray and 100% represents the full color intensity. Lightness, also expressed as a percentage, ranges from 0% (black) to 100% (white).

For example:

hsl(120, 100%, 50%) corresponds to green.

hsl(120, 100%, 75%) indicates light green.

hsl(120, 100%, 25%) represents dark green.

hsl(120, 60%, 70%) denotes pastel green.

hsla(hue, saturation, lightness, alpha)

Specify a color using the Hue-Saturation-Lightness-Alpha (HSLA) model, which extends the HSL model with an alpha channel representing opacity. The alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

For instance:

hsla(120, 100%, 50%, 0.3) represents green with a certain level of opacity.

hsla(120, 100%, 75%, 0.3) denotes light green with a specified opacity level.

grayscale(color)

Create a gray color with the same lightness level as the given color.

For instance, if the color is #7fffd4, the resulting gray color would be #c6c6c6.

complement(color)

Determine the complementary color for the given color value,

such as:

Original color: #7fffd4 Complementary color: #ff7faa

invert(color, weight)

Calculate the inverse or negative color of the given color, with an optional weight parameter, like so:

For instance,

if the original color is white, the result of inverting it would be black.

Function

Description & Example

red(color)

Retrieve the red value of a color as a number ranging from 0 to 255.

for example:In the given color #7fffd4, the red value is 127. For the color red, the red value is 255.

green(color)

Retrieve the green value of a color as a number between 0 and 255.

For instance:In the color #7fffd4, the green value is 255. For the color blue, the green value is 0.

blue(color)

Retrieve the blue value of a color as a number ranging from 0 to 255.

For example:In the color #7fffd4, the blue value is 212. For the color blue, the blue value is 255.

hue(color)

Determine the hue of a color as a number between 0° and 360°.

For instance:For the color #7fffd4, the hue is 160°.

saturation(color)

Retrieve the saturation of a color in HSL (Hue, Saturation, Lightness) format as a percentage ranging from 0% to 100%.

For example:For the color #7fffd4, the saturation is 100%.

lightness(color)

Retrieve the lightness of a color in HSL (Hue, Saturation, Lightness) format as a percentage ranging from 0% to 100%.

For instance:For the color #7fffd4, the lightness is approximately 74.9%.

alpha(color)

Retrieve the alpha channel value of a color as a number ranging from 0 to 1.

For example:For the color #7fffd4, the alpha channel value is 1.

opacity(color)

Retrieve the opacity or alpha channel value of a color in the RGBA format as a number ranging from 0 to 1.

For instance:For the color RGBA(127, 255, 212, 0.5), the opacity is 0.5.

Function

Description & Example

mix(color1, color2, weight)

Blend color1 and color2 based on a weight parameter ranging from 0% to 100%. A higher weight favors color1, while a lower weight favors color2. The default weight is 50%.

adjust-hue(color, degrees)

Modify the hue of the color by a degree within the range of -360deg to 360deg.

For instance: adjust-hue(#7fffd4, 80deg); Outcome: #8080ff

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

This function adjusts one or more parameters of a color by a specified amount. It either adds or subtracts the specified value from the existing color value.

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

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

This function sets one or more parameters of a color to new values.

For example: change-color(#7fffd4, red: 255); Result: #ffffd4

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

This function adjusts one or more parameters of a color

rgba(color, alpha)

Generate a new color with the specified alpha channel for the given color.

For example: rgba(#7fffd4, 30%); Result: rgba(127, 255, 212, 0.3)

lighten(color, amount)

Generate a lighter shade of the color by increasing the HSL lightness parameter by a percentage between 0% and 100%.

darken(color, amount)

Produce a darker shade of the color by reducing the HSL lightness parameter by a percentage between 0% and 100%.

saturate(color, amount)

Generate a color with increased saturation relative to the original color by a percentage between 0% and 100%. This percentage represents the amount by which the HSL saturation parameter is augmented.

desaturate(color, amount)

Generate a color with reduced saturation relative to the original color by a percentage between 0% and 100%. This percentage represents the amount by which the HSL saturation parameter is diminished.

opacify(color, amount)

Generate a color with increased opacity relative to the original color by a value between 0 and 1. This value represents the amount by which the alpha channel is augmented.

fade-in(color, amount)

Generate a color with increased opacity by a specified amount, ranging between 0 and 1, relative to the original color. This amount determines the extent to which the alpha channel is enhanced.

transparentize(color, amount)

Generate a color with reduced opacity by a specified amount, ranging between 0 and 1, relative to the original color. This amount determines the extent to which the alpha channel is diminished.

fade-out(color, amount)

Generate a color with decreased opacity by a specified amount, ranging between 0 and 1, relative to the original color. This amount determines the extent to which the alpha channel is reduced.