Как использовать Css-переменные для согласованной цветовой палитры в веб-разработке

6 минут чтения

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

Опорные принципы цветовой системы на CSS-переменных

Разделяйте базовые оттенки и семантические токены: например, --blue-700 и --color-link.
Называйте переменные по назначению, а не только по цвету: --color-text понятнее, чем --dark-gray.
Задавайте исходные значения в :root, а тему переопределяйте через атрибут или класс.
Проверяйте сочетания текста и фона, включая состояния наведения, фокуса, ошибки и отключённого элемента.
Меняйте значения токенов, а не копируйте стили компонентов для каждой темы.

Проверьте палитру и роли цветов до написания CSS

Такой подход подходит для сайта с повторяющимися компонентами, несколькими страницами или светлой и тёмной темой. Он полезен и в веб-разработке, когда над интерфейсом работают несколько человек и нужно согласованно применять цвета.

Не стоит сразу создавать сложную систему токенов для небольшой одноразовой страницы с несколькими цветными элементами. Сначала определите минимальный набор ролей; расширить его можно по мере появления повторяющихся сценариев. Если вы выбираете услуги веб-разработки, попросите исполнителя описать систему цветов и правила её поддержки, а не только показать макет.

Задайте токены палитры в :root

Перед началом подготовьте:

утверждённые базовые оттенки бренда и нейтральной шкалы;
список ролей: фон страницы, поверхность карточки, основной текст, вторичный текст, ссылка, акцент, граница и сообщение об ошибке;
редактор кода и доступ к таблице стилей проекта;
способ проверить контрастность и состояния интерфейса в браузере;
согласованное решение о том, какие темы и состояния должны поддерживаться.

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

:root {
  /* Базовые оттенки */
  --blue-700: #174ea6;
  --gray-950: #17191c;
  --gray-100: #f1f3f5;
  --white: #ffffff;

  /* Семантические роли */
  --color-page: var(--white);
  --color-surface: var(--gray-100);
  --color-text: var(--gray-950);
  --color-link: var(--blue-700);
}

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

Свяжите переменные с фоном, текстом и акцентами интерфейса

Выполните шаги по порядку. До внесения изменений в общий файл стилей сохраните рабочую версию или используйте отдельную ветку проекта: так откат будет безопаснее.

Определите базовые и семантические имена.
Базовые токены описывают оттенок, семантические - его роль в интерфейсе. Компоненты по возможности должны обращаться к семантическим переменным.
Добавьте роли для основных поверхностей и текста.
Укажите цвет страницы, карточек, основного и вторичного текста, границ и акцентов. Пример:
```
:root {
  --color-page: #ffffff;
  --color-surface: #f1f3f5;
  --color-text: #17191c;
  --color-text-muted: #525960;
  --color-border: #c7cdd3;
  --color-accent: #174ea6;
}
```
Подключите токены к компонентам.
Используйте переменные в базовых стилях, чтобы одинаковые роли выглядели согласованно на разных страницах.
```
body {
  color: var(--color-text);
  background: var(--color-page);
}

.card {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

a {
  color: var(--color-accent);
}
```
Добавьте отдельные роли для интерактивных состояний.
Для наведения, фокуса и ошибки задайте самостоятельные переменные, если эти состояния должны отличаться от обычного вида. Не полагайтесь только на цвет, чтобы сообщить об ошибке или фокусе.
Проверьте результат на реальных страницах.
Просмотрите разные типы контента и компоненты, а не только одну карточку. Если стиль не обновился, проверьте специфичность селекторов, каскад и наличие локальных значений цвета.

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

Настройте светлую и тёмную темы без дублирования компонентов

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

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f1f3f5;
  --color-text: #17191c;
  --color-border: #c7cdd3;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #17191c;
  --color-surface: #25292e;
  --color-text: #f1f3f5;
  --color-border: #525960;
}

Перед выпуском проверьте тему по списку:

У страницы и поверхностей есть подходящий фон в каждой теме.
Основной и вторичный текст остаются различимыми.
Ссылки и акцентные элементы заметны на используемых фонах.
Границы карточек и полей видны, если они нужны для понимания структуры.
Состояния наведения, фокуса, ошибки и отключения не теряются при переключении темы.
Компоненты используют семантические токены, а не значения цвета, заданные локально.
Переключение темы не меняет разметку и не требует отдельных копий компонентов.

Проверьте контрастность и состояния интерактивных элементов

Типичные ошибки, которые стоит искать при проверке:

Цвет текста выбирают по внешнему виду палитры, но не проверяют на конкретном фоне.
Для вторичного текста используют слишком близкий к фону оттенок.
Ссылка отличается от обычного текста только цветом и не имеет дополнительного признака, например подчёркивания.
Фокус клавиатуры убирают или делают малозаметным.
Ошибка, успех или отключённое состояние обозначаются только цветом.
В разных компонентах напрямую задают похожие оттенки вместо общей семантической переменной.
Тёмную тему считают готовой после замены фона, не проверяя контраст текста, границ и акцентов.
Полупрозрачные цвета оценивают отдельно от фона, хотя итоговый оттенок зависит от подложки.

Проверяйте контраст на фактических сочетаниях и в итоговом интерфейсе. При необходимости используйте инструмент проверки контрастности, а затем подтвердите результат визуально в браузере и с клавиатурной навигацией.

Найдите и устраните типичные ошибки в цветовых токенах

Выберите подход к организации переменных под масштаб проекта:

Небольшой сайт: используйте один набор семантических токенов в :root. Подходит, если достаточно одной темы и роли цветов несложные.
Несколько тем: оставьте названия семантических токенов общими, а их значения переопределяйте через атрибут темы. Это удобно, когда компоненты должны выглядеть одинаково по структуре.
Большая палитра или дизайн-система: заведите отдельные базовые оттенки и слой семантических токенов. Применяйте такой вариант, если палитра повторно используется в разных компонентах и состояниях.

Если токенов становится трудно поддерживать, удалите неиспользуемые переменные и объедините дублирующие роли. Не вводите новые уровни абстракции, пока проекту не требуется разделение базовых оттенков и назначения цветов.

Разбор практических ситуаций с CSS-палитрами

Можно ли объявлять CSS-переменные прямо в компоненте?

Можно, если значение действительно относится только к этому компоненту. Общие цвета текста, фона и акцентов лучше объявлять на корневом уровне и переиспользовать через семантические токены.

Чем семантический токен отличается от базового цвета?

Базовый токен обозначает оттенок, например --blue-700. Семантический описывает назначение - например, --color-link - и может ссылаться на базовый оттенок.

Как переключать светлую и тёмную темы?

Назначьте семантическим переменным значения по умолчанию, затем переопределите их под атрибутом или классом темы. Компоненты при этом продолжают использовать те же переменные.

Что делать, если в двух темах нужен разный цвет ссылки?

Задайте семантический токен ссылки и переопределите его значение для каждой темы. После этого отдельно проверьте ссылку на всех используемых фонах и её интерактивные состояния.

Нужно ли создавать отдельные переменные для наведения и фокуса?

Создавайте их, если соответствующие состояния требуют иных цветов или правил. Фокус должен оставаться заметным; не заменяйте его отключением контура без равноценного визуального индикатора.

Как понять, что цветовой токен не используется?

Найдите все обращения к имени переменной в стилях и проверьте каскад. Перед удалением убедитесь, что токен не формируется или не применяется в другой части проекта.

Можно ли выбрать цвета только по макету?

Макет помогает согласовать внешний вид, но не заменяет проверку контрастности и интерактивных состояний. Проверьте цвета в браузере на реальном содержимом и фонах.

Post Views: 0