Цвета для сайта: как подобрать палитру и сочетания, чтобы сайт выглядел дорого и читался

Что значит «цвета для сайта» и из чего состоит палитра

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

Палитру удобно представить как гардероб. Базовые вещи спокойных цветов носятся каждый день, а яркий шарф или часы работают потому, что они одни. Если надеть всё яркое сразу, никакая вещь не выделится. На сайте то же самое: нейтральный фон и текст создают тишину, а акцент показывает, куда нажимать.

Роли закрепляются в дизайн-системе: как она устроена и зачем нужна, мы рассказали в статье дизайн-система. Если вы пока только ищете настроение проекта, начните с мудборда, а цвета выбирайте уже из него.

Как подобрать цвета для сайта за час: пошагово

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

1. Определите акцент. Возьмите цвет логотипа, если он есть и подходит для кнопки. Если логотипа нет, выберите цвет по нише и конкурентам: 10 минут на просмотр первых сайтов в выдаче.
2. Проверьте конкурентов. Если все в отрасли синие, оранжевый акцент поможет вас запомнить. Менять ожидания аудитории стоит с умом: для клиники кричащий цвет может вызвать недоверие.
3. Выберите нейтрали. Возьмите фон не чисто белым, а с лёгким подтоном акцента. Для тёплого акцента подойдёт тёплый серый, для холодного холодный.
4. Назначьте цвет текста. Вместо чистого чёрного часто берут очень тёмный серый или тёмный оттенок акцента.
5. Сделайте шкалу оттенков. Для акцента получите 3–5 ступеней: светлая для фонов, основная для кнопки, тёмная для наведения и текста ссылок. В Adobe Color и Coolors это делается за несколько минут.
6. Проверьте контраст. Прогоните пары «текст и фон» и «надпись и кнопка» через калькулятор WebAIM.
7. Добавьте состояния. Подберите красный для ошибки и зелёный для успеха так, чтобы они не спорили с акцентом.
8. Проверьте на макете. Наложите палитру на настоящий первый экран и на страницу с таблицей: на пустых образцах цвета выглядят иначе.
9. Проверьте на телефоне при ярком свете и в режиме оттенков серого. Если кнопка потерялась, контраст слабый.
10. Запишите цвета с их ролями: HEX-код, где применяется, где запрещён. Такая запись спасает сайт от случайных оттенков через полгода.

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

Что такое правило 60-30-10

Правило 60-30-10 — это ориентир по пропорциям: 60% нейтрального основного цвета, 30% вторичного и 10% акцента. Правило пришло из дизайна интерьеров, стандартом для сайтов оно не является, и считать пиксели не нужно. Польза от него в другом: оно напоминает, что акцента должно быть мало.

На сайте распределение выглядит так:

Если акцент занимает половину экрана, он перестаёт быть акцентом. Самая простая проверка: прикройте пальцем кнопку на скриншоте. Если на экране всё ещё много этого же цвета, значит, кнопка от него не отличается.

Цветной большой фон первого экрана не нарушает правило: страница целиком останется нейтральной, если таких блоков немного. Считайте по всей странице, а не по одному экрану.

Как сочетать цвета на сайте: какие схемы использовать

Самые надёжные сочетания цветов для сайта — монохромная схема с одним акцентом и нейтраль плюс яркий цвет. Цветовой круг даёт и другие схемы, но чем больше насыщенных цветов, тем сложнее сохранить порядок.

Сервисы подбора помогают с вариантами. Adobe Color строит схемы по цветовому кругу, Coolors быстро перебирает палитры. Оба работают только как черновик: итог решают контраст и то, как цвета ведут себя на настоящих блоках.

Дорогой вид сайта обычно связан с четырьмя вещами. Цветов мало. Насыщенность приглушена, потому что яркие цвета на больших площадях выглядят дешевле. Много воздуха и хорошие фотографии. Оттенки подобраны одной температуры: серый к тёплому акценту тоже тёплый. Как эти решения работают вместе с макетом и типографикой, разобрано в статье что такое веб-дизайн.

Какие цвета выбрать для сайта: таблица по нишам

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

Если вы вообще не знаете, с чего начать, откройте десять сайтов компаний из своей отрасли и выпишите их основные цвета. Оттолкнитесь от самого частого цвета и решите, хотите ли вы выглядеть своим или выделиться.

Какой цвет кнопки выбрать на сайте

Цвет кнопки выбирается так, чтобы она была самым заметным элементом на экране и не спорила с другими акцентами. Правильный цвет определяется окружением, поэтому синяя кнопка на сером фоне работает, а на синем теряется.

Рабочие правила:

• кнопку красим в акцент, и этот цвет почти нигде больше не встречается;
• надпись на кнопке имеет контраст не ниже 4,5:1;
• контур и фон кнопки отличаются от соседних цветов минимум на 3:1 по WCAG 2.1;
• главная кнопка на экране одна, вторичные кнопки сделаны контуром или тёмным нейтральным цветом;
• при наведении кнопка темнеет на шаг шкалы, а не меняет цвет целиком.

Разбор на реальных цветах показывает, где чаще всего ошибаются. Значения контраста посчитаны нами по формуле WCAG.

Посмотрите на оранжевый. Белая надпись на ярком #FF6B00 кажется нормальной на экране дизайнера, а контраст всего 2,86:1. Выхода два: затемнить кнопку или поменять текст на тёмный. Оба варианта рабочие, выбор зависит от характера бренда.

Цвета стоит проверить на самом важном месте сайта, на первом экране: там кнопка, заголовок и фото работают вместе.

Если хочется проверить, как цвета бренда будут работать на настоящем экране, это проще увидеть на примере.

Как проверить контраст цветов на сайте

Контраст проверяют калькулятором: вводите цвет текста и цвет фона и смотрите на коэффициент, который WCAG задаёт от 1:1 до 21:1. Требования WCAG 2.1 уровня AA такие: 4,5:1 для обычного текста, 3:1 для крупного. Крупным считается текст от 18 пунктов или от 14 пунктов полужирным. Для значков и элементов интерфейса нужно 3:1.

Исключения есть: неактивные элементы, декоративный текст, логотипы. Текст поверх фотографии проверять сложнее, потому что контраст меняется от участка к участку. Здесь работает полупрозрачная тёмная подложка под текстом или затемнение всего снимка.

Эту проверку полезно делать всегда. Низкий контраст стал самой частой ошибкой в исследовании WebAIM 2026 года: он нашёлся на 83,9% главных страниц из миллиона, годом ранее было 79,1%, а в среднем на странице встречалось 34 случая такого текста.

Проверить весь сайт можно за 20 минут:

1. Откройте главную страницу и страницу услуги, выпишите все пары «текст и фон».
2. Возьмите HEX-коды пипеткой в инструментах разработчика или в графическом редакторе.
3. Вставьте каждую пару в калькулятор и запишите результат.
4. Отдельно проверьте подписи к формам, текст на кнопках, ссылки и текст поверх фото.
5. Исправьте пары ниже порога и обновите цвета в общем файле стилей, чтобы правка разошлась по всему сайту.

Что видите и что с этим делать:

Цвет и дальтонизм: о чём помнить

Цветовое зрение отличается примерно у 1 из 12 мужчин и 1 из 200 женщин: такие оценки приводит Colour Blind Awareness. Для сайта вывод простой: цвет не должен быть единственным способом что-то показать.

Что это значит на практике:

• ошибка в форме подписывается словами и значком, а не только красной рамкой;
• ссылки в тексте отличаются подчёркиванием, а не только цветом;
• на графиках и схемах есть подписи и разные узоры;
• статусы «в наличии» и «нет в наличии» подписаны текстом.

Быстрая проверка: включите на телефоне режим оттенков серого и пройдите путь заявки. Если вы всё поняли без цвета, сайт в порядке.

Как выбрать цвета для тёмной темы сайта

Цвета для тёмной темы подбираются заново, потому что простое инвертирование ломает контраст и превращает насыщенные цвета в кислотные. Фон обычно берут тёмно-серым или графитовым вместо чистого чёрного, а акцент немного приглушают.

Базовые правила:

• поверхности карточек на 1–2 тона светлее фона, чтобы блоки не сливались;
• основной текст чуть мягче чистого белого;
• контраст проверяется заново для всех пар;
• яркие цвета на тёмном фоне кажутся ещё ярче, поэтому насыщенность снижают.

Для примера: приглушённый голубовато-серый #8EA0B1 на тёмном #1A2026 даёт 6,11:1 и проходит требование для обычного текста, а светлый #D6DDE4 на том же фоне даёт 11,98:1. Подробно, кому нужна тёмная тема и как её делать без потери заявок, мы разобрали в статье тёмная тема сайта.

Как проверить, что цвет кнопки влияет на заявки

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

Условный пример: лендинг услуг получает 4 000 посетителей в месяц, конверсия 2%. Новая кнопка стала контрастнее, и конверсия выросла до 2,5%. Цифры придуманы для расчёта.

Плюс 60 000 ₽ в месяц выглядит заманчиво, но сначала убедитесь, что рост настоящий. При 80 заявках в месяц небольшая разница может оказаться случайностью. Смотрите данные минимум за несколько недель, отдельно для телефонов и компьютеров, и не меняйте за это время рекламу и цены. Если посетителей мало, тест затянется: тогда разумнее поправить контраст по правилам и не тратить месяцы на проверку.

Если хотите собрать палитру под бренд и заодно понять, что поменять на первом экране, оставьте контакты.

Мифы про цвета на сайте

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

«Синий вызывает доверие, значит, нужен всем». Если все конкуренты синие, вы сольётесь с ними. Ассоциации цветов зависят от культуры и ниши, поэтому таблицы «значение цветов» годятся как повод подумать, а не как инструкция.

«Чем больше цветов, тем живее сайт». Больше цветов усложняет иерархию: человек не понимает, что здесь главное. Живость лучше дают хорошие фотографии и типографика.

«Белый фон — скучно и дёшево». Дорогой вид обычно связан с воздухом, сеткой и фото. Белый или слегка тёплый фон хорошо работает в премиальных нишах.

«Серый текст выглядит элегантно». Светло-серый на белом читается хуже и нарушает WCAG: #999999 на белом даёт только 2,85:1.

«Палитру можно взять с красивого сайта». Цвета без контекста не переносятся. Чужая палитра подобрана под другие фото и задачи, поэтому её всё равно придётся проверять.