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).