Цветовые модели: чем они отличаются
Один и тот же цвет можно описать по-разному. Выбор модели зависит от того, что вы делаете: вёрстку, дизайн интерфейса или макет для типографии.
| Модель | Как устроена | Где применяется |
|---|---|---|
| HEX | Шестнадцатеричная запись RGB | Вёрстка, CSS, самый компактный формат |
| RGB | Красный, зелёный, синий от 0 до 255 | Экраны, работа с прозрачностью через alpha |
| HSL | Тон, насыщенность, светлота | Дизайн-системы, генерация оттенков |
| CMYK | Голубой, пурпурный, жёлтый, чёрный | Полиграфия, печать на бумаге |
HEX и RGB — это по сути одно и то же, записанное разными способами. Запись #2E53DD означает 46 красного, 83 зелёного и 221 синего.
Почему HSL удобнее для дизайна
В HEX и RGB непонятно, как получить тот же цвет, но светлее. Приходится подбирать наугад. HSL решает эту проблему: тон, насыщенность и светлота разделены, поэтому достаточно изменить одно число.
- Тон (Hue) — положение на цветовом круге от 0 до 360 градусов. Красный в нуле, зелёный на 120, синий на 240
- Насыщенность (Saturation) — интенсивность от 0 % (серый) до 100 % (чистый цвет)
- Светлота (Lightness) — от 0 % (чёрный) через 50 % (чистый цвет) до 100 % (белый)
Именно поэтому дизайн-системы строят на HSL: меняя одну светлоту, получают всю шкалу оттенков от 50 до 900 с сохранением характера цвета.
CMYK и печать
Экран излучает свет и смешивает цвета аддитивно: чем больше составляющих, тем светлее результат. Бумага свет отражает, и краски работают наоборот — субтрактивно.
Контраст и доступность
Стандарт WCAG 2.1 задаёт минимальные требования к контрасту, чтобы текст оставался читаемым для людей со слабым зрением. Коэффициент рассчитывается из относительной яркости двух цветов.
- 4.5:1 — уровень AA для обычного текста, минимум для большинства сайтов
- 3:1 — уровень AA для крупного текста от 18pt или жирного от 14pt
- 7:1 — уровень AAA, повышенное требование
- 3:1 — для границ полей ввода, иконок и других нетекстовых элементов
Проверка контраста — не формальность. Низкий контраст ухудшает читаемость для всех, а при ярком солнце на телефоне светло-серый текст на белом становится нечитаемым в принципе.
Цветовые схемы
Гармоничные сочетания строятся по положению цветов на круге:
- Комплементарная — цвет напротив, разница в 180 градусов. Максимальный контраст, хорошо работает для акцентов и кнопок действия
- Триада — три цвета через 120 градусов. Живое, но сбалансированное сочетание
- Аналоговая — соседние цвета в пределах 30 градусов. Спокойное, гармоничное решение для фонов
Частые вопросы
Что означают буквы в HEX-коде?
Можно ли записать HEX тремя символами?
#F0A раскрывается как #FF00AA: каждый символ дублируется. Работает только когда обе цифры в паре совпадают, поэтому так можно записать далеко не любой цвет.Почему цвет на печати отличается от экрана?
Что такое HSLA и RGBA?
rgba(46, 83, 221, 0.5) означает полупрозрачный синий. В современном CSS прозрачность можно задавать и через слэш: rgb(46 83 221 / 50%).