Генератор палитр

Создавайте цветовую палитру пятью способами

Этот генератор цветовых палитр заменяет целый набор отдельных инструментов. Нажмите «Создать» для случайной цветовой палитры, настройте цветовую гармонию на основе базового цвета, извлеките цвета из изображения или фотографии, разверните один HEX-код в полную схему или превратите название цвета или слово в воспроизводимую палитру. Задайте количество от 3 до 10 цветов, заблокируйте понравившиеся и перегенерируйте остальные — без учётной записи, ничего не покидает ваш браузер.

Кликните по образцу, чтобы скопировать его значение, переключайтесь между HEX, RGB и HSL, перетаскивайте образцы для изменения порядка. Нажмите пробел для мгновенной генерации новой палитры — тот самый рабочий процесс, который популяризировал Coolors, здесь доступен бесплатно.

Извлечение цветов из изображения, HEX-кода или названия

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

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

Цветовые гармонии на основе реальной теории цвета

Режим гармонии применяет теорию цвета, вращая оттенок вокруг цветового круга. Дополнительные цвета расположены на расстоянии 180° для выраженного контраста; аналогичные цвета остаются в пределах ±30° для спокойного, единого образа; триадные используют три оттенка через 120°; тетрадные — четыре через 90°; раздельно-дополнительные смягчают контраст на 150°/210°; а монохромные сохраняют один оттенок, варьируя яркость в палитре.

Каждый сгенерированный цвет также поставляется с полной шкалой оттенков и теней от 50 до 900 — более светлые и тёмные ступени, необходимые для состояний наведения, цветов границ и вариантов фона в реальной дизайн-системе интерфейса.

Сравнение UtiloKit с Coolors, Adobe Color и Paletton

Coolors — самый популярный инструмент для палитр с отличным рабочим процессом блокировки/регенерации и большим сообществом. Coolors Pro (4 $/мес.) прячет за платный доступ извлечение изображений, расширенный экспорт и историю палитр. Нативный экспорт для Tailwind недоступен в бесплатном тарифе. Adobe Color хорошо справляется с проверкой доступности WCAG и визуализацией цветовых гармоний, но для сохранения палитр нужна бесплатная учётная запись Adobe, а до шага экспорта придётся совершить больше кликов.

Paletton силён в теории цвета, но показывает только четыре типа гармонии и не включает извлечение изображений. UtiloKit объединяет ключевые преимущества всех трёх — блокировку в стиле Coolors, панель WCAG от Adobe Color, извлечение изображений и экспорт в Tailwind/SCSS — без учётной записи, без платного доступа и без рекламы в инструменте.

Блокируйте любимые цвета и продолжайте итерации

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

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

Экспорт в CSS, Tailwind, SCSS, JSON, PNG и ссылку для совместного доступа

Когда палитра готова, экспортируйте её в нужном для проекта формате. CSS выдаёт блок :root с пользовательскими свойствами. Tailwind выдаёт объект theme.extend.colors, готовый для вставки в tailwind.config.js. SCSS выдаёт объявления $переменных, совместимых с Sass. JSON перечисляет каждый цвет в форматах HEX, RGB и HSL для JavaScript или конвейеров токенов дизайна. Скачайте лист образцов в формате PNG для брендовых материалов или презентации. Скопируйте ссылку для совместного доступа, которая кодирует палитру в URL — коллега откроет именно то, что видите вы.

Встроенная проверка контраста WCAG

Палитра не готова, пока текст на ней не читается комфортно. Панель контрастности показывает коэффициент контраста WCAG каждого цвета на фоне белого и чёрного текста с бейджами AA и AAA «прошёл/не прошёл». WCAG 2.1 AA требует коэффициента не менее 4,5:1 для обычного текста и 3:1 для крупного. AAA требует 7:1 для обычного текста. Большинство инструментов для палитр пропускают этот шаг или прячут его за премиум-уровень — здесь он встроен и работает в реальном времени при генерации или изменении образцов.

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