По аналогии с музыкой, существуют такие цветовые сочетания, которые воспринимаются человеком, как особенно красивые и гармоничные. Такие цветовые сочетания называют цветовыми гармониями или цветовыми аккордами.

Цветовые гармонии состоят из двух и более цветов, имеющих фиксированные соотношения в цветовом круге. Понимая теоретическую основу этих соотношений, можно автоматизировать процесс создания цветовых гармоний, что имеет важную практическую значимость при разработке дизайна веб-сайтов и пользовательских веб-интерфейсов. Поэтому имеет смысл рассмотреть шесть основных техник создания цветовых гармоний с использованием одного из популярных CSS препроцессоров LESS.

В каждом приведённом фрагменте кода, переменная @color-base используется для задания базового цвета, на основе которого формируется набор цветов, составляющих цветовую гармонию. Базовый цвет, используемый в качестве примера - #ff0000, отмечен на цветовом круге, основанном на триаде основных цветов RGB и разделённом на двенадцать сегментов.

Комплементарная цветовая схема (Complementary)

Состоит из двух цветов, находящихся на противоположных сторонах цветового круга:

@color-base: #ff0000;
@color-1: spin(@color-base, 180);

Аналоговая цветовая схема (Analogous)

Состоит из трёх цветов, расположенных последовательно на цветовом круге:

@color-base: #ff0000;
@color-1: spin(@color-base, 30);
@color-2: spin(@color-base, 60);

Триадная цветовая схема (Triad)

Состоит из трёх цветов, расположенных на цветовом круге на равном расстоянии друг от друга:

@color-base: #ff0000;
@color-1: spin(@color-base, -120);
@color-2: spin(@color-base, 120);

Разделённая комплементарная цветовая схема (Split-Complementary)

Является разновидностью комплементарной цветовой схемы. Как и триадная цветовая схема, состоит из трёх цветов, два из которых являются примыкающими к комплементарному цвету:

@color-base: #ff0000;
@color-1: spin(@color-base, -150);
@color-2: spin(@color-base, 150);

Тетраидная (Прямоугольная) цветовая схема (Tetradic (Rectangle))

Состоит из четырёх цветов, являющихся двумя комплементарными парами:

@color-base: #ff0000;
@color-1: spin(@color-base, 60);
@color-2: spin(@color-base, 180);
@color-3: spin(@color-base, -120);

Квадратная цветовая схема (Square)

Как и тетраидная цветовая схема, состоит из четырёх цветов, но составляющие её цвета расположены на цветовом круге на равном расстоянии друг от друга:

@color-base: #ff0000;
@color-1: spin(@color-base, -90);
@color-2: spin(@color-base, 180);
@color-3: spin(@color-base, 90);

Для получения хорошего конечного результата, не обязательно применять рассмотренные цветовые схемы в разрабатываемом дизайне напрямую, можно использовать их в качестве отправной точки при поиске подходящих вариантов цветового решения, корректируя в процессе работы оттенки, насыщенность или яркость составляющих их цветов. Для этого препроцессор CSS LESS обладает набором функций для работы с цветом, прочитать о которых подробнее можно в разделе описания функций на официальном веб-сайте LESS.