Сколько цветов должно быть на сайте

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

Главное правило — контраст

Светло-серый текст на белом фоне и белые буквы на светлой кнопке — самые частые ошибки. Проверить пару можно любым инструментом расчёта контраста: для обычного текста нужно отношение не ниже 4,5.

Акцентный цвет работает, только если его мало. Если им покрашены и кнопки, и заголовки, и плашки, кнопка перестаёт выделяться.

Как выбрать свои три цвета

Фон — почти всегда белый или очень светлый: на нём читается любой тёмный текст, и с ним невозможно ошибиться. Текст — не чистый чёрный, а очень тёмный серый или тёмный оттенок вашего цвета: он мягче для глаз. Акцент — один цвет для кнопок и ссылок; если есть логотип, берите из него, если нет — любой достаточно тёмный, чтобы белая надпись на кнопке читалась.

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

Типичные ошибки

  • Светло-серый текст на белом «для лёгкости» — его не могут прочитать.
  • Белые буквы на жёлтой или салатовой кнопке — контраста нет.
  • Красный для акцента и красный для ошибок одновременно: формы начинают «кричать».
  • Новый цвет для каждой секции — страница распадается на лоскуты.

Уточняющие вопросы

Как проверить, что цвета читаются?

Инструментом проверки контраста: для обычного текста нужно отношение не ниже 4,5 к фону. Наш подбор цветовой схемы в разделе инструментов считает это автоматически.

Тёмная тема — хорошая идея?

Для сайта услуг — редко: светлые сайты привычнее и проще в поддержке. Тёмные удачны у студий и портфолио, где важнее настроение, чем чтение цен.

Обязательно ли брать цвета из логотипа?

Желательно для узнаваемости, но не любой ценой: если фирменный цвет слишком светлый для кнопок, возьмите его тёмный оттенок, а исходный оставьте для акцентов.

14 дней бесплатно

Пока читаете —
сайт мог бы уже работать

Соберите первую страницу, подключите домен и форму заявок в одном кабинете.

Создать сайт