Генератор цветовых палитр

Почему хорошая цветовая палитра держит весь дизайн

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

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

Теория цвета без лишних терминов

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

• Комплементарная использует два цвета, прямо противоположных друг другу — например, синий и оранжевый. Она энергична и хорошо привлекает внимание, хотя слишком большое количество обоих цветов борется за фокус, поэтому пусть один доминирует, а второй выступает акцентом.
• Аналоговая использует три цвета, стоящих рядом — например, красный, оранжевый и жёлтый. Контраст невысокий, ощущение спокойное, именно такую гармонию можно увидеть в природе повсюду. Приятна для глаз, но может потребоваться добавить контраст, чтобы избежать однообразия.
• Триадная использует три цвета, равномерно расставленных по кругу — например, красный, жёлтый и синий. Яркая и сбалансированная, лучше всего работает, когда один цвет доминирует, а два других играют вспомогательную роль.
• Монохромная остаётся в рамках одного оттенка, варьируя его светлоту и насыщенность. Это наиболее беспроигрышная схема — чистая и цельная, хороший запасной вариант, когда ничто другое не кажется подходящим.

Случайный генератор хорош для вдохновения, но настоящая ценность — в режимах гармонии. Они удерживают цвета в математической взаимосвязи, поэтому они выглядят как единое целое ещё до того, как вы что-то подправили.

HEX, RGB и HSL простыми словами

Каждый скопированный цвет может быть представлен в нескольких форматах, и все они по-разному описывают одно и то же.

HEX — это шестисимвольный код, который вы видите чаще всего, например #3A7BD5. Это просто красный, зелёный и синий, упакованные в одну строку по два символа на канал. Компактный и именно тот формат, который вы вставите в CSS или инструмент дизайна.

RGB записывает те же три канала в виде чисел от 0 до 255, например rgb(58, 123, 213). Тот же цвет, удобнее для чтения и удобен, когда нужен альфа-канал для прозрачности.

HSL описывает цвет так, как люди на самом деле о нём думают: оттенок (hue — какой цвет, 0–360 градусов по кругу), насыщенность (saturation — насколько ярко) и светлота (lightness — насколько светло). Это самый удобный формат для ручной правки: изменение светлоты или насыщенности даёт именно ожидаемый результат без лишних догадок. Если нужно конвертировать форматы, быстрое преобразование HEX в RGB сделает это безболезненно.

Не забывайте о контрасте и доступности

Палитра может выглядеть великолепно и всё равно провалиться, когда кто-то попытается прочитать на ней текст. Контраст — там, где красота встречается с удобством. Руководящие принципы доступности веб-контента (WCAG) устанавливают чёткую планку: обычный основной текст должен иметь коэффициент контраста не менее 4,5:1 относительно фона, а крупный текст — не менее 3:1. Это не формальность, а разница между читателем, который легко просматривает страницу, и тем, кто щурится, сдаётся и уходит.

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

Практический рабочий процесс

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

Когда появится подходящий вариант, распределите роли. Выберите доминирующий цвет для фонов и крупных областей, дополнительный — для структурных элементов и один яркий акцент для тех мест, которые должны выделяться. Приблизительное соотношение 60-30-10 — доминирующий, дополнительный, акцентный — сохраняет баланс без жёсткости. Затем проверьте контраст для каждой пары с текстом, скопируйте hex-коды — и готово. Сохраняйте удачные варианты: палитра, подошедшая для одного проекта, нередко становится основой для следующего. Когда будете готовы продолжить, остальные инструменты из нашей коллекции всех генераторов помогут с другими задачами.

Часто задаваемые вопросы