Sass Reference
Article

Colors

By Hugo Giraudel

Clearly, a design language such as CSS has much to do with colors. CSS itself provides many ways of using colors, like rgb (with or without the alpha channel), hsl (with or without the alpha channel), hexadecimal notation and a crowd of native keywords.

Sass extends these native tools to enhance designers’ and developers’ experience when manipulating colors.

Color operations

The interesting thing with colors is that they can be reduced to actual numbers on which it is possible and easy to perform mathematical operations. Thankfully, Sass makes it easier by doing this under the hood so that authors can perform math operations with colors, no matter how they are defined.

.foo {
  color: (red + green); // #FF8000
}

Mathematical operations on colors might seem unintuitive at first. To put it simply, Sass applies the operation on each channel of both color, resulting in a new color.

When adding a color to another, the engine adds the second red channel to the first, the second blue channel to the first and the second green channel to the first in order to have the result.

Colors can also be substracted and multiplied. However it is not possible to perform a division or a modulo between colors.

Also note that the alpha channel of both colors must be the same in order to perform the operation.

Color functions

Being able to perform mathematical operations on colors is interesting but it ends up being highly unpractical in the everyday project. This is the reason why Sass provides many native functions to manipulate colors in a friendly and accessibly way.

The most common use case is darkening or lightening a color by a given factor (e.g. 42%). To do so, there are darken and lighten functions.

.foo {
  $color: red;

  border-color: $color;
  color: darken($color, 10%);             // #CC0000
  background-color: lighten($color, 20%); // #FF6666
}

For a more subtle way to lighten or darken a color, refer to Sass Guidelines – Lightening and Darkening Colors.

Along the same lines, when familiar with the HSL representation, it might be interesting to tweak the saturation or even the hue of a color to create subtle variations.

.foo {
  color: desaturate(red, 10%);            // #f20d0d
  background-color: saturate(brown, 10%); // #af2020
  border-color: adjust-hue(blue, 120);    // red
}

These simple examples are just of the tip of the iceberg because Sass provides countless more functions to play with colors.

Extended CSS functions

As mentioned at the beginning of the entry, CSS provides rgb, rgba, hsl and hsla function. It is worth noting that Sass overrides both rgba and hsla to allow a 2-parameters signature.

(Sass::Script::Value::Color) rgba($color, $alpha)
(Sass::Script::Value::Color) hsla($color, $alpha)

Basically, thanks to Sass it is possible to provide a color as a first parameter without having to know and split its three color channels.

.foo {
  color: rgba(red, 0.5);
}

Engine compatibility

Colors are fully compatible across all Sass engines except for transparent and rebeccapurple that are only recognized as colors (instead of strings) in Ruby Sass 3.4+. Use rgba(0, 0, 0, 0) and #663399 for those engines.