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

Обновлено 29 октября 2026 г. · 4 мин чтения · Студия AETHER · https://aether-studio.ru/blog/cveta-dlya-sajta

Цвет — первое, что человек замечает на сайте, ещё до того, как прочитал хоть слово. Удачная палитра делает сайт узнаваемым и помогает найти главное — кнопку, цену, телефон. Разбираем, как подобрать цвета без «психологии цвета» и десятка оттенков.

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

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

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

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

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

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

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

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

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

| Что проверяем | Минимум по WCAG (уровень AA) |
| --- | --- |
| Обычный текст | 4,5 : 1 |
| Крупный текст и заголовки | 3 : 1 |
| Иконки и границы полей | 3 : 1 |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Палитру подбирают на этапе дизайна вместе со шрифтами и сеткой — сколько стоит дизайн целиком, разобрано в статье [«Сколько стоит дизайн сайта»](https://aether-studio.ru/blog/skolko-stoit-dizajn-sajta).

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

Палитру подбираем в собственном дизайне сайта, без шаблонов, — для компьютера и отдельно для телефона. Макет показываем и правим до того, как начнётся вёрстка. Если страниц нужно несколько, посмотрите [корпоративный сайт](https://aether-studio.ru/services/corporate).

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Подберём палитру под ваш бренд.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.