Как выбрать цветовую палитру
Случайно подобранные цвета в интерфейсе почти всегда выдают себя: где-то текст сливается с фоном, где-то кнопка теряется среди других элементов, а общее впечатление — «дешево», даже если сама верстка аккуратная. Хорошая палитра — это не про художественный вкус, а про конкретную систему: цветовой круг и типовые схемы сочетаний, правило соотношения контраста для читаемого текста и набор инструментов, которые проверяют результат за вас. Разберем, как собрать рабочую палитру для сайта или бренда шаг за шагом, без интуитивного гадания.
Цветовой круг и схемы сочетаний: с чего начать выбор
Цветовой круг — это стандартное расположение цветов по кругу, где рядом стоят похожие оттенки, а напротив — контрастные. На его основе строятся несколько проверенных схем, и почти любая рабочая палитра — вариация одной из них.
Комплементарная схема берет два цвета строго напротив друг друга на круге — например, синий и оранжевый. Она дает максимальный контраст и хорошо подходит, когда нужно выделить один акцентный элемент — кнопку призыва к действию на нейтральном фоне. Минус в том, что использовать оба цвета в больших количествах одновременно тяжело для глаз, поэтому обычно один из пары становится основным, а второй — только акцентом на 5–10% интерфейса.
Аналоговая схема берет три цвета, расположенных рядом на круге — скажем, сине-зеленый, синий и сине-фиолетовый. Такая палитра выглядит гармонично и спокойно почти без усилий, потому что цвета родственные, но у нее слабее внутренний контраст — акцентный элемент на таком фоне выделить сложнее, и часто аналоговую схему дополняют одним ярким цветом со стороны для кнопок и важных элементов.
Триадная схема берет три цвета, равномерно расположенных по кругу — классический пример: красный, желтый, синий. Она дает энергичный и сбалансированный результат, но требует аккуратности в пропорциях: если все три цвета взять в равных долях, интерфейс станет пестрым. Работает правило, при котором один цвет доминирует на 60–70% площади, второй занимает 20–30%, а третий — только точечный акцент до 10%.
Правило 60-30-10 для распределения цветов в интерфейсе
Даже удачно подобранная по схеме палитра разваливается, если цвета распределены поровну. Работает простое соотношение: 60% интерфейса — основной нейтральный цвет (обычно фон, часто светлый или темный оттенок, близкий к белому или черному), 30% — вторичный цвет для крупных блоков вроде хедера, карточек, второстепенных кнопок, и 10% — акцентный цвет для самых важных элементов, на которые должен упасть взгляд в первую очередь: кнопки покупки, ссылки, индикаторы состояния.
Эта пропорция объясняет, почему у большинства качественных сайтов на первый взгляд «мало цвета» — основа почти всегда нейтральная, а сама палитра из 3-4 цветов используется точечно, а не размазана по всей странице поровну. Если акцентный цвет встречается на каждом втором элементе, он перестает быть акцентом и теряет функцию — привлекать внимание именно туда, где нужно действие пользователя.
Контраст текста: конкретные цифры, а не «на глаз»
Читаемость текста — не вопрос вкуса, а измеримая величина. Существует стандарт контрастности WCAG, который задает минимальное соотношение яркости между текстом и фоном: для обычного текста — не менее 4.5:1, для крупного заголовка (от 24px или жирный от 19px) — не менее 3:1. Ниже этого порога текст физически тяжело читать, особенно людям со сниженным зрением или на экране при ярком солнечном свете.
Частая ошибка — светло-серый текст на белом фоне, который выглядит стильно в макете на большом мониторе дизайнера, но проваливает проверку контраста и плохо читается в реальных условиях. Проверить конкретное сочетание цветов на соответствие стандарту можно за несколько секунд в бесплатных калькуляторах контраста (например, WebAIM Contrast Checker) — вставляете код фона и текста и получаете точное число, а не субъективное ощущение.
Инструменты для подбора и проверки палитры
Строить палитру интуитивно с нуля не обязательно — для каждого шага есть инструмент. Coolors и Adobe Color позволяют задать один базовый цвет и автоматически сгенерировать по нему комплементарную, аналоговую или триадную схему на основе цветового круга, о котором шла речь выше. Сервисы вроде Khroma учатся на ваших предпочтениях и подбирают сочетания, которые вам обычно нравятся, что удобно, если сложно сформулировать критерии словами.
Отдельная категория — инструменты проверки доступности: помимо упомянутого WebAIM Contrast Checker полезно прогонять итоговую палитру через симулятор цветовой слепоты (например, встроенный в Adobe Color или Stark), чтобы увидеть, не сливаются ли ключевые элементы для людей с нарушением цветовосприятия — это касается около 8% мужчин, что для сайта с широкой аудиторией не мелочь.
Как палитра работает вместе с остальным дизайном
Цвет никогда не существует в интерфейсе изолированно — он считывается вместе с композицией страницы и с тем, как набран текст. Одна и та же палитра может выглядеть профессионально или хаотично в зависимости от того, как расставлены акценты и свободное пространство — этому посвящена статья про основы композиции в дизайне. А то, насколько читаемым окажется текст на выбранном фоне, зависит не только от контраста, но и от самого шрифта — размера, начертания, межстрочного интервала, о чем подробно рассказано в материале типографика в дизайне: основы.
Практический план: соберите палитру за один вечер
Выберите один базовый цвет, который отражает характер бренда или продукта. Постройте на его основе схему — комплементарную для контраста, аналоговую для спокойствия или триадную для энергичности — через один из генераторов выше. Распределите роли по правилу 60-30-10: нейтральный фон, вторичный цвет для блоков, акцент для кнопок и ссылок. Проверьте пары текст-фон на контраст через калькулятор и прогоните итог через симулятор цветовой слепоты. Этого достаточно для рабочей палитры, готовой к использованию в интерфейсе, без месяцев проб и ошибок.
Изучайте дизайн так же системно, как строите палитру
Подбор палитры перестает быть гаданием, как только под рукой есть система: цветовой круг, готовые схемы, правило 60-30-10 и калькулятор контраста вместо интуиции. Так же системно можно осваивать и весь дизайн целиком — LearnMe строит план обучения по дням с конкретными темами вроде цветовой теории, композиции и типографики, а не оставляет искать разрозненные статьи самостоятельно. Начните разбираться в дизайне по плану — первый урок займет 10–15 минут.