Material Design

Berry CSS поддерживает цветовую модель Material Design и позволяет автоматически рассчитывать яркостную градацию основных цветов.

Основной принцип Material Design заключается в том, что дизайн имеет:

• основной цвет (primary)
• вторичный цвет (secondary)
• дополнительные цвета (акценты и т.д.) — tertiary

Каждый из этих цветов должен иметь градацию яркости (от 50 до 950). В Berry CSS используется шаг 50.

Таким образом, для использования Material Design в Berry CSS нужно задать палитры через Sass.

Цвета задаются в виде значений Hue (оттенок) и Saturation (насыщенность) цветовой модели HSL.

$colorHS-primary:   (206, 86%),
$colorHS-secondary: (231, 70%),
$colorHS-tertiary:  (186, 82%),

Berry CSS создаст классы вида t-primary, t-secondary, t-tertiary, bg-primary, bg-secondary, bg-tertiary, а также их оттенки, например: t-primary100, bg-primary650 и т.п.

Оттенки primary

Оттенки secondary

Оттенки tertiary

Наведите курсор указателя на цвет, чтобы увитеть его название.

Существует несколько цветовых теорий, позволяющих выбрать подходящие цвета. Можно воспользоваться сервисом Adobe Color (лучше в режиме HSB). По умолчанию в Berry CSS для primary используется палитра blue, для secondary — indigo, для tertiary — cyan.

Монохромная палитра

Данная палитра подразумевает использование цветов с одним и тем же оттенком — значения Hue и Saturation одинаковые для всех цветов, а меняется только яркость (Lightness). Такая палитра создаётся в Berry CSS автоматически. Пример для красного цвета.

Последовательная (аналоговая или родственная) палитра

В ней, помимо primary, используются ещё два цвета, которые расположены рядом по цветовому кругу.

Например для primary = hue 206° (blue), если воспользоваться сервисом Adobe Color, получим: secondary = 190° (cyan), tertiary = 222° (indigo).

Либо можно использовать цветовую схему Berry CSS, в которой подобрать ближайший оттенок.

$colorHS-red:    (  4, 95%), // hue, saturation
$colorHS-brown:  ( 15, 47%),
$colorHS-orange: ( 35, 99%),
$colorHS-yellow: ( 53, 99%),
$colorHS-lime:   ( 64, 85%),
$colorHS-green:  (122, 68%),
$colorHS-teal:   (175, 58%),
$colorHS-cyan:   (186, 82%),
$colorHS-blue:   (206, 86%),
$colorHS-indigo: (231, 70%),
$colorHS-violet: (270, 91%),
$colorHS-purple: (290, 68%),
$colorHS-pink:   (335, 82%),

Например: primary = green, значит secondary = lime, tertiary = teal (или наоборот):

$colorHS-primary:   (122, 68%), // $colorHS-green
$colorHS-secondary: ( 64, 85%), // $colorHS-lime
$colorHS-tertiary:  (175, 58%), // $colorHS-teal

Треугольная палитра (триада)

Строится аналогично последовательной из трёх оттенков, только между оттенками должно быть примерно 120°.

Например для primary = red, secondary = indigo, tertiary = green.

Комплиментарная (контрастная) палитра

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

Например для primary = blue, secondary = brown.

Прочие палитры

Как правило в дизайне сайта используется не более двух основных оттенков: основного (primary) и акцентного (secondary). В более сложных вариантах применяются два основных оттенка (primary и secondary) и отдельный акцентный (tertiary). Поэтому в Material Design достаточно использовать только три цвета (палитры).

Создание палитры сайта - дело творческое и сугубо индивидуальное. Например часто используется подход, когда primary и secondary являются соседними, а акцент — контрастный, который применяется для блоков, требующих повышенного внимания (вроде кнопок). Например для primary = purple, secondary = pink, а tertiary = green (акцентный цвет).

При желании можно добавить дополнительные цвета, например fourth: $colorHS-fourth: $colorHS-violet; создать группу $colors-group-fourth и добавить её в $generation2 для генерации css-классов. То есть сделать аналогично тому, как созданы цвета primary/secondary/tertiary.

Пример цветового решения

Данный дизайн использует primary, secondary и tertiary в цветах Berry CSS по умолчанию (blue, indigo, cyan). Наведите указателем на цвет, чтобы получить по нему всплывающую подсказку.