Skip to main content

Introduction to Sass Color Functions

Sass Color Functions​

Sass provides a number of built-in color functions that allow you to manipulate colors in various ways.

Here are some of the most commonly used color functions:

  • rgb($red, $green, $blue): This function creates a color using the specified RGB values.

As an example:

$my-color: rgb(255, 0, 0);
// Output: #ff0000
  • rgba($red, $green, $blue, $alpha): This function creates a color using the specified RGBA values, where $alpha is the opacity of the color.

As an example:

$my-color: rgba(255, 0, 0, 0.5);
// Output: rgba(255, 0, 0, 0.5)
  • hsl($hue, $saturation, $lightness): This function creates a color using the specified HSL values.

As an example:

$my-color: hsl(120, 100%, 50%);
// Output: #00ff00
  • hsla($hue, $saturation, $lightness, $alpha): This function creates a color using the specified HSLA values, where $alpha is the opacity of the color.

As an example:

$my-color: hsla(120, 100%, 50%, 0.5);
// Output: rgba(0, 255, 0, 0.5)
  • lighten($color, $amount): This function lightens a color by the specified amount, where $amount is a percentage between 0% and 100%.

As an example:

$my-color: #ff0000;

$lightened-color: lighten($my-color, 20%);
// Output: #ff3333
  • darken($color, $amount): This function darkens a color by the specified amount, where $amount is a percentage between 0% and 100%.

As an example:

$my-color: #ff0000;

$darkened-color: darken($my-color, 20%);
// Output: #cc0000
  • saturate($color, $amount): This function saturates a color by the specified amount, where $amount is a percentage between 0% and 100%.

As an example:

$my-color: #00ff00;

$saturated-color: saturate($my-color, 20%);
// Output: #00ff33
  • desaturate($color, $amount): This function desaturates a color by the specified amount, where $amount is a percentage between 0% and 100%.

As an example:

$my-color: #00ff00;

$desaturated-color: desaturate($my-color, 20%);
// Output: #00cc00
  • mix($color1, $color2, $weight): This function blends two colors together, where `$weight is a percentage between 0% and 100% that specifies the weight of the second color.

As an example:

$color1: #ff0000;
$color2: #00ff00;

$mixed-color: mix($color1, $color2, 50%);
// Output: #808000