Мой Справочник | CSS3 | SCSS - Цветовые функции

Цветовые функции
Цветовые функции
С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и получить новый цвет. Функция принимает два параметра.
60 град от базового цвета - error
-60 град от базового цвета - info
spin(цвет, угол_поворота);

color: spin(red, 90);
// цвет поверн. от красного на 90° по чаc.

border-color: spin(#f0f, -45);
// цвет на 45° от #f0f против чаc.
        
Цвет можно задавать в любом цветовом формате. Значение угла может быть как положительным, так и отрицательным. При положительном угле функция повернёт колесо по часовой стрелке, при отрицательном — против.
Противоположный цвет на колесе называется комплементарным. Он находится под углом 180° к заданному цвету. Комплементарные цвета используют для создания контраста.
color-circle
Цветовые функции
Цветовые функции
// светлее red на 50%
color: lighten(red, 50%);

// темнее blue на 25%
color: darken(blue, 25%);

// green насыщеннее на 20%
color: saturate(green, 20%);

// blue бледнее на 50%
color: desaturate(blue, 50%);

// @color прозрачнее на 50%
color: fade(@color, 50%);

// SASS: $color прозрачнее на 50%
color: rgba($color, 0.5);