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

С чего начинать

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

• Фирменные цвета. Если у компании есть логотип, вывеска или упаковка, палитру сайта строят от них — клиент должен узнать вас и на сайте, и на улице.
• Ниша и конкуренты. Откройте пять сайтов конкурентов. Если все синие, синий сайт потеряется среди них, а контрастный запомнится.
• Аудитория и тон. Детскому центру подойдут тёплые и яркие цвета, юридической компании — сдержанные, премиальному бренду — глубокие тёмные или «бумажные» светлые.

Сколько цветов нужно

Меньше, чем кажется. Рабочая палитра сайта — это:

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

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

Контраст: чтобы текст читался

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

Контраст показывают инструменты разработчика в браузере и плагины в Figma: наводите на текст — видите число. Если меньше нормы, темнее делают текст, а не светлее фон.

Цвет кнопок и акцентов

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

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

Тёмная или светлая тема

• Светлая подходит сайтам, где много текста: услуги с подробными описаниями, медицина, юристы, магазины.
• Тёмная выглядит дороже и хорошо показывает фотографии, видео и 3D — поэтому её любят студии, бренды и портфолио.

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

Как это устроено у нас

Наш сайт тёмный, но в нём нет ни одного «чистого» цвета:

• фон — почти чёрный #080808, а не #000000;
• основной текст — тёплый светлый #eeeeec, контраст с фоном 17 : 1;
• подписи — приглушённый #a3a3a0, контраст 7,9 : 1, тоже с запасом выше нормы;
• светлые главы — на «бумажном» #e7e5e1 с почти чёрным текстом #1f1f1f, контраст 13 : 1.

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

Где подобрать палитру

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

Цвета записывают в HEX-коде (#080808) — его понимают и дизайнеры, и разработчики. Готовую палитру проверяют на реальных экранах: на телефоне, на дешёвом ноутбуке, на улице.

Частые ошибки

• Слишком много цветов. Каждый блок своего цвета — и страница превращается в лоскутное одеяло.
• Акцент везде. Когда цветные заголовки, иконки и рамки, кнопка уже не выделяется.
• Серый на сером. Низкий контраст выглядит стильно на макете и нечитаемо на телефоне.
• Цветной текст на цветном фоне. Красный на синем «дрожит» — глазу тяжело.
• Забытые состояния. Как выглядит кнопка при наведении, нажатии, когда она неактивна; как подсвечивается ошибка в форме.

Палитру подбирают на этапе дизайна вместе со шрифтами и сеткой — сколько стоит дизайн целиком, разобрано в статье «Сколько стоит дизайн сайта».

Как подбираем палитру мы

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