Sassy Colors

An experiment in color manipulation/scheme generation with Sass color functions.

Monochromatic

Download styles

darken($color, 20)

$color

lighten(desaturate($color, 30), 40)

lighten(desaturate($color, 30), 10)

darken(desaturate($color, 30), 30)

Complementary

Download styles

$color

adjust-color($color, $saturation:-10%, $lightness:40%)

complement($color)

lighten(complement($color), 20)

adjust-color($color, $saturation:-30%, $lightness:-20%)

Adjacent

Download styles

desaturate($color, 10)

adjust-hue($color, 45deg)

adjust-hue($color, 90deg)

adjust-color($color, $hue:90deg, $saturation:-30%, $lightness:30%)

adjust-color($color, $hue:45deg, $saturation:-30%, $lightness:-20%)

Triad

Download styles

desaturate($color, 10)

adjust-hue($color, 165deg)

adjust-color($color, $hue:195deg, $saturation:-20%)

adjust-color($color, $hue:195deg, $saturation:-30%, $lightness:30%)

adjust-color($color, $hue:165deg, $saturation:-30%, $lightness:-20%)

Tetrad

Download styles

desaturate($color, 10)

adjust-color($color, $hue:30deg, $saturation:-20%)

adjust-color($color, $hue:180deg, $saturation:-10%)

adjust-color($color, $hue:210deg, $saturation:-30%)

adjust-color($color, $hue:210deg, $saturation:-30%, $lightness:-20%)

Rainbow

Download styles

$color

adjust-hue($color, 36deg)

adjust-hue($color, 72deg)

adjust-hue($color, 108deg)

adjust-hue($color, 144deg)

Inverted

Download styles

darken($color, 30)

adjust-hue(invert($color), 30)

invert($color);

darken(invert($color), 20)

darken(desaturate(invert($color), 30), 30)

Vibrant

Download styles

saturate($color, 30)

saturate(adjust-hue(invert($color), 30), 30)

complement(saturate($color, 30))

saturate(lighten(complement($color), 20), 30)

darken(saturate($color, 50), 20)

Muted

Download styles

desaturate($color, 30)

adjust-color($color, $saturation:-40%, $lightness:30%)

complement(desaturate($color, 30))

desaturate(lighten(complement($color), 20), 30)

adjust-color($color, $saturation:-50%, $lightness:-20%)