Цвета для сайта: как подобрать палитру и сочетания
Цвет — первое, что человек замечает на сайте, ещё до того, как прочитает заголовок. Разбираю, сколько цветов нужно сайту компании, как распределить их по странице, как проверить читаемость и собрать палитру, если фирменного стиля нет.
- Сайту хватает нейтральных цветов для фона и текста и одного акцента.
- Акцент — для кнопок, ссылок и главного на странице, а не для всего подряд.
- Текст должен читаться: контраст с фоном не ниже 4,5 : 1.
- Палитру берут из фирменного стиля, а если его нет — из ниши и характера бизнеса.
Сколько цветов нужно сайту
Меньше, чем кажется. Цвет на сайте работает как указатель: показывает, куда нажать и что важно. Если ярких цветов много, указатели спорят друг с другом, и взгляд не понимает, за что зацепиться. Рабочая база — это 2–3 нейтральных оттенка для фона и текста и один акцентный цвет.
Роли цветов: фон, текст, акцент
| Роль | Где используется | Каким бывает |
|---|---|---|
| Фон | Основная поверхность страницы | Белый, светло-серый, молочный; реже — тёмный |
| Подложки | Карточки, блоки, поля форм | На тон темнее или светлее фона |
| Текст | Заголовки и абзацы | Почти чёрный или тёмный оттенок акцента, не чистый #000 |
| Акцент | Кнопки, ссылки, выделения | Насыщенный цвет бренда |
| Служебные | Ошибки, успех, предупреждения | Красный, зелёный, жёлтый — только по делу |
Например, у этого сайта светлый фон #F4F3F7, белые карточки, тёмный текст #180F2A и один фиолетовый акцент #834DFB. Фиолетовый появляется только там, где нужно действие или выделение, поэтому кнопка «Получить план запуска» видна сразу.
Правило 60-30-10
Классическая пропорция из дизайна интерьеров хорошо работает и на сайте: около 60% площади — основной нейтральный цвет (фон), 30% — дополнительный (подложки, крупные блоки, тёмный подвал), 10% — акцент. Это не закон, а ориентир: если акцент занимает треть экрана, он перестаёт быть акцентом.
Доля цвета на странице
Контраст: чтобы текст читался
Светло-серый текст на белом фоне выглядит изящно на макете и плохо читается на телефоне на улице. Международный стандарт доступности WCAG требует контраст обычного текста с фоном не ниже 4,5 : 1, крупного — не ниже 3 : 1. Проверить пару цветов можно в любом онлайн-сервисе проверки контраста или в инструментах разработчика браузера.
Отдельно проверьте текст на кнопках и на фотографиях: белые буквы на светлой картинке пропадают. Если текст стоит поверх фото, под него кладут затемнение или выносят текст на подложку.
Как подобрать палитру: 5 шагов
Палитра за вечер
- 01НишаЧто принято у конкурентов и где можно выделиться
- 02АкцентОдин цвет из логотипа или фирменного стиля
- 03НейтральныеФон, подложки, текст — под акцент
- 04КонтрастПроверить текст и кнопки
- 05ПроверкаСобрать главный экран и посмотреть на телефоне
Ниша подсказывает настроение: производству и стройке подходят сдержанные цвета, детским товарам — тёплые и мягкие, юристам и финансам — спокойные и строгие. Но копировать конкурентов не нужно: если у всех в нише синий, другой цвет поможет запомниться. Если фирменного стиля пока нет, что в него входит — разобрано в статье «Что входит в фирменный стиль».
Частые ошибки
- Каждый блок своего цвета — страница превращается в лоскутное одеяло, а кнопка теряется.
- Акцент на всём подряд — заголовки, иконки, фон и кнопки одного яркого цвета.
- Бледный текст — красиво на макете, нечитаемо на телефоне.
- Цвет без смысла — зелёный и красный, которые не означают «успех» и «ошибку».
- Градиенты и неон ради «современности» — быстро устаревают и спорят с фотографиями. Что сейчас считается современным дизайном — в статье «Современный дизайн сайта».
Частые вопросы
Какой цвет фона лучше для сайта?
Для сайта компании чаще всего — белый или очень светлый нейтральный (светло-серый, тёплый молочный). На нём лучше читается текст и спокойнее выглядят фотографии. Тёмный фон подходит, если он поддерживает характер бренда и весь контент под него продуман.
Сколько цветов использовать на сайте?
Нейтральные для фона и текста плюс один основной акцент. Второй акцент — только если у него есть роль, например цвет для статусов или скидок. Пять ярких цветов на одной странице спорят между собой.
Как подобрать цвета, если нет фирменного стиля?
Начните с одного цвета, который подходит нише и отличает вас от конкурентов, сделайте его акцентом, а остальное соберите из нейтральных оттенков. Проверьте контраст текста и посмотрите страницу на телефоне.
Где взять коды цветов для сайта?
Коды в формате HEX (например, #834DFB) берут из фирменного стиля, логотипа (пипеткой в графическом редакторе) или из генераторов палитр. В дизайне и вёрстке все цвета лучше задавать один раз и переиспользовать.
