Цветовая гамма для лендинга: 20 сочетаний с HEX-кодами под разные ниши

Из каких цветов состоит гамма лендинга

Новички начинают с вопроса «какой цвет выбрать». Правильнее — «какие роли нужны». У лендинга их пять:

Соотношение «60–30–10» из учебников по дизайну — ориентир. На лендинге акцента обычно ещё меньше: 2–5% площади. Чем реже он встречается, тем сильнее работает.

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

20 сочетаний цветов для лендинга с HEX-кодами

Палитры мы собрали под типичные ниши малого бизнеса. Контраст посчитан по формуле WCAG: первое число — текст на основном фоне, второе — текст на кнопке. Норма для обычного текста — 4,5 и выше.

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

Цвета для лендинга услуг: клининг, ремонт, юристы

Услуги покупают те, кто хочет решить проблему быстро и без риска. Цвет здесь работает на два ощущения: «чисто и понятно» и «надёжно».

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

Ремонт квартир (№2). Тёплый молочный фон #FAF8F5 и бежевый второй фон перекликаются с деревом и плиткой на фото работ. Акцент — насыщенный терракотовый. Обратите внимание: исходно мы взяли более яркий оранжевый #D9480F, и белый текст на нём дал контраст 4,3 — чуть ниже нормы. Затемнили до #C4470A — и стало 4,9.

Юрист (№3) и бухгалтерия (№4). Тёмно-синий и глубокий зелёный — цвета, которые читаются как «серьёзно». Ярких акцентов здесь не нужно: кнопка выделяется формой и насыщенностью на белом фоне. Для юриста по банкротству или семейным делам можно смягчить фон до тёплого серого — тема тяжёлая, холодная палитра усиливает тревогу.

Цветовая гамма для медицины и косметологии

В медицине цвет должен успокаивать. Красный акцент на сайте клиники ассоциируется с кровью и срочностью, чёрный фон — с тревогой.

• Стоматология (№6). Бирюзовый #0A7C8C — классика, но затемнённая: светлая бирюза с белым текстом не проходит проверку контраста.
• Многопрофильная клиника (№7). Чистый синий на белом. Подходит, когда на сайте много текста: прайс, врачи, услуги.
• Косметология (№8). Тёплый пудровый фон и винный акцент #9E3D55 вместо розового. Розовый с белым текстом почти всегда нечитаем, а винный сохраняет «женскую» тему и даёт контраст 6,5.
• Психолог (№9). Приглушённый шалфейный зелёный. Здесь не нужно ничего яркого: человек пришёл с тревогой, и сайт не должен на него кричать.

В медицине отдельное внимание к фотографиям: холодная палитра плюс фото в тёплом свете дают ощущение грязи. Перед выбором гаммы посмотрите на свои реальные фото — гамма подстраивается под них.

Палитры для стройки, детских и премиальных ниш

Стройка, окна, потолки (№10, №11). Терракотовый и оранжевый на белом — цвета кирпича, дерева, строительной техники. Для окон и потолков мы затемнили оранжевый до #CC4A0B: ярко-оранжевый с белым текстом не проходит по контрасту. Если хочется именно яркий оранжевый, делайте текст на кнопке тёмным.

Детский центр и праздники (№12, №13). Детские ниши любят радугу, но радуга — это пять акцентов. Лучше тёплый светлый фон, жёлтый или розовый второй фон и один насыщенный цвет для кнопок: фиолетовый или малиновый. Яркость детям дают фотографии и иллюстрации. Покупает при этом родитель, и ему важно быстро найти расписание и цену.

Фитнес и автосервис (№5, №14). Тёмный фон с кислотным или жёлтым акцентом. Тёмная тема хорошо работает с фото в зале и в боксе. Обязательное правило: на жёлтой и салатовой кнопке текст тёмный. Белый на #FFC21A даёт контраст 1,6 — его просто не видно.

Премиум (№16, №17). Почти чёрный фон и приглушённое золото или бронза. Секрет премиальности — не в золоте, а в воздухе: много пустого места, крупные фото, мало элементов. Золотой градиент на каждом заголовке делает сайт дешевле.

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

Правило одного акцентного цвета: как это работает

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

Где акцентный цвет уместен:

• кнопки целевого действия: «Записаться», «Рассчитать», «Получить смету»;
• одна ключевая цифра на экране: цена «от 2 900 ₽» или срок «за 3 дня»;
• активный пункт в переключателе или квизе;
• иконка мессенджера рядом с формой, если это основной способ связи.

Где акцент не нужен:

• заголовки всех блоков;
• декоративные линии, рамки, фоновые фигуры;
• второстепенные ссылки вроде «Политика конфиденциальности»;
• иконки преимуществ.

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

Как проверить контраст, чтобы сайт читался с телефона

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

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

Порядок проверки:

1. Выпишите пары цветов. Текст и основной фон, текст и второй фон, надпись на кнопке и кнопка, подписи под формой и фон.
2. Проверьте каждую пару в онлайн-калькуляторе контраста. Вводите два HEX-кода, получаете число.
3. Сравните с нормой. Обычный текст — 4,5 и выше, крупные заголовки — 3 и выше.
4. Отдельно проверьте серый. Подписи, placeholder в полях формы, мелкий текст под кнопкой. Например, #999999 на белом даёт 2,8, а #767676 — 4,5. Разница на глаз небольшая, а читаемость разная.
5. Откройте сайт на телефоне на улице. Это тест, который не заменит ни один калькулятор.
6. Проверьте текст поверх фото. Белый заголовок на светлом небе в первом экране — частая проблема. Решается затемняющей подложкой под текстом.

Цвет никогда не должен быть единственным способом передать смысл. Ошибку в форме отмечайте не только красной рамкой, но и текстом «Укажите телефон»: часть людей плохо различает красный и зелёный.

Условный пример: как замена цвета кнопки влияет на заявки

Пример условный, не кейс студии. Лендинг натяжных потолков: 3 000 визитов в месяц из рекламы, конверсия 2%, 60 заявок, заявка стоит 1 500 ₽ — бюджет 90 000 ₽.

Исходная палитра: голубой фон, голубые заголовки, голубые иконки и голубая кнопка чуть темнее фона. Кнопка сливается с остальными элементами, контраст кнопки к фону — около 1,5.

После правки: белый фон, тёмный текст, иконки в цвете текста, кнопка насыщенно-оранжевая с контрастом текста 4,6.

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

Ошибки в цветовой гамме лендинга

• Три и больше акцентных цвета. Кнопки разного цвета в разных блоках. Человек не понимает, что главное.
• Фирменный цвет любой ценой. Если фирменный цвет — светло-жёлтый, кнопка им не станет. Используйте фирменный во втором фоне и иллюстрациях, а для кнопки возьмите его тёмный оттенок.
• Градиенты на тексте. Половина слова читается, половина нет.
• Чёрный фон «для стиля» в нише, где это не уместно. Стоматология или детский центр на чёрном фоне выглядят странно.
• Цвет кнопки совпадает с цветом ссылок. Человек не отличает важное действие от перехода на другую страницу.
• Каждый блок своим фоном. Голубой, розовый, жёлтый, мятный — страница выглядит как набор чужих шаблонов. Достаточно двух фонов, которые чередуются.

Если сайт на Тильде, удобно один раз завести палитру и пользоваться только ею во всех блоках: так проще не расползтись по оттенкам. Как устроены кнопки в конструкторе, мы разбирали в статье кнопка в Тильде, а про пары шрифтов — в статье шрифты для сайта. Полный список того, что проверить на лендинге перед запуском рекламы, — в чек-листе лендинга.

Если хотите, чтобы палитра, оффер и кнопка с первого экрана работали вместе, оставьте контакты — нарисуем первый экран под вашу нишу.