Berry CSS 5.3
© Berry CSS, 2015-2025

Модуль colors

В Berry CSS цвета делятся на фиксированные и яркостные палитры. Они основаны на css-переменных.

Фиксированный цвета задаются в виде css-переменных:

:root {
    --white: #FFFFFF;
    --black: #000000;

    --color1: #1B542C;
    --color2: #026A52;
    --color3: #21888F;
    --color4: #296478;
    --color5: #4D668E;
    --color6: #2B2C7C;
    --color7: #992572;
    --color8: #933D50;
    --color9: #AC323B;
}

Палитры образуются из опорного цвета, который задаётся в виде Hue и Saturation в модели HSL. 

:root {
    --primary-hue: 216deg; /* For Material Design */
    --primary-sat: 33%;
    
    --gray-hue: var(--primary-hue);
    --gray-sat: 7%;    
    
    --red-hue: 5deg;
    --red-sat: 60%;
    
    --brown-hue: 16deg;
    --brown-sat: 31%; 
    
    --orange-hue: 31deg;
    --orange-sat: 75%;
                     
    --yellow-hue: 48deg;
    --yellow-sat: 88%;
                     
    --lime-hue: 57deg;
    --lime-sat: 80%;

    --green-hue: 102deg;
    --green-sat: 34%;
                     
    --teal-hue: 172deg;
    --teal-sat: 30%;
                     
    --cyan-hue: 200deg;
    --cyan-sat: 45%;
                     
    --blue-hue: 218deg;
    --blue-sat: 50%;
                     
    --indigo-hue: 238deg;
    --indigo-sat: 35%;
                     
    --violet-hue: 264deg;
    --violet-sat: 36%;
                     
    --purple-hue: 304deg;
    --purple-sat: 29%;
                     
    --pink-hue: 334deg;
    --pink-sat: 46%;
}
Исходные (опорные) цвета всех палитр Berry CSS — это цвета каталога RAL.

Создаваемые цвета палитры будут иметь те же значения, но разную яркость (Lightness). Палитра представляет собой градацию от яркости 50 до 950 с шагом 50. Каждый цвет создаётся следующим образом («яркостная шкала»):

:root {
    --ЦВЕТ950: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 9%);
    --ЦВЕТ900: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 13%);
    --ЦВЕТ850: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 17%);
    --ЦВЕТ800: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 21%);
    --ЦВЕТ750: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 26%);
    --ЦВЕТ700: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 31%);
    --ЦВЕТ650: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 36%);
    --ЦВЕТ600: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 41%);
    --ЦВЕТ550: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 46%);
    --ЦВЕТ500: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 50%);
    --ЦВЕТ450: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 54%);
    --ЦВЕТ400: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 59%);
    --ЦВЕТ350: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 65%);
    --ЦВЕТ300: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 70%);
    --ЦВЕТ250: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 75%);
    --ЦВЕТ200: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 81%);
    --ЦВЕТ150: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 86%);
    --ЦВЕТ100: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 91%);
    --ЦВЕТ50:  hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 96%);
    --ЦВЕТ:    var(--ЦВЕТ500);
}

- где ЦВЕТ это один из вариантов: "primary", "gray", "red", "brown", "orange", "yellow", "lime", "green", "teal", "cyan", "blue", "indigo", "violet", "purple", "pink".

Все эти css-переменные используются в многочисленных классах цветов. Для того, чтобы переопределить цветовую палитру, достаточно переопределить соответствующие css-переменные --{цвет}-hue и --{цвет}-sat, например для красной палитры:

:root {
    --red-hue: 8deg;
    --red-sat: 42%;
}

Это автоматически переопределит всю яркостную палитру red под цветовой тон пользователя.

Точно также можно переопределить любую другую css-переменную любого цвета.

Контраст цветов

При верстке нужно следить за степенью яркостной контрастности. Предполагается, что цвета, которые имеют разницу в 100 единиц, например primary300 и primary400, имеют примерно 10% разность в яркости. С точки зрения читабельности текста (рекомендация WCAG), текст должен иметь разницу примерно 40-50%, что соответствует разности в 400..500 единиц Berry CSS, например primary300 и primary700 будут иметь хороший контраст.

  • Разница в 100-200 по Berry CSS (10%-20% lightness) — слабый контраст.
  • Разница в 300-400 (30%-40%) — хороший контраст.
  • Разница 500 и больше — высокая читаемость.
<div class="t-primary100 bg-primary200 pad15 rounded5">
  Контрастность +100 (близкие цвета)
</div>

<div class="t-primary100 bg-primary600 pad15 rounded5">
  Контрастность +500 (высокий контраст)
</div>

Верстка Material Design

Концепция Material Design предполагает использование палитры primary при верстке. В Berry CSS в качестве основной палитры используется только primary, но нет secondary (акцентная палитра, см. ниже), поскольку в её качестве можно использовать любую другую, например red, blue, gray и т.д. Всё это есть в Berry CSS.

При выполнении верстки лучше использовать именно цвета primary, поскольку многие классы и переменные Berry CSS уже адаптированы к ней. Например кнопка <button class="button"> настроена на цвета primary. То же самое касается цветов теней, градаций, элементов форм и т.д. Поэтому когда верстка в палитре primary, то достаточно только соблюдать яркостную градацию, не задумываясь о том, какие это реально цвета.

Например вместо <div class="t-red500 bg-red100">текст</div>, лучше использовать <div class="t-primary500 bg-primary100">текст</div>. Таким образом цвета будут автоматически подстроены под текущий цвет палитры primary.

Цветовые палитры в Berry CSS настраиваются в виде оттенка vue и насыщенности saturation модели HSL. Поэтому, если верстка выполнена в палитре primary, то всегда можно сменить её цветовой тон.

Делается это с помощью css-переменных. Для всего сайта это можно сделать в секции :root, либо в конкретном блоке индивидуально. В этом примере явно указывается значение hue и saturation.

:root {
    --primary-hue: 123deg; // hue
    --primary-sat: 41%; // saturation
}

В этом примере можно изменить цвет primary на уже существующую палитру red:

:root {
    --primary-hue: var(--red-hue);
    --primary-sat: var(--red-sat);
}

Преимущество верстки в палитре primary в том, что для смены цвета не требуется менять html-код.

Использование акцентного оттенка

В Berry CSS возможно задание акцентного цвета в виде нескольких css-переменных. Акцентный цвет строится на основе оттенка primary с произвольным смещением:

--accent-hue-offset: -30deg;
--accent-sat-offset: 0%;
--accent-hue: calc(var(--primary-hue) + var(--accent-hue-offset));
--accent-sat: calc(var(--primary-sat) + var(--accent-sat-offset));

Обратите внимание, что у accent нет собственных классов, поэтому он предназначен только для использования в определении цвета через hsl(). Например:

--var-background-color: hsl(var(--accent-hue) var(--accent-sat) 40%);
--var-text-color: hsl(var(--accent-hue) var(--accent-sat) 90%);

Использование смещений позволяет создавать динамические цвета, которые будут сами подстраиваться под primary-палитру.