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 @import 'berry/berry';
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 // подключаем Berry @import 'berry/berry';
Треугольная палитра (триада)
Строится аналогично последовательной из трёх оттенков, только между оттенками должно быть примерно 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). Наведите указателем на цвет, чтобы получить по нему всплывающую подсказку.