Sass Color Functions

Last Updated:

Sass Color Functions

The following are the list of inbuilt color functions available in Sass language.

FunctionsExplanation
adjust-color() Increases or decreases one or more properties of a given color by fixed amounts.
adjust-hue() Increases or decreases a given color's hue.
alpha() Returns the alpha (opacity) channel of a given color as a number between 0 and 1.
blue() Returns the blue channel of a given color as a number between 0 and 255.
change-color() Sets one or more properties of a color to new values.
complement() Returns the RGB complement of a given color.
darken() Makes a given color daker.
desaturate() Makes a given color less saturated.
grayscale() Returns a gray color with the same lightness as a given color.
green() Returns the green channel of a given color as a number between 0 and 255.
hsl() Returns a color with the given hue, saturation, and lightness and the given alpha channel.
hue() Returns the hue of a given color as a number between 0deg and 255deg.
ie-hex-str() Returns an unquoted string that represents a given color in the #AARRGGBB format expected by Internet Explorer's -ms-filter property.
invert() Returns the inverse or negative of a given color.
lighten() Makes a given color lighter.
lightness() Returns the HSL lightness of a given color as a number between 0% and 100%.
mix() Returns a number that’s a mixture of a given color1 and color2.
opacify() Makes a given color more opaque.
red() Returns the red channel of a given color as a number between 0 and 255.
rgb() Returns a color with the given red, green, blue, and alpha channels.
saturate() Makes a given color more saturated.
saturation() Returns the HSL saturation of a given color as a number between 0% and 100%.
scale-color() Fluidly scales one or more properties of a given color.
transparentize() Makes a given color more transparent.

Share this Page

Meet the Author