Как подобрать цвета для сайта
Чтобы сайт выглядел аккуратно, достаточно трёх-пяти цветов и одного правила. Разбираем, как их выбрать и проверить, без дизайнерского образования.
Начните с роли, а не с любимого цвета
У каждого цвета на сайте своя работа. Почти всегда нужны всего три роли:
- Фон: самый светлый (или самый тёмный в тёмной теме) цвет. Его больше всего.
- Текст: цвет, который хорошо читается на фоне. Чистый чёрный часто слишком резкий, тёмно-серый или очень тёмный синий мягче.
- Акцент: кнопки, ссылки, цены, всё, на что нужно нажать. Акцент должен быть один.
Остальные оттенки палитры нужны для карточек, рамок, подложек и второстепенного текста.
Правило 60-30-10
Старое правило дизайнеров интерьеров отлично работает и на экране: 60% площади занимает основной цвет (фон), 30% второй цвет (блоки, шапка, подвал), 10% акцент. Если акцента становится больше, он перестаёт привлекать внимание, и посетитель не понимает, куда нажимать.
Проверьте контраст текста
Самая частая ошибка: светло-серый текст на белом фоне или белый текст на жёлтой кнопке. По стандарту доступности WCAG обычный текст должен иметь контраст не меньше 4,5:1 с фоном, крупные заголовки не меньше 3:1. Проверить пару цветов можно в нашей проверке контраста: она сразу покажет, проходит ли пара.
Как выбрать гамму под бизнес
- Доверие и надёжность (юристы, финансы, медицина): синие и серые, например «Деловой синий».
- Еда и уют (кафе, пекарни): тёплые коричневые и оранжевые, «Кофе с молоком», «Мёд».
- Природа и здоровье: зелёные, «Мятный сад», «Эко».
- Красота и нежность: пудровые и пастельные, «Персик», «Лаванда».
- Дети и праздники: чистые яркие цвета, «Детская».
- Премиум: чёрный, тёмно-красный и золото, «Чёрное золото», «Бордо».
Где взять палитру
Проще всего взять готовую. В разделе «Палитры» собраны бесплатные наборы цветов с HEX, RGB и HSL, готовыми CSS-переменными и примером, как палитра выглядит на кнопках и тексте. Понравился оттенок, но нужен свой набор? Откройте генератор палитр.
Если сайта ещё нет, его можно собрать бесплатно в конструкторе Okis: там есть готовые шаблоны, в которых цвета уже подобраны.
Частые вопросы
Сколько цветов нужно для сайта?
Обычно хватает трёх ролей: фон, текст и один акцентный цвет для кнопок и ссылок. Ещё один-два оттенка уходят на карточки, рамки и второстепенный текст.
Что такое правило 60-30-10?
Основной цвет занимает около 60% площади, второй около 30%, акцент около 10%. Так акцент остаётся заметным, а страница не выглядит пёстрой.
Какой контраст нужен тексту?
По WCAG обычный текст должен иметь контраст не меньше 4,5:1 с фоном, крупные заголовки не меньше 3:1.
