В прошлом уроке мы увидели, что человек замечает интерфейс избирательно и читает его через задачу, опыт и ожидания. Теперь разберём один из самых быстрых визуальных сигналов — цвет: как он меняется в контексте, чем цветовая система отличается от набора HEX-кодов, почему «психология цвета» не сводится к таблице эмоций и как собрать первую рабочую палитру без магии и вкусовщины.
В предыдущем уроке мы закончили на простой мысли: наличие элемента ещё не гарантирует, что человек его заметит. Цвет часто используют как попытку решить эту проблему мгновенно — «сделаем кнопку ярче», «ошибку покрасим в красный», «важное выделим акцентом». Иногда это работает. Но если относиться к цвету как к универсальному усилителю, интерфейс быстро превращается в соревнование сигналов.
Полезнее смотреть на цвет как на отношение между элементами. Один и тот же оттенок может быть акцентом на спокойном фоне и почти исчезнуть среди нескольких столь же насыщенных соседей. Светлый текст может хорошо читаться на одном фоне и проваливаться на другом. Цвет, который кажется «спокойным» в пустом образце, внутри экрана может стать тревожным, дешёвым, медицинским или праздничным — в зависимости от соседних цветов, содержания и контекста продукта.
Поэтому этот урок не начинается с таблицы «какой цвет что означает». Он начинается с того, что цвет почти никогда не воспринимается изолированно. И это связывает тему напрямую с прошлым уроком: человек видит не набор независимых свойств, а сцену, где сигналы конкурируют и меняют друг друга.
Йозеф Альберс строил преподавание цвета именно вокруг такого наблюдения. В Interaction of Color он предлагал не начинать с догмы о «правильных» сочетаниях, а проверять, как цвет ведёт себя рядом с другими цветами.[1]
In visual perception a color is almost never seen as it really is—as it physically is.
Для интерфейсного дизайнера это хорошая прививка от работы по образцам. Палитра в отдельном файле может выглядеть убедительно, а после встречи с текстом, карточками, фотографиями и состояниями потерять всю логику. Поэтому дальше мы будем постоянно возвращать цвет в контекст экрана.
Новичок быстро сталкивается с названиями RGB, HEX, HSL, sRGB, Display P3, Lab и OKLCH — и может решить, что это семь конкурирующих способов «выбрать цвет». На самом деле они отвечают на разные вопросы. RGB описывает цвет через красный, зелёный и синий свет; HEX и HSL — способы записать или представить значения; sRGB и Display P3 задают диапазон возможных цветов; Lab и OKLCH помогают описывать изменения цвета ближе к тому, как мы воспринимаем светлоту и различия оттенков. После такого разделения инструменты становятся заметно понятнее.
| Уровень | Пример | Что он отвечает |
|---|---|---|
| Цветовая модель | RGB | Какими компонентами описывается цвет. |
| Цветовое пространство | sRGB, Display P3 | Какие реальные цвета стоят за числовыми координатами и какой диапазон можно описать. |
| Форма записи | #4f46e5, rgb(...), hsl(...) |
Как конкретное значение записано в инструменте или коде. |
| Перцептивное представление | Lab, OKLCH | Как удобнее менять светлоту, цветность и оттенок с большей привязкой к визуальному восприятию. |
CSS — язык, которым в вебе задают внешний вид страницы, включая цвет. Его современная спецификация CSS Color 4, развиваемая организацией веб-стандартов W3C, описывает экранный RGB как аддитивную модель: красный, зелёный и синий свет складываются.[2] Для интерфейсного дизайна этого достаточно, чтобы понять главное: RGB — естественная отправная точка экранного цвета. Мы не смешиваем краски; мы управляем светом дисплея.
Запись #4f46e5 компактна и однозначна, но дизайнеру она почти ничего не говорит о характере изменения. Чтобы осветлить цвет, снизить его цветность или повернуть оттенок, приходится либо подбирать значения визуально, либо пользоваться другим представлением. В CSS шестизначный HEX буквально декодируется в три RGB-компонента; например, #00ff00 и rgb(0 255 0) задают один и тот же sRGB-цвет.[2]
HSL поэтому кажется удобнее: отдельно есть оттенок, насыщенность и светлота. Но у HSL есть ловушка. Его параметр Lightness не равен воспринимаемой светлоте. В спецификации приведён наглядный пример: чистый синий и чистый жёлтый могут оба иметь HSL Lightness 50%, хотя визуально жёлтый намного светлее синего.[2]
Если два цвета имеют одинаковое числовое значение «светлоты» в конкретной модели, это ещё не означает, что они дадут одинаковый визуальный вес или одинаковый контраст. Сначала смотрите на восприятие, затем — на числа.
Современные представления цвета вроде OKLCH пытаются сделать управление светлотой, цветностью и оттенком более согласованным с восприятием. CSS Color 4 уже включает Oklab/OKLCH и более широкий, чем привычный sRGB, диапазон Display P3.[2] Для этого урока вам не нужно учить синтаксис. Достаточно распознавать термин и понимать, зачем индустрия вообще двигается в сторону перцептивных координат: одинаковые числовые шаги желательно делать более похожими на одинаковые визуальные шаги.
Какая бы система ни стояла внутри инструмента, дизайнеру нужна рабочая модель. Для начального уровня достаточно трёх вопросов: какой это оттенок, насколько он светлый и насколько он цветной. В HSL третий параметр называют насыщенностью (saturation), в OKLCH используют цветность (chroma). Это не строго взаимозаменяемые величины, но как дизайнерские оси они помогают отделить разные типы изменения.
Но названия семейства недостаточно. Два синих могут ощущаться совершенно по-разному: один почти белый и спокойный, другой тёмный и плотный. Поэтому после оттенка полезно отдельно смотреть на светлоту, а затем — на то, насколько выраженно цвет отличается от нейтрального серого.
Эти три ручки полезнее списка «красивых цветов», потому что позволяют объяснять изменение. Вместо «сделай этот синий поспокойнее» можно уточнить: оставить семейство оттенка, немного снизить цветность и поднять светлоту. Вместо «хочу акцент посильнее» можно проверить, нужен ли действительно другой оттенок или достаточно увеличить контраст по светлоте.
В реальной палитре эти оси работают одновременно. Поэтому попытка «добавить ещё один цвет» часто маскирует более простой ход: сохранить оттенок, но создать светлый фон, основной тон и более тёмный вариант. Так палитра становится семейством, а не коробкой случайных образцов.
Цвет в интерфейсе должен не только создавать характер, но и помогать различать элементы. Здесь полезно отделить контраст по светлоте от контраста по оттенку и цветности. Два элемента могут быть очень разными по оттенку, но близкими по светлоте; тогда они выглядят различно в цвете, но их граница или текст могут оказаться слабее, чем ожидал дизайнер.
Самая простая диагностика для джуна — мысленно или инструментально убрать цвет. Если важная разница полностью исчезла в серой версии, значит она держалась преимущественно на оттенке или цветности. Это не означает, что решение автоматически плохое. Это означает, что вы точно знаете, какой канал несёт смысл.
Для текста и мелких элементов светлотный контраст особенно важен, потому что именно он помогает форме отделиться от фона. Но в более крупных областях цветность и оттенок могут дополнительно усиливать группировку или акцент. Проблема начинается тогда, когда дизайнер пытается заменить структурную разницу одним цветовым сигналом: одинаковые кнопки становятся «главной» и «вторичной» только потому, что одна синяя, а другая серая; статусы различаются только красным и зелёным; активная вкладка отличается от неактивной едва заметным оттенком.
«Эти два состояния разных цветов, значит пользователь их различит».
«Проверим, чем состояния различаются кроме оттенка: светлотой, подписью, формой или положением».
Формальные коэффициенты контраста, особенности цветового зрения и требования WCAG — международных рекомендаций по доступности веб-контента — будут в отдельном уроке по доступности. Здесь нам нужна база до стандарта: если смысл зависит от различия цветов, вы должны понимать, какого именно различия. Спецификация CSS Color отдельно напоминает авторам не использовать цвет как единственный различающий признак.[2]
Самая популярная плохая версия этой темы выглядит так: красный — энергия и опасность, синий — доверие, зелёный — природа, фиолетовый — премиальность. Такие таблицы удобны, потому что обещают решение без контекста. Но научная картина одновременно интереснее и менее удобна.
Систематический обзор Домицеле Йонаускайте и Кристин Мор 2025 года собрал 132 рецензируемые статьи, опубликованные с 1895 по 2022 год, с 42 266 участниками из 64 стран. Авторы действительно нашли устойчивые связи между цветовыми категориями и эмоциональными измерениями, но большинство соответствий были соответствиями «многие ко многим»: один цвет связывался с несколькими эмоциями, а один эмоциональный смысл — с несколькими цветами. Существенную роль играли светлота, насыщенность и оттенок.[3]
Например, красный в обзоре связан не с одной эмоцией, а с высокоактивационными положительными и отрицательными состояниями. Светлые цвета чаще связывались с положительными эмоциями, тёмные — с отрицательными. Но авторы отдельно предупреждают: большая часть исследований измеряла ассоциации, а не доказанный эффект цвета на реально переживаемую эмоцию в конкретном интерфейсном контексте.[3]
Кросс-культурное исследование 2020 года с 4 598 участниками из 30 стран и 22 языков тоже нашло сильное общее ядро цвето-эмоциональных ассоциаций, но страна, язык и географическая близость дополнительно объясняли различия между ответами.[4] То есть неверны обе крайности: и «значения цветов полностью универсальны», и «цвет вообще ничего не означает вне личного вкуса».
Более ранний обзор Эллиота и Майера также подчёркивает контекстность влияния цвета на аффект, когнитивные процессы и поведение и предупреждает о методологических проблемах, которые долго мешали этой области.[5] Для практики это приводит к простой дисциплине мышления: эмоциональная характеристика палитры — гипотеза о восприятии, а не физическое свойство оттенка.
Не «синий вызывает доверие», а «эта холодная, умеренно насыщенная и светлая палитра в контексте нашего продукта должна восприниматься спокойнее и сдержаннее; позже это предположение нужно проверять на аудитории».
После разговора о контексте легко впасть в другую крайность: «раз всё относительно, правил нет». Это тоже не помогает работать. Цветовой круг и привычные схемы сочетаний полезны как способ системно генерировать варианты. Они показывают отношения между оттенками, но не гарантируют красивый результат автоматически.
| Схема | Как строится | Для чего полезна новичку |
|---|---|---|
| Монохромная | Один основной оттенок, различия создаются прежде всего светлотой и цветностью. | Учиться строить семейство, не пряча ошибки за большим количеством оттенков. |
| Аналоговая | Несколько соседних оттенков на цветовом круге. | Добавить вариативность, сохраняя близкое цветовое направление. |
| Комплементарная | Основной оттенок и противоположная область круга. | Получить явный цветовой контрапункт, который затем приходится дозировать. |
Важно, что во всех трёх случаях гармонию делает не геометрия круга сама по себе. Если взять пять одинаково насыщенных цветов и раздать им одинаковую площадь, схема может быть формально «правильной» и практически неуправляемой. Светлота, цветность, площадь и соседство продолжают работать.
Самая частая ошибка новичка — начинать с набора любимых оттенков. Практичнее собрать палитру как маленькую систему ограничений. Полноценную архитектуру цветовой системы мы построим позже; сейчас нужна первая дисциплина: каждый добавленный цвет должен иметь понятное отношение к остальным.
На этой странице основной текст почти нейтрален, ссылки и учебные акценты используют индиго, предупреждения — тёплый янтарный, хорошие и плохие примеры различаются зелёным и красным. Важнее то, что вокруг каждого насыщенного цвета есть мягкая версия фона и соответствующая граница. Поэтому цвет может появляться на большой площади, не превращая весь урок в пятно максимальной насыщенности.
Это хороший пример для наблюдения, но не повод уже сейчас разбирать внутреннее устройство дизайн-систем. Здесь достаточно заметить принцип: палитра становится устойчивее, когда цвет существует семейством и имеет ограниченную долю внимания.
Если искать «тренды цвета» по подборкам вдохновения, легко получить список сезонных оттенков, градиентов и эффектов. Для профессиональной базы полезнее смотреть на изменения в крупных платформенных системах и стандартах. Там видно более устойчивое направление: цвет становится адаптивнее, выразительнее и технически богаче, но одновременно сильнее связан с контекстом.
В прошлом уроке мы уже использовали исследование Material 3 Expressive, чтобы показать конфликт новизны и знакомых паттернов. Теперь посмотрим на тот же материал с другой стороны. Google описывает выразительный дизайн как сочетание цвета, формы, размера, движения и контейнеров; в серии из 46 исследований с более чем 18 000 участников компания оценивала и эмоциональное восприятие, и удобство использования.[6]
В кейсе почтового приложения ключевое действие находили заметно быстрее в выразительной версии, но Google не приписывает результат одному цвету: кнопка была одновременно крупнее, перемещена ближе к зоне действия и выделена цветом.[6] Это важная методическая деталь. Современная выразительность — не лицензия раскрасить всё; цвет работает в связке с будущими темами композиции и размера.
Material 3 поддерживает динамический цвет: исходный цвет может использоваться для построения целой схемы, которая адаптируется к пользовательскому оформлению системы.[7] Текущие рекомендации Apple тоже описывают системные цвета, способные адаптироваться к разным фонам, режимам внешнего вида и настройкам доступности.[8]
Мы пока не изучаем цветовые роли и темы — это территория последующих уроков. Но уже сейчас полезно отказаться от модели «бренд = пять неизменных HEX-кодов». В современных продуктах один визуальный характер должен переживать разные фоны, режимы и устройства.
CSS Color 4 позволяет браузерам работать не только с привычным sRGB: стандарт включает Display P3, Lab, Oklab и OKLCH.[2] Для базового курса важен не синтаксис, а направление развития: цифровой цвет постепенно перестаёт сводиться к одному привычному диапазону и одной форме записи.
Практический вывод для джуна скромнее, чем может показаться: не нужно немедленно переводить каждый проект в OKLCH или Display P3. Достаточно понимать, что HEX — удобная запись, а не вся теория цифрового цвета. Когда в более продвинутых инструментах встретятся другие пространства и способы задания цвета, вы уже будете понимать, какую задачу они пытаются решить.
До этого момента мы специально удерживали геометрию экрана почти неизменной. Но теперь появляется предел: палитра не может одна решить порядок чтения, расстояния, выравнивание и отношения размеров. Если пять элементов одинаково крупные и одинаково близкие друг к другу, один акцентный цвет может подсказать приоритет, но не способен построить всю структуру.
Сетка здесь появляется только как мост к следующему уроку. Её начальная функция для нас сейчас — дать цвету стабильный пространственный каркас. Когда элементы повторяют выравнивания и интервалы, цвету не приходится одновременно объяснять, что относится к одной группе, что важнее и где начинается следующий блок.
Следующий урок начнётся ровно здесь: с вопроса, как управлять вниманием без необходимости красить каждый важный элемент. Мы разберём баланс, ритм, пропорции, пространство, модульные сетки и визуальную иерархию, а цвет из этого урока станет одним из инструментов внутри более широкой композиционной системы.
Возьмите один и тот же очень простой макет: светлый фон, заголовок, два абзаца, одна основная кнопка, одна вторичная кнопка и маленький информационный блок. Не меняйте размеры, расположение, шрифт и текст между версиями. Ваша задача — сделать две разные цветовые гипотезы для одного и того же продукта, чтобы не спутать эффект цвета с эффектом композиции.
Представьте сервис городских событий. Версия A должна ощущаться более сдержанной и информационной. Версия B — более живой и социальной. Это не «правильные эмоции цвета», а две гипотезы, которые вы попробуете выразить палитрой.
Если во второй версии вам хочется увеличить кнопку, переставить блоки, добавить больше воздуха или изменить размеры заголовков — не делайте этого. Запишите идею отдельно. Это уже композиция и визуальная иерархия; следующий урок как раз даст язык для таких решений.
B. Физическое значение может оставаться тем же, но визуальное отношение к окружению меняется. Именно это лежит в основе упражнений Альберса.
B. В CSS шестизначный HEX декодируется в красный, зелёный и синий компоненты. Он удобен как запись, но сам по себе не даёт удобных дизайнерских осей.
B. Устойчивые ассоциации существуют, но они не работают как фиксированный словарь. Поэтому эмоциональное направление палитры — проверяемая гипотеза.
B. Ограниченное семейство позволяет увидеть отношения светлоты и цветности до того, как множество оттенков начнёт маскировать ошибки.
B. Цвет способен усиливать приоритет, но не должен в одиночку нести всю пространственную структуру экрана.