Сколько цветов должно быть на сайте?

Обычно хватает пяти: фон, цвет текста, основной цвет, цвет кнопки и один второстепенный для плашек. Больше цветов — сложнее понять, что на странице главное и куда нажимать. Кнопку заявки держите одного цвета по всему сайту.

Как подобрать сочетание цветов для сайта?

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

Какие цвета лучше для кнопки заявки?

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

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

Кратко

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

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

Главное правило: у каждого цвета своя работа

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

Пять ролей цвета на странице

Фон — светлый или тёмный, спокойный. На нём живёт всё остальное Текст — максимально контрастный к фону. Обычно почти чёрный на светлом или почти белый на тёмном Основной цвет — фирменный: заголовки, иконки, ссылки, акценты Кнопка — самый заметный цвет на странице, только для главного действия Второстепенный — для плашек, подложек, выделений Если цвет не выполняет ни одной из этих ролей — он лишний.

Правило 60-30-10

Самый простой способ распределить цвета — пропорция, которую давно используют дизайнеры интерьеров и сайтов.

Пошаговый процесс

60 % — фон и нейтральные цвета — белый, светло-серый, тёплый светлый или тёмный для ночных тем

30 % — основной цвет — шапка, заголовки, блоки, иконки

10 % — акцент — кнопки, важные цифры, значки. Чем его меньше, тем сильнее он работает

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

Сочетание цветов по цветовому кругу

Когда основной цвет выбран, остальные подбирают по цветовому кругу. Вот три схемы, которые чаще всего работают на сайтах.

Сравнение

Схемы сочетания цветов

Как устроена

КомплементарнаяЦвета напротив друг друга: синий и оранжевый

АналоговаяСоседние цвета: синий, бирюзовый, зелёный

МонохромнаяОдин цвет в разной яркости

ТриадаТри цвета через равные промежутки

Когда подходит

КомплементарнаяКнопка заметна сразу, хорошо для продающих страниц

АналоговаяСпокойно и цельно; ❌ кнопке нужен отдельный акцент

МонохромнаяСтрого и аккуратно; ❌ без акцента всё сливается

ТриадаЯрко, для детских и развлекательных ниш; ❌ легко перебрать

Схема	Как устроена	Когда подходит
Комплементарная	Цвета напротив друг друга: синий и оранжевый	Кнопка заметна сразу, хорошо для продающих страниц
Аналоговая	Соседние цвета: синий, бирюзовый, зелёный	Спокойно и цельно; ❌ кнопке нужен отдельный акцент
Монохромная	Один цвет в разной яркости	Строго и аккуратно; ❌ без акцента всё сливается
Триада	Три цвета через равные промежутки	Ярко, для детских и развлекательных ниш; ❌ легко перебрать

Для лендинга малого бизнеса надёжнее всего комплементарная пара или аналоговая палитра с одним контрастным акцентом для кнопки.

Контраст: проверка, которую нельзя пропускать

Красивая палитра может провалить главное — текст не читается. Для этого есть международное правило доступности (WCAG, Web Content Accessibility Guidelines): контраст обычного текста к фону должен быть не ниже 4,5:1, а лучше 7:1. Для крупных заголовков допускается 3:1.

Проверить контраст можно в любом онлайн-сервисе: вводите два цвета и получаете число. Если меньше 4,5 — затемните текст или осветлите фон.

С каких цветов начать: примеры по нишам

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

Ниша	С чего часто начинают	Что учесть
Строительство и ремонт	Оранжевый, глубокий синий, жёлтый	Тёмно-синий основной + оранжевая кнопка — классическая пара
Красота и салоны	Пыльно-розовый, сливовый, бежево-золотой	Не уводите текст в бледный — на светлых фонах он теряется
Медицина	Бирюзовый, спокойный синий, зелёный	Важнее всего чистота и читаемость, без кричащих акцентов
Юристы и финансы	Тёмно-синий, бордовый, глубокий зелёный	Строгий фон, акцент только на кнопке
Еда и доставка	Красный, оранжевый, зелёный	Тёплые цвета работают на аппетит, фон держите светлым
Детские услуги	Оранжевый, голубой, салатовый	Ярко, но один цвет для кнопки, чтобы родитель её нашёл

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

Как подобрать палитру за пару минут

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

Как понять, что цвета подобраны удачно

Простая самопроверка за пять минут:

На странице не больше пяти цветов, включая фон и текст
Контраст основного текста — не ниже 4,5:1
Кнопка заявки — самый заметный элемент, и её цвет больше нигде не используется
Ссылки отличаются от обычного текста
Если прищуриться, вы всё равно видите, где кнопка
Цвета совпадают с логотипом, визиткой и вывеской

О том, что написать на самой кнопке, — в статье что писать на кнопке лендинга. А общие тенденции оформления — в обзоре трендов веб-дизайна.

Коротко

Цвета для сайта подбирают под задачу: фон и текст должны давать хороший контраст, основной цвет — держать стиль, а кнопка — выделяться сильнее всего. Распределяйте цвета примерно по правилу 60-30-10, подбирайте сочетания по цветовому кругу и начинайте с цвета логотипа или привычного для ниши. Обязательно проверьте контраст и посмотрите палитру на настоящей странице. Если сайта ещё нет, лендинг в выбранных цветах можно собрать в Land Maker за пару минут.

Подберите цвета для своего сайта

1Выберите основной цвет — из логотипа или по нише
2Соберите палитру из пяти цветов и проверьте контраст
3Посмотрите её на странице и выделите кнопку заявки Открыть подбор цветов → Создать лендинг →

Открыть подбор цветов →