Sass adjust-color() Function

Last Updated:

Sass adjust-color() Function

The adjust-color() function increases or decreases one or more properties of a given color by fixed amounts.

Example

SASS TO CSS CONVERTER
.foo { color: adjust-color(#6b717f, $red: 15); color: adjust-color(#d2e1dd, $red: -10, $blue: 10); color: adjust-color(#998099, $lightness: -30%, $alpha: -0.4); }

Syntax

adjust-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 -255 and 255 (both are inclusive).
$green Optional Specifies green color in RGB value. The arguments must be unitless and between -255 and 255 (both are inclusive).
$blue Optional Specifies blue color in RGB value. The arguments must be unitless and between -255 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 -100% and 100% (both are inclusive).
$lightness Optional Specifies the tone of the color. The arguments must be between -100% 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 adjusted color.

Share this Page

Meet the Author