Tint and Shade Functions

Avatar of Kitty Giraudel
Kitty Giraudel on (Updated on )

Both lighten and darken functions manipulate the lightness of a color in the HSL space by adding or subtracting lightness to it. Basically, they are nothing but aliases for the $lightness parameter of the adjust-color function.

The thing is, those functions often do not provide the expected result. On the other hand, the mix function is a nice way to lighten or darken a color by mixing it with either white or black.

The benefit of using mix rather than one of the two aforementioned functions is that it will progressively go to black (or white) as you decrease the proportion of the color, whereas darken and lighten will quickly blow out a color all the way to black or white.

In order to avoid writing the mixin function every time, which is not only time consuming but also not quite explicit, you can easily create two functions tint and shade (which also happen to be part of Compass):

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

Usage

.foo {
  color: tint(#BADA55, 42%);
}

.bar {
  background-color: shade(#663399, 42%);
}
.foo {
  color: #e2efb7;
}

.bar {
  background-color: #2a1540;
}