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

Лендинг собран, тексты написаны, вёрстка ровная — а страница всё равно выглядит самодельной. Чаще всего причина не в вёрстке, а в цветах, взятых наугад: пять оттенков синего, чисто-красная кнопка, серый текст, который почти сливается с фоном. Хорошая новость: цветовая палитра для сайта собирается по понятным правилам, художественное образование для этого не нужно. Ниже — рабочая схема: как подобрать цветовую палитру, откуда брать сочетания цветов, сколько цветов нужно на самом деле и как проверить результат на контраст.

Правило 60-30-10: база, которая почти не подводит

Правило родом из дизайна интерьеров, но для веба подходит как влитое. Доминирующий цвет занимает около 60% площади (обычно это фон), вторичный — около 30% (карточки, панели, крупные блоки), и только 10% остаётся акцентному: кнопки, ссылки, цены, выделения. Новички делают ровно наоборот — красят акцентным всё подряд, и акцент перестаёт работать.

фон — #F9FAFB (почти белый, ~60%)
текст и заголовки — #1F2937 (почти чёрный с холодным подтоном, ~30%)
акцент — #2563EB (кнопки и ссылки, ~10%)
текст на фоне — около 14:1, акцент на белом — около 5:1: базовую норму AA (4.5:1) проходит

В презентациях правило работает так же, только мерой служит слайд: примерно 60% — фон, 30% — цвет заголовков и подзаголовков, 10% — цвет, которым выделены цифры, даты и ключевые слова. Главный соблазн докладчика — «подсветить важное» пятью разными цветами на одном слайде; по правилу акцент один, и именно поэтому взгляд зрителя сразу находит нужное. Если слайд выглядит скучно, проблему решают не новые цвета, а фотография на фон и укрупнение цифры.

Теперь про типовые грабли. Чистый #FF0000 в приличных интерфейсах гость редкий: на белом он даёт примерно 4:1 — даже до базовой нормы контраста не дотягивает, зато орёт так, что спорить бессмысленно. Его приглушённый родственник #DC2626 делает ту же работу тише: 4.8:1, норма пройдена, глаза целы. Противоположная крайность — чистый синий #0000FF: с контрастом у него парадоксально всё хорошо (около 8.6:1), но читать им набранный текст невозможно. Насыщенность — отдельная ось цвета, и почти всегда её стоит выкручивать вниз.

Откуда брать сочетания, если чутьё не натренировано

Врождённое чувство цвета — миф, на который не стоит ставить. Вместо него — источники, которыми пользовались задолго до генераторов.

• Природа и фото. Сделайте скриншот пейзажа или предметной съёмки, возьмите пипеткой 3–4 цвета и посмотрите, какой из них просится в акцент. В природе сочетания уже согласованы за вас.
• Чужие сайты. Найдите сайт, который нравится, и разберите не цвета, а роли: что здесь фон, что текст, что акцент. Палитру копировать не обязательно — роли переносятся на ваш бренд.
• Цветовой круг. Комплементарные (напротив друг друга), аналоговые (рядом) и триадные (через 120°) сочетания — классика, которую умеет автоматизировать генератор: выбираете базовый цвет, получаете готовые варианты.
• Ваш логотип. Если в нём уже есть цвет, это готовая база — стройте палитру вокруг него, а не наоборот.

Честное предупреждение про триады, оплаченное собственными ошибками: чистая триада с цветового круга почти всегда выглядит как вывеска фастфуда. Я поначалу генерировал их и недоумевал, отчего «столько цвета — и так дёшево», пока не догадался снизить насыщенность у двух цветов из трёх. Генератор цветовых палитр строит гармонии из одного базового цвета — берите их как отправную точку и потом приглушайте под свою задачу. А если цвет достался из скриншота в виде RGB-значений (встроенные пипетки часто показывают именно RGB), переведите их в HEX через конвертер RGB в HEX — в CSS обычно пишут именно HEX.

Сколько цветов нужно на самом деле

Считать нужно роли, а не цвета. Минимальный набор, которого хватает большинству сайтов: фон, текст, акцент. Плюс один-два производных оттенка для карточек, рамок и hover-состояний — их получают осветлением и затемнением базовых цветов, отдельными цветами они не считаются. Итого в палитре спокойно живут 3–5 значений.

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

Тёмная тема: почему нельзя просто поменять цвета местами

Кажется, что решение простое: белый фон поменять на чёрный — и готово. Но на тёмном цвета ведут себя иначе. Белый текст на чисто чёрном фоне формально идеален (21:1, больше не бывает), а глаза от такой пары устают быстрее, чем от серого на сером: берите мягкий светло-серый #E5E7EB на тёмном #111827 — контраст около 14:1, а слепит в разы меньше. Акценты на тёмном светлеют: синий #2563EB, хорошо работавший на белом, на тёмном фоне становится глухим — его место занимает #60A5FA (около 7:1 на #111827). И следите за насыщенностью: чистые красный и зелёный на чёрном проверку контраста проходят, но «вибрируют» — рябит от них быстрее, чем от любой бледной пары.

Проверка контраста: где палитра проваливается

Стандарт WCAG, на который ориентируются все, требует 4.5:1 для обычного текста и 3:1 для крупного (от 24px обычного или от 18.66px жирного). Проверяется норма на пары, а не на цвета поодиночке — и именно здесь палитры сыпятся. Классика жанра — серый на сером: #999999 по белому даёт 2.85:1, на хорошем мониторе выглядит «нормально», на плохом исчезает. Второе место — белый текст на ярких кнопках: на модном зелёном #22C55E он даёт около 2.3:1, хотя кнопка кажется контрастной.

Минимум четыре пары для проверки: основной текст с фоном, вторичный текст с фоном, текст на акцентной кнопке, ссылки в тексте. Быстрее всего — через проверку контрастности WCAG: вставляете два цвета и сразу видите коэффициент и вердикт по AA и AAA. Нормы и типичные ошибки мы подробно разбирали в отдельной статье про контрастность текста.

Частые вопросы

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

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

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

Через коэффициент контраста. Возьмите пару «текст + фон» и прогоните через проверку контрастности: обычному тексту нужно минимум 4.5:1, крупному — 3:1. Заодно проверьте обратную пару: белый текст на цветной кнопке проваливается чаще, чем цветной текст на белом.

Для сайта лучше тёплые или холодные цвета?

Зависит от ниши, но главное правило другое — не смешивать. Тёплый серо-бежевый фон (#FAF6F0) с холодным синим текстом выглядит как ошибка, даже если по отдельности оба цвета хороши. Финансам, медицине и технике логичнее холодная гамма, еде, ремёслам и «человечным» брендам — тёплая. Если сомневаетесь, начните с нейтрального фона (#F9FAFB) и одного акцента: температуру палитре задаст именно он.

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