Как выбрать цветовую палитру для сайта
Пошаговый способ подобрать цвета для сайта: роли цветов, источник палитры, фон, текст, акцент, состояния интерфейса, контраст и тёмная тема.
Цвет в веб-дизайне · · 2 мин чтения
Чтобы выбрать палитру для сайта, сначала определите роли цветов (фон, поверхность, текст, акцент, состояния), затем найдите источник цветов — фото продукта, интерьера или атмосферного кадра — и проверьте контраст текста. Хорошей палитре сайта достаточно 1 основного акцента, 1–2 дополнительных цветов и 3–4 нейтральных.
Шаг 1. Определите роли, а не цвета
| Роль | Сколько | Пример |
|---|---|---|
| Фон | 1 | Светлый молочный или тёмный графит |
| Поверхность | 1–2 | Карточки, плашки, полосы — на тон темнее или светлее фона |
| Текст | 2 | Основной и второстепенный |
| Акцент | 1 | Кнопки, ссылки, выделение |
| Состояния | 3 | Успех, предупреждение, ошибка |
Шаг 2. Найдите источник цветов
Самые цельные палитры берутся из реального мира: фото продукта, команды за работой, места, материала. Загрузите такой снимок в генератор палитры — вы получите 5–8 цветов, которые уже гармонируют друг с другом.
Шаг 3. Выберите акцент
Возьмите из палитры самый насыщенный цвет средней светлоты — он будет кнопками и ссылками. Акцент должен встречаться редко: если им покрашено всё, ничто не выделяется.
Шаг 4. Постройте нейтральные
Фон и текст лучше не делать «чистыми» #FFFFFF и #000000. Слегка окрасьте их в тон акцента: молочный #F7F3EE и графитовый #2A2529 для тёплой палитры, #F4F7FA и #1C2430 для холодной. Подробнее — в статье нейтральные цвета.
Шаг 5. Распределите площадь
Классическая пропорция — 60% нейтральный фон, 30% вторичный цвет, 10% акцент. Разбор — в статье правило 60-30-10.
Шаг 6. Проверьте контраст
Основной текст должен иметь контраст с фоном не ниже 4,5:1, крупные заголовки — не ниже 3:1. Как проверить — в статье контраст текста по WCAG.
Шаг 7. Подумайте о тёмной теме
Если сайт поддерживает тёмную тему, акцент обычно нужно сделать светлее и чуть менее насыщенным. Подробнее — в статье цвета для тёмной темы.
Пример: палитра из фото заката
| Роль | Цвет |
|---|---|
| Фон | #1E1A1D |
| Поверхность | #4E4747 |
| Текст | #FEE0A4 |
| Акцент | #FA9B59 |
| Дополнительный | #DE7C56 |
Частые вопросы
Сколько цветов должно быть на сайте?
Обычно 5–8 значений: 3–4 нейтральных, 1 акцент, 1–2 дополнительных и цвета состояний. Больше — трудно поддерживать единообразие.
Где взять готовую палитру?
Из фотографии, которая передаёт настроение бренда: загрузите её в генератор. Ещё один источник — сайты-подборки палитр, но палитра «из своего мира» почти всегда выглядит уместнее.
Как хранить цвета в коде?
В CSS-переменных с именами по ролям — см. статью цвета в CSS: переменные и темы.