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

Генератор цветовых палитр подбирает сочетания по правилам цветового круга: монохромные, аналоговые, комплементарные, триадные и тетрадные. Выберите схему и количество цветов — получите палитру с HEX-кодами, которые копируются нажатием на образец.

Схемы гармонии и когда их брать

• Монохромная — один тон в разной светлоте и насыщенности: #f06686, #eb3761, #d11f49, #a41939, #72172d. Спокойный вариант для интерфейсов и презентаций, ошибиться почти невозможно.
• Аналоговая — соседние цвета круга: #8e7adc, #d2abe2, #d364bd, #c26b85, #e2b6ab. Мягкие переходы, хорошо ложится на фоны и иллюстрации.
• Комплементарная — цвета напротив друг друга: #10f937, #ed5ad4, #08d42a, #f425d1, #13f138. Максимальный контраст, подходит для акцентов и кнопок, но в больших плоскостях утомляет.
• Триадная — три цвета через равные промежутки: #a1e548, #2095ee, #f68ec9, #95ec22, #93c8f1. Живо и сбалансированно, частый выбор для детских и игровых проектов.
• Тетрадная — четыре цвета квадратом или прямоугольником. Самая богатая схема и самая рискованная: один цвет делайте основным, остальные оставляйте на детали.

Как устроен генератор

Палитра строится не подбором готовых наборов, а расчётом. Генератор берёт базовый цвет в модели HSL — тон, насыщенность, светлота — и разносит остальные цвета по кругу на угол, который задаёт выбранная схема: 180 градусов для комплементарной, по 120 для триадной, по 30 для аналоговой. Насыщенность и светлота получают небольшой разброс, иначе палитра выглядела бы плоской.

Подпись с HEX-кодом на каждом образце меняет цвет сама: генератор считает яркость фона по формуле восприятия и ставит тёмный текст на светлом цвете и светлый на тёмном. Поэтому код читается на любом образце.

Палитра из фотографии

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

Работает это не усреднением, которое дало бы грязно-серый, а методом медианного сечения: набор пикселей многократно делится по тому цветовому каналу, где разброс больше всего, и из каждой части берётся средний цвет. Поэтому в палитре оказываются и тёплые оттенки заката, и тёмная синева теней, а не одно смешанное пятно.

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

Форматы вывода

Цвета выводятся в HEX, RGB или HSL — переключается там же, в дополнительных настройках. HEX удобен для вёрстки и графических редакторов, RGB — когда значения подставляются в код, HSL — если вы собираетесь править оттенок или насыщенность вручную: в нём эти параметры заданы явно, и палитру легко подстроить, не подбирая коды заново.

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

Где применить палитру

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

Проверьте контраст перед тем, как брать палитру в работу

Гармония и читаемость — разные вещи. Два цвета могут прекрасно смотреться рядом и при этом быть непригодными для пары «текст на фоне». Особенно часто это случается с аналоговыми схемами: соседние цвета круга близки по светлоте, и надпись на таком фоне расплывается.

Простое правило: для основного текста берите пару, где один цвет заметно темнее другого, а не просто отличается по тону. Если палитра нужна для сайта, прогоните выбранную пару через любой проверщик контраста — норма для обычного текста начинается с соотношения 4,5 к 1. Яркие комплементарные пары лучше оставить для кнопок и акцентов, где текста мало и он крупный.

Вопросы и ответы