Color Functions - logaegae/project_study GitHub Wiki
Darken
ex>
.box.darken {
background-color: @color;
border: 3px solid **darken(@color, 20%)**;
}
Lighten
ex>
.box.lighten {
border: 3px solid **lighten(@color, 20%)**;
}
Spinning Colors
ex>
.box.hue {
background-color: **spin(@color, 123)**;
}
The color will be changed another color
Saturate/Desaturate
ex>
.box.desaturate {
background-color: desaturate(spin(@color, 123), 50%);
}
Saturation/Desaturation
Mixing Colors
ex>
.box.mix {
background-color: mix(@blue, @yellow, 50%);
}
0% will result in the first color you stated (@blue) while 100% will do the opposite(@yellow).