Sass Colour Functions

colours

HEX
$color: #3399cc
$color-alt: #99cc33

RGB
$color: rgb(51, 153, 204)

RGBA
$color: rgba(51,1 53, 204,.5)

HSL
$color: hsl(200, 75, 80)

HSLA
$color: hsl(200, 75, 80, .5)

MIX COLOURS
mix($color, $color-alt)
mix($color, $color-alt, 20%)

GET RED COMPONENT
red($color)

GET GREEN COMPONENT
green($color)

GET BLUE COMPONENT
blue($color)

CHANGE HUE
adjust-hue($color, 20deg)
adjust-hue($color, -20deg)

LIGHTEN
lighten($color, 20%)

DARKEN
darken($color, 20%)

SATURATE
saturate($color, 20%)

GREYSCALE
grayscale($color)

COMPLEMENTARY COLOUR
complement($color)

INVERT
invert($color)

HUE VALUE
hue($color)

SATURATION VALUE
saturation($color)

LIGHTNESS VALUE
lightness($color)

RGBA OPACITY
rgba($color, .5)

FADE-IN OPACITY 
fade-in($color, $amount)

CHANGE TRANSPARENCY
transparentize($color, .5)

GET ALPHA VALUE OF COLOUR
alpha($color)

ADJUST COLOUR - Increases or decreases one or more components of a colour
adjust-color($color, $red: -50, $green: 20, $blue: 220)
adjust-color($color, $hue: 120deg, $saturation: 30, $lightness: 10)

SCALE COLOUR - Fluidly scales one or more properties of a colour
scale-color($color, $red: 10%, $green: 90%, $blue: 20%)
scale-color($color, $saturation: -30%, $lightness: 20%, $alpha: 10%)

CHANGE COLOUR - Changes one or more properties of a colour
change-color($color, $red: 255, $green: 60, $blue: 170)
change-color($color, $hue: 190deg, $saturation: 50%, $lightness: 25%)