Gerillass

v2.1.0

Tint

Type: Function
tint();

Mixes a colour towards white by a percentage.

Arguments

NameTypeDescription
$colorcolorAccepts a colour.
$percentagenumber (percentage)Accepts a percentage.

Examples

A pale background derived from the same brand colour.

Sass
$brand: crimson;
.notice {
  border: 1px solid $brand;
  background-color: tint($brand, 80%);
}
CSS
.notice {
  border: 1px solid crimson;
  background-color: #f8d0d8;
}

What it refuses

Arguments are checked, so a wrong value stops the build with a message instead of quietly producing the wrong CSS.

Sass
$brand: crimson;
.notice {
  background-color: tint(brand, 85%);
}
Error: 'brand' is not a color value, please replace it with a valid one.