Человек решает, нравится ему сайт или нет, за первые секунды и до того, как прочитает хоть одну строчку. Решает по цвету. И это единственная часть дизайна, которую видно даже издалека, с нечитаемым текстом и в маленьком превью, когда ссылку кидают в мессенджер.
Проблема в том, что советы про цвет в интернете заканчиваются примерно на одном месте: вот цветовой круг, вот психология цвета, вот пятнадцать генераторов палитр. Дальше человек открывает генератор, жмёт пробел, получает пять красивых квадратиков и садится в тупик. Куда их девать на реальном сайте, где есть кнопки, ссылки, ошибки формы, наведение мышкой и тёмная тема, не написано нигде.
Мы собрали здесь именно вторую часть. Что такое палитра сайта по ролям, сколько цветов хватает, какой контраст обязателен по стандарту, как проверить палитру на дальтонизм, откуда берётся тёмная тема и что вообще отдавать верстальщику вместо пяти квадратиков.
Если вам сначала нужна база о том, как устроен цвет в принципе, начните с обзорной статьи «Цвет в дизайне»: там разобрали RGB и CMYK, цветовой круг и то, почему на экране получается одно, а в печати другое. Здесь мы эту теорию повторять не будем и сразу возьмём её в работу.
Статья пригодится не только дизайнерам. Чаще всего палитру собирает тот, кто просто делает сайт: владелец небольшого бизнеса на конструкторе, маркетолог, который собирает лендинг, или разработчик, оставшийся без дизайнера. Если интересно, чем занимается человек, для которого это профессия, у нас есть отдельный разбор профессии веб-дизайнера.
А если хочется собрать навык системно, посмотрите подборку курсов по веб-дизайну: там больше сотни программ от коротких интенсивов до полноценных профессий с портфолио.
CheckroiПодборка курсов по веб-дизайну113 курсов • 41 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Из чего состоит палитра сайта
Главная ошибка новичка в том, что он думает о палитре как о наборе красивых цветов. А палитра сайта устроена по ролям: каждый цвет отвечает за конкретную работу и подбирается именно под неё. Красота тут вторична.
Вот роли, которые нужны почти любому сайту.
Основной цвет бренда. Тот, по которому вас узнают. Он редко занимает много места: обычно это логотип, важные заголовки и часть кнопок.
Акцентный цвет. Цвет действия. Им красят главную кнопку, ссылки и всё, куда вы хотите привести взгляд. Акцент работает только пока он редкий: если в него покрашено полстраницы, акцента больше нет.
Нейтральные цвета. Самая недооценённая часть палитры и та, на которой держится весь сайт. Это фон, текст, границы, разделители, тени. Обычно нужно 5–7 оттенков от почти белого до почти чёрного. Именно нейтральных не хватает чаще всего, и именно из-за их нехватки сайт выглядит плоским и дешёвым.
Семантические цвета. Те, что несут смысл: зелёный «сохранено», красный «ошибка в поле», жёлтый «внимание», синий «просто информация». Их обычно четыре, и менять их местами нельзя: пользователь опознаёт их по привычке, почти не глядя.
Проверьте себя прямо сейчас. Откройте свою палитру и попробуйте назвать роль каждого цвета одним словом. Если про какой-то цвет вы можете сказать только «он красивый», в палитре он лишний.
Отдельно про оттенки. Один цвет бренда на живом сайте почти всегда превращается в 3–5 оттенков: обычное состояние, состояние под курсором, нажатое состояние, светлая подложка того же цвета, приглушённый вариант для неактивных элементов. Это минимум, без которого интерфейс не собирается.
Сколько цветов брать и как работает правило 60-30-10
Короткий ответ: два цвета плюс нейтральные. Основной и акцентный, а всё остальное держится на серой шкале. Это скучно звучит, но именно так выглядит большинство сайтов, которые нам нравятся.
Дальше вступает правило 60-30-10, которое пришло в веб из оформления интерьеров. Оно про пропорции площади, которую занимает каждый цвет:
- 60 % — доминирующий цвет, обычно фон. На большинстве сайтов это белый или очень светлый серый
- 30 % — поддерживающий цвет: блоки, подложки секций, шапка и подвал
- 10 % — акцент: кнопки, ссылки, важные метки
Правило работает как способ себя остановить. Оно нужно ровно для одного: не дать акцентному цвету расползтись по всей странице. Как только акцента становится 30 % вместо 10 %, взгляд перестаёт понимать, куда идти, и человек уходит.
Верхняя граница разумного, четыре цвета, не считая нейтральных. Больше нужно только если у вас несколько продуктовых линеек, которые вы намеренно разделяете цветом.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяПять схем сочетания и когда какая уместна
Схема сочетания говорит, где на цветовом круге брать второй и третий цвет относительно первого. Подробный разбор самого круга у нас в статье про цветовой круг Иттена, а здесь коротко про то, какая схема для чего подходит на сайте.
Монохромная. Один цвет и его оттенки разной светлоты. Самая безопасная схема для новичка: испортить её почти невозможно. Хорошо работает для сервисов, документации и всего, где на первом месте текст.
Аналоговая. Три соседних цвета круга, например синий, сине-зелёный и зелёный. Даёт спокойное, «природное» ощущение. Подходит медицине, экологии, финансам и всему, где нужно доверие.
Комплементарная. Два противоположных цвета: синий и оранжевый, фиолетовый и жёлтый. Максимальный контраст и максимальный риск. Работает, только если второй цвет взят в мизерном количестве, строго для акцента. Два ярких противоположных цвета в равных долях смотрятся как реклама распродажи.
Триада. Три цвета на равном расстоянии по кругу. Живо и дружелюбно, поэтому её любят детские, образовательные и развлекательные проекты. Требует дисциплины: один цвет ведущий, два остальных в маленьких дозах.
Раздельно-комплементарная. Основной цвет и два соседа его противоположности. Контраст остаётся, но конфликта меньше. Хороший компромисс, если комплементарная кажется слишком резкой.
Если выбирать не хочется. Берите монохромную схему с одним ярким акцентом со стороны противоположного сектора круга. Это сочетание почти невозможно испортить, и оно выглядит дорого практически в любой нише.
Как отстроить палитру от логотипа, если он уже есть
Частый вопрос: логотип красно-жёлтый, теперь весь сайт обязан быть красно-жёлтым? Нет. Цвет логотипа и палитра сайта решают разные задачи. Логотип должен быть узнаваемым в маленьком размере, интерфейс должен быть читаемым и спокойным несколько минут подряд.
Рабочая схема простая. Цвет логотипа становится основным цветом бренда и живёт в шапке, в подвале и в важных акцентах. Фон при этом остаётся нейтральным. Если фирменный цвет очень насыщенный, для крупных площадей берут его сильно разбавленный вариант, а исходную яркость оставляют кнопкам.
Отдельная ситуация, когда фирменный цвет плохо работает в интерфейсе физически. Жёлтый и салатовый почти невозможно использовать для текста и кнопок: белые буквы на них не читаются, чёрные выглядят как дорожный знак. В этом случае фирменный цвет оставляют декоративным, а для действий заводят второй, более тёмный оттенок из той же семьи.
Цвета под нишу: где ожидания аудитории уже сложились
Аудитория приходит на сайт с готовыми ожиданиями, и ломать их без причины дорого. Ниже ориентиры: их стоит знать, чтобы отступать осознанно.
| Ниша | Что обычно работает | Чего избегают | Почему |
|---|---|---|---|
| Финансы, банки | Синий, тёмно-зелёный, графитовый | Кислотные оттенки | Ожидается надёжность |
| Медицина | Голубой, белый, мягкий зелёный | Красный на больших площадях | Красный читается как тревога |
| Еда и доставка | Красный, оранжевый, тёплый жёлтый | Холодный синий и фиолетовый | Тёплые оттенки усиливают аппетит |
| Детские проекты | Яркая триада, много белого | Тёмный фон | Нужна открытость и безопасность |
| Премиум и ювелирка | Чёрный, глубокий бордо, золото | Многоцветность | Дорого выглядит сдержанность |
| IT и сервисы | Тёмный фон, один яркий акцент | Пёстрые палитры | Внимание уходит на данные |
| Экология | Зелёный, песочный, охра | Синтетические неоновые | Ожидается природность |
| Красота | Пудровые, бежевые, приглушённые | Агрессивный контраст | Продаётся ощущение ухода |
Полезный приём: соберите пять сайтов конкурентов и выпишите их основные цвета. Если у всех синий, у вас есть два хода. Взять синий и выигрывать за счёт всего остального. Или взять соседний сектор круга и стать заметным в рекламе и в соцсетях, но тогда придётся аккуратнее с доверием.
Психология цвета: что подтверждается на практике
Про психологию цвета написано столько, что она превратилась в набор универсальных истин: синий — доверие, зелёный — рост, красный — срочность. Разберём по частям.
Что работает точно: контраст и заметность. Кнопка, которая отличается от окружения, собирает больше нажатий, чем кнопка, которая с ним сливается. Это про физику зрения, и это воспроизводится в любом тесте.
Что работает частично: культурные ассоциации. Красный ценник читается как скидка, потому что нас этому научили магазины. Зелёная галочка означает «готово», потому что так устроены интерфейсы последних тридцати лет. Это привычка, не свойство цвета.
Что не работает: обещания вроде «оранжевая кнопка поднимает конверсию на 34 %». Такие цифры приходят из отдельных экспериментов на конкретных сайтах, где вместе с цветом менялась и заметность кнопки. Перенести число на свой сайт нельзя.
Простой перевод. Вопрос «какой цвет кнопки продаёт лучше» почти всегда стоит заменить на вопрос «достаточно ли эта кнопка отличается от всего вокруг». Второй вопрос имеет ответ, первый — нет.
CheckroiПодборка курсов для UX/UI-дизайнеров100 курсов • 29 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКонтраст: цифры, которые заканчивают спор
Эта часть решает, прочитают ваш сайт или нет, и проверяется она числом, а не на глаз.
Контраст измеряется коэффициентом: отношением яркости текста к яркости фона. Крайние значения — 1:1 (текст сливается с фоном полностью) и 21:1 (чистый чёрный на чистом белом). Международный стандарт доступности WCAG (свод правил W3C о том, как сделать сайт пригодным для людей с ограничениями зрения) задаёт минимумы для уровня AA, на который ориентируются почти все.
| Что проверяем | Минимум по AA | Примеры |
|---|---|---|
| Обычный текст мельче 24 px | 4,5:1 | Абзацы, подписи, пункты меню |
| Крупный текст от 24 px или жирный от 19 px | 3:1 | Заголовки, крупные цитаты |
| Границы и элементы управления | 3:1 | Рамки полей, иконки, переключатели |
| Декоративная графика и логотипы | не нормируется | Фоновые узоры, иллюстрации |
Самый частый провал предсказуем: светло-серый текст на белом фоне. Он выглядит стильно на большом ярком мониторе дизайнера и исчезает на дешёвом ноутбуке, на солнце и у человека сорока пяти лет. Если у вас в макете серый текст светлее #767676 на белом, он уже не проходит порог.
Проверяется всё за секунды: вставляете два HEX-кода в WebAIM Contrast Checker и получаете коэффициент с отметкой, проходит он уровень AA или нет. Про контраст как принцип дизайна в целом у нас есть отдельный разбор: «Принцип контраста».
Проверка на дальтонизм за две минуты
Дальтонизм — нарушение цветового зрения, при котором человек не различает некоторые оттенки. Встречается он примерно у 8 % мужчин и 0,5 % женщин. На аудитории в десять тысяч человек это несколько сотен людей, и в основном платёжеспособных мужчин.
Чаще всего страдает пара «красный и зелёный»: при дейтеранопии и протанопии эти цвета сливаются в похожие грязно-жёлтые. То есть привычная связка «зелёное поле — всё хорошо, красное поле — ошибка» для этих людей просто не существует.
Отсюда единственное правило, которое нужно запомнить: цвет никогда не должен быть единственным носителем смысла. Рядом с цветом обязательно должен быть второй сигнал.
- Ошибка в поле — красная рамка и текст ошибки под полем
- Успешное действие — зелёный фон и иконка галочки
- График с линиями — разные цвета и разный тип линии или подписи прямо у кривой
- Обязательное поле — не только цветом, но и звёздочкой
Проверить макет можно бесплатно: в Figma есть плагины симуляции нарушений цветового зрения, а в браузере Chrome режим эмуляции встроен в панель разработчика. Открываете свой сайт в режиме дейтеранопии и смотрите, понятно ли, где ошибка, а где успех.
CheckroiПодборка курсов по Figma355 курсов • 50 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Состояния элементов: наведение, фокус, нажатие и ошибка
Вот здесь пять квадратиков из генератора окончательно перестают работать. Живая кнопка на сайте существует минимум в пяти видах, и для каждого нужен свой оттенок.
Разберём на примере. Допустим, ваш акцентный цвет — синий #2563EB. Что нужно, кроме него:
| Состояние | Когда видно | Как получить оттенок |
|---|---|---|
| Обычное | Кнопка просто лежит на странице | Базовый цвет |
| Наведение (hover) | Курсор над кнопкой | Базовый темнее на 8–12 % |
| Нажатие (active) | Кнопку зажали | Базовый темнее на 15–20 % |
| Фокус (focus) | До кнопки дошли клавишей Tab | Базовый плюс видимое кольцо вокруг |
| Неактивное (disabled) | Действие сейчас недоступно | Сильно приглушённый серый |
| Загрузка | Запрос ушёл на сервер | Базовый плюс индикатор |
Про фокус отдельно, потому что его забывают чаще всего. Фокус — это подсветка элемента, до которого добрались с клавиатуры. Клавиатурой пользуются люди, которым тяжело работать мышью, и просто те, кто быстро заполняет длинные формы. Дизайнеры регулярно убирают кольцо фокуса «потому что некрасиво», и сайт становится непроходимым без мыши. Кольцо можно перерисовать под свой стиль, убирать его нельзя.
Умножьте шесть состояний на четыре семантических цвета и основной с акцентным, и станет понятно, почему в палитре живого сайта набирается несколько десятков значений.
Тёмная тема: почему её собирают отдельно
Соблазн понятен: взять светлую тему и всё в ней перевернуть. Так не работает, и получается тот самый неприятный тёмный интерфейс, от которого через десять минут болят глаза.
Что ломается при простой инверсии:
Чистый чёрный фон. Пара «чистый чёрный фон, чистый белый текст» даёт контраст 21:1, и на нём буквы начинают дрожать и расплываться. Тёмная тема почти всегда строится на очень тёмном сером в районе #121212–#1A1A1A, а текст берут светло-серым.
Насыщенные цвета. Яркий синий, который отлично читался на белом, на тёмном фоне вибрирует и выглядит ядовитым. В тёмной теме фирменные цвета берут светлее и менее насыщенными, чем в светлой. Код цвета при этом остаётся прежним, а глаз видит его иначе.
Тени. В светлой теме глубину даёт тень. На тёмном фоне тень не видно, и слои разделяют светлотой: чем ближе поверхность к пользователю, тем она светлее.
Семантика. Красный «ошибка» на тёмном фоне часто перестаёт проходить по контрасту. Оба семантических набора приходится подбирать заново и проверять теми же цифрами из таблицы выше.
Порядок работы. Сначала полностью соберите светлую тему со всеми ролями и состояниями. Тёмную делайте только после этого, подбирая для каждой роли своё значение. Тогда это добавка на пару часов, а не второй проект с нуля.
Как отдать палитру в вёрстку, чтобы её не переписали руками
Финальный шаг, на котором рассыпается большинство хороших палитр. Дизайнер отдаёт разработчику картинку с квадратиками и HEX-кодами, разработчик вписывает эти коды прямо в стили в тридцати местах, и через полгода поменять фирменный цвет становится отдельным проектом.
Правильный способ: отдавать токены вместо голых кодов. Дизайн-токен это именованная переменная: вместо «синий #2563EB» пишется «цвет основного действия», и уже он равен конкретному коду. Меняется код в одном месте, а меняется весь сайт.
В вёрстке токены живут как CSS-переменные — записи вида --имя: значение, на которые ссылаются все остальные стили:
:root {
--color-bg: #FFFFFF;
--color-text: #1A1A1A;
--color-text-muted: #6B7280;
--color-primary: #2563EB;
--color-primary-hover: #1D4ED8;
--color-danger: #DC2626;
--color-success: #16A34A;
}Важная деталь в именах. Токен называют по роли: --color-primary вместо --color-blue. Иначе через год при ребрендинге в проекте окажется переменная «синий», равная зелёному, и это будет уже навсегда.
Тёмная тема при таком подходе становится просто вторым набором значений для тех же имён. Разработчику не нужно ничего переписывать, он подставляет другой список.
Такой способ мышления уже подступ к дизайн-системам, и именно за него платят на рынке заметно больше, чем за красивые макеты. Если тема цепляет, посмотрите программы для UX/UI-дизайнеров: работа с токенами и состояниями там разбирается предметно.
Инструменты: десять сервисов и что умеет каждый
Генераторов палитр в интернете сотни, и большинство делают одно и то же. Вот те, что закрывают разные задачи.
| Сервис | Адрес | Для чего брать |
|---|---|---|
| Coolors | coolors.co | Быстро перебирать палитры пробелом, есть проверка на дальтонизм |
| Adobe Color | color.adobe.com | Схемы по цветовому кругу и палитра из загруженной фотографии |
| WebAIM Contrast Checker | webaim.org | Проверка контраста двух цветов по WCAG |
| Realtime Colors | realtimecolors.com | Примерить палитру на макете целой страницы |
| Radix Colors | radix-ui.com/colors | Готовые шкалы со всеми состояниями и тёмной темой |
| Colormind | colormind.io | Подобрать остальные цвета к уже зафиксированному |
| Paletton | paletton.com | Классические схемы круга с ручной настройкой |
| Color Hunt | colorhunt.co | Готовые сочетания для вдохновения |
| Khroma | khroma.co | Генерация под ваши личные предпочтения |
| Chrome DevTools | встроен в браузер | Эмуляция дальтонизма и тёмной темы на живом сайте |
Если из всего списка выбирать три: Realtime Colors для примерки, WebAIM для проверки контраста и Radix Colors, когда нужны готовые шкалы состояний и не хочется считать оттенки руками.
Как собрать палитру за час: семь шагов
Порядок, который работает, если делать именно в этой последовательности.
Шаг 1. Определите характер. Три прилагательных о том, каким должен ощущаться сайт: «спокойный, надёжный, взрослый» или «яркий, быстрый, молодой». Дальше каждый выбор сверяется с этими словами.
Шаг 2. Посмотрите на нишу. Выпишите цвета пяти конкурентов и решите, вписываетесь вы или намеренно отстраиваетесь.
Шаг 3. Зафиксируйте основной цвет. Один. Из логотипа, если он есть, или из характера, если логотипа нет.
Шаг 4. Соберите нейтральную шкалу. 5–7 оттенков серого от фона до основного текста. Скучный шаг, который делает 80 % результата.
Шаг 5. Добавьте акцент и семантику. Один акцентный цвет для действий плюс четыре смысловых: успех, ошибка, предупреждение, информация.
Шаг 6. Разложите на состояния. Для каждого интерактивного цвета сделайте оттенки наведения, нажатия и неактивного вида.
Шаг 7. Проверьте цифрами. Прогоните все пары «текст на фоне» через проверку контраста и посмотрите макет в режиме дальтонизма. Красивая палитра, не проходящая 4,5:1, ещё не готова.
Если после этого хочется потренироваться на живом макете, у нас есть практическая инструкция, как сделать макет сайта самому.
Семь ошибок, из-за которых сайт выглядит дёшево
Ошибка 1 — слишком много цветов. Пять ярких цветов в равных долях выглядят как детская площадка. Лечится сокращением до двух плюс нейтральные.
Ошибка 2 — нет нейтральной шкалы. Два-три серых на весь сайт дают ощущение плоскости и незаконченности. Нужно 5–7.
Ошибка 3 — светло-серый текст на белом. Самый частый провал по контрасту. Выглядит воздушно у автора и не читается у аудитории.
Ошибка 4 — акцент везде. Если акцентным цветом покрашены все кнопки, включая «отмену» и «назад», пользователь не понимает, какое действие главное.
Ошибка 5 — забытые состояния. Кнопка, которая никак не реагирует на курсор, ощущается сломанной, даже если технически работает.
Ошибка 6 — цвет как единственный сигнал. Красная рамка без текста ошибки не сообщает ничего ни дальтонику, ни человеку, который просто торопится.
Ошибка 7 — палитра собрана по фотографии. Сочетание, которое великолепно смотрелось на фотографии заката, на странице с формой и таблицей может не работать вообще.
Ещё один способ поймать себя на устаревших решениях: посмотреть, куда движется индустрия. Мы собирали тренды веб-дизайна, и цветовая часть там обновляется заметно быстрее остальных.
Чек-лист: проверьте палитру за пять минут
- У каждого цвета есть роль, которую можно назвать одним словом
- Основных цветов не больше двух, не считая нейтральных
- Нейтральная шкала содержит минимум пять оттенков
- Весь основной текст проходит контраст 4,5:1
- Заголовки и границы полей проходят 3:1
- У кнопок и ссылок есть оттенки наведения, нажатия и неактивного состояния
- Кольцо фокуса видно при переходе клавишей Tab
- Нигде цвет не остаётся единственным носителем смысла
- Макет проверен в режиме эмуляции дальтонизма
- Если есть тёмная тема, для неё подобран отдельный набор значений
- Цвета названы по ролям
Если все одиннадцать пунктов закрыты, палитру можно отдавать в работу и переставать её крутить.
Где научиться работать с цветом
Цвет — та часть дизайна, где самоучкам тяжелее всего: ошибку видно всем, а сформулировать, что именно не так, получается далеко не сразу. Пары недель с преподавателем, который разбирает ваши макеты, обычно хватает, чтобы закрыть то, на что уходят месяцы самостоятельных попыток.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Профессия «Веб-дизайнер» Перейти на сайт курса |  Skillbox | 181 582 ₽ | 7387 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер с нуля до PRO» Перейти на сайт курса |  Contented | 179 604 ₽ | 4989 ₽/мес. | 15 месяцев | Обзор курса |
| Веб-дизайн с нуля до middle Перейти на сайт курса |  Нетология | 132 900 ₽ | 5783 ₽/мес. | 12 месяцев | Обзор курса |
| Дизайнер социальных сетей (веб-дизайнер) Перейти на сайт курса | Skillbox | 32 120 ₽ | 2677 ₽/мес. | 3 месяца | Обзор курса |
| Веб-дизайн 3.0 Перейти на сайт курса | Skillbox | 133 684 ₽ | 3904 ₽/мес. | 9 месяцев | Обзор курса |
| ДО Профессия Веб-дизайнер 3.0 Перейти на сайт курса |  GeekBrains | 171 831 ₽ | 3167 ₽/мес. | 16 месяцев | Обзор курса |
| Профессия Веб-дизайнер Перейти на сайт курса |  Эдюсон | 94 069 ₽ | 7839 ₽/мес. | 4 месяца | Обзор курса |
| Веб-дизайнер с нуля |  Skypro | 129 200 ₽ | 5444 ₽/мес. | 12 месяцев | Обзор курса |
| Веб-дизайнер + ИИ Перейти на сайт курса |  Академия Синергия | 93 156 ₽ | 3882 ₽/мес. | 6 месяцев | Обзор курса |
| UX/UI-дизайнер Перейти на сайт курса | Нетология | 131 900 ₽ | 4072 ₽/мес. | 7 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по веб-дизайну
Если хочется двигаться дальше самостоятельно, начните с соседних тем: у нас есть разбор градиентов в дизайне и пошаговый план, как освоить веб-дизайн с нуля.
