Sass Color functions

Adjustments

// Changes by fixed amounts
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // darken(\_, 30%)
adjust-color($color, $alpha: -0.4)     // fade-out(\_, .4)
adjust-color($color, $hue: 30deg)      // adjust-hue(\_, 15deg)
// Changes via percentage
scale-color($color, $lightness: 50%)
// Changes one property completely
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

Supported: $red, $green, $blue, $hue, $saturation, $lightness, $alpha

Getting individual values

#HSLA

hue($color)         // 0deg..360deg
saturation($color)  // 0%..100%
lightness($color)   // 0%..100%
alpha($color)       // 0..1 (aka opacity())

#RGB

red($color)         // 0..255
green($color)
blue($color)

See: hue(), red()

Modifying HSLA

darken($color, 5%)
lighten($color, 5%)
saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)
adjust-hue($color, 15deg)
complement($color)    // like adjust-hue(\_, 180deg)
invert($color)
fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize()
rgba($color, .5)      // sets alpha to .5

Mixing

mix($a, $b, 10%)   // 10% a, 90% b

rgba

rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)
Comments