Как выбрать цветовую палитру для сайта

Рабочая палитра сайта — это не «любимые цвета», а система ролей: фон, поверхность, текст, один акцент и пара служебных цветов на состояния. Базовый каркас держится на правиле 60-30-10 и трёх активных цветах, не больше. Дальше — проверка на контраст (минимум 4.5:1 по WCAG) и здравый смысл вместо эзотерики «энергии оттенков». Ниже — система по шагам на сквозном примере эко-магазина.

Представьте: вы открыли сайт, и через секунду внутри что-то щёлкнуло — «солидно» или «дёшево», «спокойно» или «навязчиво». Вы ещё не прочитали ни строчки, а решение уже наполовину принято. Это сработал цвет.

И вот тут начинается главная ошибка. Большинство выбирает палитру по принципу «мне нравится синенький». А цвет — не вопрос вкуса. Это инструмент коммуникации: он за доли секунды сообщает посетителю, к какому миру относится ваш бизнес и можно ли вам доверять.

Хорошая новость: подбор палитры — это не талант, а процедура. Её можно пройти по шагам, даже если вы ни разу не дизайнер. Разберём систему на сквозном примере: Марина из Казани открывает онлайн-магазин эко-косметики «Листва» и хочет сайт, который выглядит «натурально, но не как аптека».

Палитра как гардероб: метафора, которая всё объясняет

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

Сайт устроен так же. Большую часть экрана занимают спокойные нейтральные цвета (база), и совсем чуть-чуть — яркий акцент, который ведёт взгляд к кнопке «Купить». Если надеть десять ярких шарфов сразу, получится клоун. Если залить сайт пятью кричащими цветами — то же самое.

Роли цветов: из чего вообще состоит палитра

Профессиональная палитра — это не «три красивых цвета», а набор ролей. Каждый цвет отвечает за свою работу:

• Основной (бренд) — цвет, по которому вас узнают. Логотип, ключевые элементы. У «Листвы» это глубокий зелёный.
• Фон — самый большой по площади, спокойный. Чаще всего почти белый или очень светлый нейтральный.
• Поверхность — карточки, блоки, всплывающие панели. Чуть отличается от фона, чтобы создавать «слои».
• Акцент — цвет действия: кнопки, ссылки, важные значки. Его мало, и он самый заметный.
• Текст — обычно тёмно-серый (не чистый чёрный) для основного и более светлый серый для второстепенного.
• Состояния — служебные сигналы: зелёный «успех», красный «ошибка», жёлтый «внимание». Их редко вспоминают, а без них интерфейс немой.

Заметьте: «красивых» цветов тут всего два-три. Всё остальное — это нейтрали и сигналы. Именно поэтому профессиональные сайты выглядят сдержанно, а самодельные — пёстро.

Правило 60-30-10: сколько какого цвета должно быть

Это главный приём, который отделяет аккуратный сайт от хаотичного. Цвет распределяется по экрану в пропорции 60-30-10:

Логика простая: 60% — спокойный фон, на котором глаз отдыхает. 30% — ваш фирменный цвет, который держит узнаваемость. 10% — акцент, который кричит «нажми сюда». Когда акцента ровно 10%, кнопка действия видна сразу. Когда им залито пол-экрана — видно всё и не видно ничего.

Шаг 1. Посмотрите на конкурентов и нишу

Прежде чем фантазировать, откройте 5–7 сайтов конкурентов и выпишите их цвета. Через десять минут вы увидите норму вашей ниши. У каждой сферы есть сложившийся «цветовой код» — это не мода, а накопленные ожидания людей.

Дальше у вас два честных пути. Вписаться в норму — взять палитру из диапазона ниши: посетитель сразу понимает, куда попал, доверие выше. Осознанно выделиться — нарушить ожидание и занять свободное визуальное место. Оба варианта рабочие. Плохо одно — выбрать наугад и потом гадать, почему «что-то не так».

Марина увидела, что половина эко-магазинов выглядит «как аптека»: холодный зелёный плюс белый. Она решила вписаться в нишу по базе (зелёный + бежевый), но добавить тёплый терракотовый акцент — чтобы выделиться и уйти от «аптечного» ощущения.

Шаг 2. Определите нужную эмоцию (психология без эзотерики)

Психология цвета — реальная вещь, но без мистики. Никакой цвет не «лечит чакры». Зато у цветов есть устойчивые культурные ассоциации, проверенные на больших аудиториях:

• Синий — доверие, надёжность, технологичность. Поэтому в нём почти все банки и IT.
• Зелёный — природа, здоровье, спокойствие, «безопасно».
• Красный / оранжевый — энергия, аппетит, срочность, действие.
• Фиолетовый — креатив, премиальность, что-то нестандартное.
• Жёлтый — оптимизм, дружелюбие, внимание (легко переборщить).
• Чёрный / графит — статус, минимализм, дороговизна.

Важная оговорка: ассоциации культурно зависимы и не железобетонны. Поэтому не опирайтесь на них слепо — выберите одну главную эмоцию, которую должен почувствовать посетитель, и стройте вокруг неё. Для «Листвы» это «спокойная забота» — отсюда зелёный как фирменный цвет.

Шаг 3. Выберите тип цветовой схемы

Чтобы цвета сочетались, их берут не наугад, а по цветовому кругу. Три рабочих варианта:

1. Монохромная — один цвет и его светлые/тёмные оттенки. Строго, элегантно, почти невозможно испортить. Идеальна для новичка.
2. Аналоговая — 2–3 соседних цвета (зелёный + жёлто-зелёный, синий + фиолетовый). Гармонично и современно.
3. Комплементарная — противоположные цвета (синий + оранжевый, зелёный + терракотовый). Мощный контраст, отличная заметность кнопок, но требует баланса.

Для 80% проектов хватает монохромной или аналоговой схемы. Комплементарную мы применяем дозированно — ровно на тот самый акцент в 10%. Марина так и сделала: зелёная база (аналоговая логика) плюс комплементарный терракотовый на кнопках.

Шаг 4. Проверьте контраст и доступность

Красивая палитра, которую невозможно прочитать, — это не палитра, а декорация. Самый частый провал новичков — светло-серый текст на белом фоне: на макете дизайнера «воздушно», на телефоне под солнцем — нечитаемо.

Есть объективный стандарт — WCAG. Он задаёт минимальное соотношение контраста между текстом и фоном:

• обычный текст — не ниже 4.5:1;
• крупный текст (от 24px или 18px жирным) — не ниже 3:1.

Проверьте все критичные пары: основной текст на фоне, текст на кнопке, подписи на карточках, ссылки. Это бесплатно: webaim.org/resources/contrastchecker или встроенная проверка контраста в Figma.

Источник: WCAG 2.1, критерий 1.4.3 «Contrast (Minimum)», W3C.

Тёмная тема: не инверсия, а отдельная палитра

Тёмная тема — это модно и приятно глазам вечером, но это не «инвертировать цвета». Это самостоятельная палитра, которую собирают заново по тем же правилам ролей и контраста:

• фон делают не чистым чёрным, а тёмно-синим или графитовым (#0C1120, например) — глазам легче;
• акцент часто чуть приглушают: на тёмном фоне яркие цвета «звенят» сильнее;
• контраст текста проверяют заново — пары на светлой теме на тёмной ведут себя иначе.

И честно: если нет ресурса аккуратно поддерживать две темы, лучше сделать одну, но безупречную, чем две посредственные.

Частые ошибки, на которых горят почти все

• Слишком много цветов. Пять активных цветов — это не «ярко», это шум. Держите три.
• Низкий контраст. Светло-серый текст «для воздушности», который не читается. Проверяйте 4.5:1.
• Чистый #000 на чистом #fff. Резко и дёшево. Берите тёмно-серый текст и слегка тёплый/холодный белый фон.
• Акцент везде. Когда всё кнопки — нет ни одной кнопки. Акцент должен быть редким.
• «Мне нравится» вместо аудитории. Ваш любимый цвет и цвет, которому доверяет ваш клиент, — не всегда одно и то же.
• Цвет «по тренду». Тренды уходят, а ребрендинг стоит денег. Стройте палитру под смысл, а не под моду.

Инструменты, которые реально помогают

• Coolors.co — быстро генерирует и сохраняет палитры, удобно подбирать гармонию.
• Adobe Color — цветовой круг с готовыми схемами (моно, аналоговая, комплементарная).
• WebAIM Contrast Checker — проверка пар «текст-фон» на WCAG за две секунды.
• Realtime Colors — примерить палитру сразу на макете сайта, а не на квадратиках.
• Figma — собрать палитру в переменные/стили, чтобы цвет не «плыл» по ходу проекта.

Собираем палитру «Листвы» целиком

Чтобы система не осталась теорией, посмотрим, что в итоге получилось у Марины — это готовый шаблон, который вы можете повторить для своего проекта:

• Фон (60%) — тёплый off-white #F7F5EF. Не чистый белый: чуть кремовый оттенок сразу добавляет «натуральности», которую искала Марина.
• Поверхность и бренд (30%) — глубокий зелёный #2E5E3A на карточках, футере и бренд-блоках. Это якорь узнаваемости.
• Акцент (10%) — тёплый терракотовый #E07A4D только на кнопках «В корзину» и бейджах. Его мало — поэтому он работает.
• Текст — тёмно-серый #1F2A24 для основного, серо-зелёный #5A6B60 для второстепенного. Никакого чистого чёрного.
• Состояния — зелёный #2F9E5E (успех), красный #D64545 (ошибка), янтарный #E6A817 (внимание).

Заметьте: активных «фирменных» цвета здесь два (зелёный и терракотовый), остальное — нейтрали и сигналы. Это и есть правило «не больше трёх» в действии. Такую палитру невозможно сделать пёстрой, и при этом она ни на что не похожа в нише «аптечных» эко-магазинов.

Финальная проверка: тест на живых людях

Последний шаг, который пропускают почти все. Покажите готовую палитру 3–5 представителям вашей аудитории. Только не спрашивайте «нравится или нет» — это бесполезно. Спросите иначе: «Какое ощущение это вызывает? Какому бизнесу это могло бы принадлежать?»

Ответы отрезвляют. Марина была уверена, что её зелёный «про природу», а двое из пяти сказали «похоже на аптеку». Она сместила оттенок в тёплую сторону и усилила терракотовый акцент — и «аптека» исчезла. Восприятие цвета субъективно, поэтому его проверяют, а не угадывают.

Если хотите, чтобы цвет на вашем сайте работал на заявки, а не просто «был симпатичным», — это ровно то, что мы в Tendo собираем в составе лендинга под ключ: палитра под нишу, проверенная на контраст и на реальных людях. Прислать пример или обсудить ваш проект можно в @tendoprotech_bot.

Частые вопросы