Color Functions

Sass has built-in functions to create and manipulate color. To name a few:

Create Color

• rgb($red, $green, $blue)
• rgba($color, 0.7)
• hsl(120deg, 100%, 50%)
• hsla($hue, $saturation, $lightness, $alpha)

Process Color

• darken($color, %)
• lighten($color, %)
• saturate($color, %)
• grayscale($color)
• desaturate($color, %)
• complement($color)
• invert($color, %)
• adjust-hue($color, $degrees)
• mix($color1, $color2, %)
• fade-in($color, 0.0) / opacify($color, 0.0)
• fade-out($color, 0.0) / transparentize($color, 0.0)

Get Degree Functions

• hue($color)
• saturation($color)
• lightness($color)
• red($color)
• green($color)
• blue($color)
• alpha($color) / opacity($color)

// Variables
$base: #3acec2;
$base-dark: darken($base, 25%);
$base-light: lighten($base, 25%);

$complement: complement($base)
$complement-light: lighten($complement, 10%)

// Header
header {
  background-color: $base;

  h1{
   color: $complement;
  }
  p {
    color: $base-dark;
  }
  a {
    color: $base-light;
    &-:hover {
       color: rgba($base-light, 0.7)
    }
  }
}