Как пользоваться
- Введите базовый цвет (
#5be49b,rgb(),hsl()) или выберите пипеткой; кнопка Случайная палитра подберёт стартовый цвет за вас. - Выберите схему: UI-система даёт шкалу brand-50…900, серую шкалу и семантические цвета; монохром, аналоговая, комплементарная, триада и тетрада — классические сочетания по цветовому кругу.
- В таблице у каждого цвета — HEX, RGB, HSL и контраст с белым и чёрным текстом; клик по значению копирует его. Галочка тёмная тема зеркалит шкалу.
- Внизу переключите формат — CSS-переменные, SCSS, Tailwind или JSON — и нажмите Копировать или Скачать.
Что генерирует инструмент
Генератор строит палитру из одного цвета по правилам цветового круга и по логике современных дизайн-систем. Режим UI-система повторяет структуру Tailwind и Material: базовый цвет становится ступенью 500, от него вверх идут светлые тона 400…50 (фоны, ховеры, бейджи), вниз — тёмные 600…900 (текст на светлом, активные состояния). К бренд-шкале добавляется нейтральная серая с лёгким подмесом оттенка бренда, чтобы серый не выглядел «чужим», и три семантических цвета: зелёный success, янтарный warning, красный danger.
Классические схемы — монохром, аналоговая (±15° и ±30°), комплементарная (+180°), триада (через 120°) и тетрада (через 90°) — считаются поворотом оттенка в HSL при той же насыщенности и светлоте, а для каждого главного цвета добавляются светлый и тёмный варианты. Это готовые роли: бренд, акцент для CTA, дополнительные цвета для графиков и инфографики.
Зачем арбитражнику и разработчику
- Лендинг под оффер собирается за вечер, а палитра «на глаз» выдаёт себя грязными серыми и кнопкой, которая сливается с фоном. Здесь цвета согласованы, а колонки контраста сразу показывают, каким текстом писать по каждому.
- Одна и та же палитра нужна в CSS лендинга, в Tailwind-конфиге прелендинга и в JSON для генератора креативов — экспорт отдаёт все три формата из одного источника.
- Опция «тёмная тема» зеркалит шкалу (50 ↔ 900), поэтому переменные
--brand-50остаются «фоном», а--brand-900— «текстом» в обеих темах без переименования.
Как читать таблицу
Столбцы «с белым» и «с чёрным» — коэффициенты контраста по WCAG 2.x. Зелёное значение (≥ 4.5) — обычный текст этого цвета читается; янтарное (3–4.5) — только крупный текст и иконки; серое — не годится. Столбец «Текст» подсказывает, какой из двух вариантов ставить поверх цвета. Экспорт JSON содержит HEX и HSL каждого цвета, Tailwind — вложенный объект theme.extend.colors с ключами 50…900 и DEFAULT.
Частые вопросы
Как сгенерировать палитру для сайта из одного цвета?
Вставьте цвет бренда, выберите «UI-система» — получите шкалу 50…900, серую шкалу и семантические цвета, готовые к экспорту в CSS-переменные. Для акцентов переключитесь на комплементарную или триаду.
Почему шкала считается в HSL, а не в OKLCH?
HSL предсказуем и одинаково выглядит во всех инструментах, включая Figma и старые браузеры. Расплата — светлые тона жёлтого и голубого выглядят чуть светлее синих. Для перцептивно ровной шкалы возьмите готовые HEX из экспорта и подстройте крайние ступени вручную.
Что означает «тёмная тема» и почему цвета не изменились?
Опция меняет не цвета, а их роли: 50 становится 900, light — dark. Так одни и те же имена переменных дают правильный контраст в тёмном интерфейсе, а разметку менять не нужно.
Можно ли получить Tailwind-конфиг?
Да, формат «Tailwind» отдаёт JSON-фрагмент для theme.extend.colors: brand: {50: …, 500: …, 900: …}, gray, success, warning, danger. Вставьте его в tailwind.config.js.
Насколько случайна «случайная палитра»?
Оттенок берётся из криптографического генератора браузера, насыщенность и светлота ограничены диапазоном 55–90% и 40–60%, чтобы стартовый цвет был пригоден как бренд, а не серым или неоновым.
