MENU


Color Operation

saturate(@color, @amount [,@method]) Increase the saturation of a color in the HSL color space by an absolute amount.
desaturate(@color, @amount [,@method]) Decrease the saturation of a color in the HSL color space by an absolute amount.
lighten(@color, @amount [,@method]) Increase the lightness of a color in the HSL color space by an absolute amount.
darken(@color, @amount [,@method]) Decrease the lightness of a color in the HSL color space by an absolute amount.
fadein(@color, @amount [,@method]) Decrease the transparency (or increase the opacity) of a color, making it more opaque.
fadeout(@color, @amount [,@method]) Increase the transparency (or decrease the opacity) of a color, making it less opaque.
fade(@color, @amount) Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.
spin(@color, @angle) Rotate the hue angle of a color in either direction.
mix(@color1, @color2[, @mix]) Mix two colors together in variable proportion. Opacity is included in the calculations.
greyscale(@color) Remove all saturation from a color in the HSL color space; the same as calling desaturate(@color, 100%).
contrast(@color, @dark_color, @light_color, @threshold) Choose which of two colors provides the greatest contrast with another.
The functions above take in a color value and return a color value.
Set the option method parameter to relative for relative percentages. When using relative percentages increasing a 10% value by 10% results in 11%.
.a { color: fadein(rgba(100,100,100,0.5),10%); }
.b { color: spin(hsl(10, 90%, 50%), 180); }
.c { color: mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%); }
.d { color: greyscale(hsl(90, 90%, 50%)); }
.e { color: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%); }

.a {
  color: rgba(100, 100, 100, 0.6);
}
.b {
  color: #0dccf2;
}
.c {
  color: rgba(75, 25, 0, 0.75);
}
.d {
  color: #808080;
}
.e {
  color: #000000;
}