Less Color Functions

lesscolor.css

/*
http://www.hongkiat.com/blog/less-color-functions/

LESS provides several functions with quite descriptive keywords that we can use to manipulate colors: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() and mix().
*/

@color: #5ea1d5;
@colorDark: darken(@color, 20%);  

.box.darken {  
    background-color: @color;  
    border: 3px solid darken(@color, 20%);  
}  

.box.lighten {  
    border: 3px solid lighten(@color, 20%);  
} 
  
.box.darken {  
    background-color: @color;  
    border: 3px solid @colorDark;  
}  

.box.hue {  
    background-color: spin(@color, 123);  
}  

.box.desaturate {  
    background-color: desaturate(spin(@color, 123), 50%);  
}  

.box.mix {  
    background-color: mix(@blue, @yellow, 50%);  
}