Нажмите пробел, чтобы создать гармоничные цветовые палитры, зафиксируйте понравившиеся цвета, а затем скопируйте HEX-коды или экспортируйте палитру в CSS-переменные, Tailwind и JSON. Всё создаётся в вашем браузере, ничего не отправляется.
Генератор цветовых палитр онлайн
Нажмите пробел, чтобы создать гармоничные цветовые палитры, зафиксируйте понравившиеся цвета, а затем скопируйте HEX-коды или экспортируйте палитру в CSS-переменные, Tailwind и JSON. Всё создаётся в вашем браузере, ничего не отправляется.
Палитры создаются и проверяются в вашем браузере, ничего не отправляется. Ссылка для обмена содержит только коды цветов в части после #, а ваш выбор режима, стиля и количества цветов запоминается только на этом устройстве.
«Генератор цветовых палитр» собирает набор цветов, которые хорошо сочетаются друг с другом. Нажмите пробел или кнопку «Generate», и появится новая палитра из 2–10 цветов: от полностью случайных, максимально далёких друг от друга цветов до классических гармоний вокруг базового цвета — аналогичной, комплементарной, сплит-комплементарной, триады, тетрады, монохромной, а также затемнённых и осветлённых оттенков. Зафиксируйте любой понравившийся цвет, и остальные будут меняться вокруг него; возвращайтесь по последним тридцати палитрам с помощью отмены и перетаскивайте образцы, чтобы изменить их порядок. Для каждого цвета показаны значения HEX, RGB и HSL, ближайший именованный цвет и точный контраст WCAG с белым и чёрным текстом. Когда палитра готова, скопируйте её как HEX-коды, CSS-переменные, SCSS, фрагмент для Tailwind или JSON либо поделитесь ссылкой, в которой есть только коды цветов.
Возможности
Девять режимов генерации: случайный, аналогичный, комплементарный, сплит-комплементарный, триада, тетрада, монохромный, затемнённые и осветлённые оттенки
Случайные палитры в выбранном стиле (любой, яркий, пастельный, приглушённый, тёмный или светлый), в которых цвета всегда заметно отличаются друг от друга
Поле базового цвета: вокруг вашего фирменного или любимого цвета строится любая гармония
Кнопки блокировки удерживают выбранные цвета на месте, пока остальные создаются заново, так что палитру можно дорабатывать шаг за шагом
От двух до десяти цветов, перестановка перетаскиванием или кнопками со стрелками, отмена и повтор по последним 30 палитрам
Значения HEX, RGB и HSL, ближайший именованный цвет и точный контраст WCAG белого и чёрного текста на каждом образце
Проверка контраста: оценивает любую пару из цвета текста и фона вашей палитры по уровням AA и AAA
Экспорт в виде списка HEX, CSS-переменных, SCSS, фрагмента для Tailwind или JSON, а также ссылка, которая содержит только коды цветов
Как использовать Генератор цветовых палитр
Выберите режим, а для «Random» ещё и стиль; при желании добавьте базовый цвет, чтобы палитра строилась вокруг него
Нажимайте пробел или «Generate», пока не появится понравившийся цвет, и зафиксируйте его, чтобы он остался на месте, пока меняются остальные
Щёлкните по образцу, чтобы скопировать его HEX-код, откройте подробности, чтобы увидеть RGB, HSL и контраст, и перетащите образцы в нужном порядке
Проверьте контраст текста для любой пары цветов, затем откройте «Export» и скопируйте палитру как CSS-переменные, SCSS, Tailwind или JSON
Пример
Ввод
Mode: Analogous · base color #2a9d8f · 5 colors
Результат
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
Аналогичные цвета расположены на цветовом круге рядом друг с другом, не дальше 30 градусов. Коэффициенты контраста считаются по формуле WCAG, поэтому каждый образец подсказывает, текст какого цвета на него поставить.
Частые ошибки и устранение неполадок
Нажатие пробела не создаёт новую палитру. — Пробел срабатывает, только если ни кнопка, ни ссылка, ни текстовое поле не находятся в фокусе клавиатуры: им пробел нужен для собственных действий. Нажимайте Tab, пока ничего не будет выделено, или нажмите кнопку «Generate».
Кнопка «Generate» неактивна. — Все цвета зафиксированы, и менять нечего. Разблокируйте хотя бы один цвет кнопкой замка или клавишей L.
Ссылка на общую палитру открывает пустую или другую палитру. — Цвета хранятся в части адреса после знака #. Если мессенджер обрезал ссылку, скопируйте адрес целиком ещё раз: часть после #, которая не состоит из двух–десяти допустимых шестизначных HEX-кодов, игнорируется.
Фрагмент для Tailwind не меняет мои существующие цвета. — Он добавляет группу палитры в theme.extend.colors. Вставьте его в объект colors вашего конфига и используйте классы вроде bg-palette-1 или text-palette-3.
Часто задаваемые вопросы
Как работают режимы гармонии в «Генераторе цветовых палитр»?
Каждый режим выбирает цветовые тона на фиксированных расстояниях по цветовому кругу, отталкиваясь от базового тона: аналогичные цвета расположены не дальше 30 градусов друг от друга, комплементарная схема берёт противоположный тон, сплит-комплементарная — два тона по бокам от него, триада разносит три тона на 120 градусов, а тетрада — четыре тона на 90 градусов. Монохромная схема, а также затемнённые и осветлённые оттенки сохраняют один тон и меняют его светлоту и насыщенность, а «Random» разносит цвета как можно дальше друг от друга.
Как создать цветовую палитру вокруг фирменного цвета?
Введите или выберите фирменный цвет как базовый, затем выберите режим гармонии. Базовый цвет попадает в палитру и остаётся неизменным, а остальные цвета строятся вокруг него при каждом нажатии пробела. Переключайтесь между аналогичной, комплементарной схемами и триадой, чтобы увидеть, насколько далеко от фирменного цвета должна уйти палитра.
Как оставить одни цвета и изменить остальные в «Генераторе цветовых палитр»?
Зафиксируйте понравившиеся цвета кнопкой замка на образце или клавишей L. Зафиксированный цвет остаётся на своём месте, пока вокруг него создаётся новая палитра, а отмена возвращает прежнюю палитру, если новая оказалась хуже. Если зафиксировать все цвета, кнопка «Generate» станет неактивной.
Как «Генератор цветовых палитр» проверяет контраст текста?
Он использует формулу WCAG, которая сравнивает относительную яркость двух цветов. Для обычного текста нужно отношение не менее 4,5 к 1 для AA и 7 к 1 для AAA; для крупного — 3 к 1 и 4,5 к 1. На каждом образце показано отношение для белого и чёрного текста, а проверка контраста оценивает любую пару из цвета текста и фона палитры.
Как экспортировать палитру в CSS-переменные или Tailwind?
Откройте панель «Export» и выберите формат. «CSS variables» даёт блок :root с переменными от --color-1 до --color-5, SCSS — переменные $color, Tailwind — группу палитры для вставки в theme.extend.colors, а JSON и список HEX — простые массивы. У каждого формата есть кнопка копирования.
Можно ли поделиться палитрой, созданной в «Генераторе цветовых палитр»?
Да. Адрес в вашем браузере всегда содержит текущие цвета после знака #, например #264653-2a9d8f-e9c46a, а «Copy link» копирует его. Любой, кто откроет ссылку, увидит ту же палитру. Часть после # никогда не отправляется на сервер, а на этом устройстве запоминаются только ваш выбор режима, стиля и количества цветов.