MENU


HSL

hsl($hue, $saturation, $lightness) Creates a Color from hue, saturation, and lightness values.
hsla($hue, $saturation, $lightness, $alpha) Creates a Color from hue, saturation, lightness, and alpha values.
hue($color) Gets the hue component of a color.
saturation($color) Gets the saturation component of a color.
lightness($color) Gets the lightness component of a color.
adjust-hue($color, $degrees) Changes the hue of a color.
lighten($color, $amount) Lightens a color.
darken($color, $amount) Darkens a color.
saturate($color, $amount) Makes a color more saturated.
desaturate($color, $amount) Makes a color less saturated.
grayscale($color) Converts a color to grayscale.
complement($color) Returns the complement of a color.
invert($color) Returns the inverse of a color.
Visit Wikipedia - HSL and HSV for more information about this color scheme.
$a: hsl(360,100%,100%);
$b: desaturate(darken($a,50%),50%);

span {
   background: grayscale($b);
   color: $b;
}
div {
   background: complement(#345);
   color: invert(#333);
}

span {
  background: gray;
  color: #bf4040;
}

div {
  background: #554433;
  color: #cccccc;
}