Sass change-color() Function

Last Updated:

Sass change-color() Function

The change-color() function sets one or more properties of a color to new values.

Example

SASS TO CSS CONVERTER
.foo { color: change-color(#6b717f, $red: 100); color: change-color(#d2e1dd, $red: 100, $blue: 50); color: change-color(#998099, $lightness: 30%, $alpha: 0.5); }

Syntax

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

Parameter Value

ValueTypeExplanation
$color Required Specifies a color.
$red Optional Specifies red color in RGB value. The arguments must be unitless and between 0 and 255 (both are inclusive).
$green Optional Specifies green color in RGB value. The arguments must be unitless and between 0 and 255 (both are inclusive).
$blue Optional Specifies blue color in RGB value. The arguments must be unitless and between 0 and 255 (both are inclusive).
$hue Optional Specifies the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow. The argument must have either the unit deg or no unit.
$saturation Optional Specifies the intensity of color. The arguments must be between 0 and 100% (both are inclusive).
$lightness Optional Specifies the tone of the color. The arguments must be between 0 and 100% (both are inclusive).
$alpha Optional Specifies the degree of transparency of a color. The arguments must be between -1 and 1 (both are inclusive).

Return Value

ValueExplanation
color Returns the changed color.

Share this Page

Meet the Author