Теория цвета для веб-дизайна: оттенки, контраст и дизайн-системы

Основы теории цвета для веб-дизайна

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

Тон, насыщенность и светлота

Современный веб-дизайн почти всегда работает в цветовой модели HSL (Hue, Saturation, Lightness), потому что она отражает то, как люди на самом деле думают о цвете. В отличие от RGB, HSL позволяет описывать цвет так, как это делал бы дизайнер.

• Тон (Hue) -- это сам цвет, измеряемый в градусах от 0 до 360 на цветовом круге. 0 -- красный, 120 -- зеленый, 240 -- синий.
• Насыщенность (Saturation) -- это интенсивность цвета, от 0% (серый) до 100% (полностью яркий). Сдержанные палитры брендов обычно находятся в диапазоне 30-60%.
• Светлота (Lightness) -- насколько светлый или темный цвет, от 0% (черный) до 100% (белый). 50% -- это самая чистая, самая яркая версия тона.

Как только вы усвоите HSL, создание вариаций цвета становится механическим. Нужен более темный синий для hover? Уменьшите светлоту. Нужен более мягкий фоновый оттенок? Увеличьте светлоту и немного уменьшите насыщенность. Никаких догадок и умственных вычислений с hex-кодами.

Первичные, вторичные и третичные цвета

Традиционная теория цвета делит тона на три группы. Первичные цвета (красный, желтый, синий) нельзя смешать из других цветов. Вторичные цвета (оранжевый, зеленый, фиолетовый) создаются смешиванием двух первичных. Третичные цвета находятся между первичным и вторичным.

В вебе эта иерархия превращается в цветовые отношения. Комплементарные цвета (противоположные на круге) создают сильный контраст и отлично подходят для кнопок призыва к действию. Аналогичные цвета (соседи на круге) ощущаются гармонично. Триадные схемы (три равномерно расположенных тона) создают сбалансированные яркие палитры.

Понимание оттенков и тинтов

В повседневной веб-работе вы редко используете один цвет. У кнопки есть базовый цвет, цвет при наведении, цвет при нажатии, цвет для отключенного состояния, кольцо фокуса и тонкий фоновый оттенок. Все они происходят из структурированной шкалы оттенков, производной от одного тона.

Shade vs Tint vs Tone

Терминология здесь важна. Tint -- цвет, смешанный с белым (делает его светлее). Shade -- цвет, смешанный с черным (делает его темнее). Tone -- цвет, смешанный с серым (делает его менее насыщенным). В повседневном общении и в большинстве CSS-фреймворков слово "shade" используется свободно для обозначения любого изменения светлоты.

Шкала 50-900 объяснена

Числовая шкала от 50 до 900 стала популярной благодаря Material Design и Tailwind CSS и теперь является стандартом де-факто для дизайн-систем. Каждое число представляет шаг по оси светлоты, от почти белого до почти черного.

Сила этой шкалы в предсказуемости. Как только ваша команда согласится, что 500 -- это база, а 600 -- hover, каждая кнопка в продукте будет вести себя одинаково.

Стандарты контрастности WCAG

Красивая палитра, которая не проходит проверку доступности, -- это не успешная палитра. WCAG определяет измеримые требования к контрастности, которые защищают пользователей со слабым зрением, дальтонизмом и ситуативными ограничениями.

Коэффициенты контрастности объяснены

Коэффициент контрастности -- это число от 1:1 (нет контраста) до 21:1 (максимальный контраст, чистый черный на чистом белом). Он вычисляется из относительной яркости двух цветов с учетом человеческого восприятия яркости.

Почему доступность важна

Примерно 1 из 12 мужчин и 1 из 200 женщин имеют ту или иную форму нарушения цветового зрения. Практическое правило: каждый текстовый элемент должен соответствовать AA. Стремитесь к AAA на критичных для чтения поверхностях, таких как статьи и метки форм.

Создание палитры дизайн-системы

Палитра дизайн-системы -- это больше, чем список красивых цветов. Это структурированный набор токенов, который дает предсказуемый ответ на каждое решение UI. У хорошей палитры пять слоев.

1. Основной цвет

Основной цвет -- это лицо бренда. Он появляется на кнопках, ссылках, активных вкладках. Он должен быть отличительным, доступным на белом и иметь полную шкалу 50-900.

2. Вторичный цвет

Вторичный цвет поддерживает основной. Распространенный паттерн -- выбрать тон на 120-180 градусов от основного.

3. Нейтральные серые

Нейтральные формируют текст, границы, фоны и поверхности. Многие современные системы используют тонированные нейтральные -- серые с небольшим оттенком фирменного тона, чтобы весь интерфейс ощущался связным.

4. Семантические цвета

• Успех -- зеленый
• Предупреждение -- янтарный или желтый
• Опасность -- красный
• Информация -- синий

Каждому семантическому цвету нужна собственная шкала оттенков.

5. Слои поверхности и фона

Определите от 3 до 5 фоновых токенов (background, surface, surface-raised, overlay) и сопоставьте их с оттенками вашей нейтральной шкалы. Этот простой шаг позже делает темный режим почти бесплатным.

Как использовать наш генератор оттенков

Наш бесплатный генератор оттенков превращает любой базовый цвет в готовую для продакшена шкалу 50-900 за секунды. Все работает в вашем браузере.

Пошаговое руководство

1. Откройте инструмент Генератор оттенков цвета.
2. Введите ваш базовый цвет в виде hex-кода (например, #3B82F6) или используйте выбор цвета.
3. Просмотрите сгенерированную шкалу -- все 10 оттенков от 50 до 900.
4. Проверьте контраст, глядя на предварительный просмотр текста на каждом оттенке.
5. Отрегулируйте при необходимости -- шкала мгновенно регенерируется.
6. Скопируйте отдельные значения или экспортируйте всю палитру.
7. Повторите для каждой роли: основной, вторичный, нейтральный, успех, предупреждение, опасность, информация.

Объяснение форматов экспорта

CSS Custom Properties

CSS-переменные -- универсальный вариант. Они работают в каждом современном браузере, поддерживают темизацию во время выполнения (темный режим) и не требуют шага сборки.

:root {
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-900: #1e3a8a;
}

SCSS-переменные

SCSS-переменные разрешаются во время компиляции. Выбирайте SCSS, если ваш проект уже использует Sass.

Конфигурация Tailwind CSS

Вставьте экспортированный объект в tailwind.config.js под theme.extend.colors.

JSON-токены

JSON -- универсальный формат обмена. Он подключается к инструментам дизайн-токенов, таким как Style Dictionary, Tokens Studio для Figma и Specify.