Генератор шкалы цветов Tailwind CSS

Генератор шкалы цветов Tailwind CSS

Вставьте один шестнадцатеричный цвет и мгновенно получите полную палитру Tailwind в диапазоне от 50 до 950 с равномерными шагами, воспринимаемыми человеком. Масштабируется в пространстве цвета OKLCH, поэтому каждый шаг кажется равномерным по яркости для человеческого глаза — не просто линейное падение в RGB или HSL.

Скопируйте результат прямо в ваш tailwind.config.js, вставьте его как CSS-свойства или переменные SCSS, или экспортируйте его в формате JSON для вашей системы управления дизайн-токенами.

Как использовать

1. Выберите базовый цвет с помощью цветового изображения или вставьте шестнадцатеричное значение, например #464aff.
2. Укажите имя палитры (например primary, brand, или accent) — это становится ключом объекта в экспортированном коде.
3. Выбрать Tailwind v4 (OKLCH) для современного oklch() CSS или Tailwind v3 (шестнадцатеричные значения) для классического вывода шестнадцатеричных значений.
4. Включите или выключите остановку 950 и переместите ползунок насыщенности вверх или вниз, чтобы увеличить или уменьшить насыщенность.
5. Выберите формат экспорта — конфигурация Tailwind, CSS-свойства, переменные SCSS или JSON — затем скопируйте или загрузите сгенерированный код.
6. Нажмите на любой оттенок в предварительном просмотре, чтобы скопировать его шестнадцатеричное значение в буфер обмена.

Возможности

• Перцептуальная математика OKLCH — интерполирует яркость и насыщенность в пространстве цвета OKLCH, чтобы каждый шаг от 50 до 950 казался равномерным для человеческого глаза.
• Полный диапазон от 50 до 950 — генерирует полную 11-шаговую палитру Tailwind, с возможностью исключения слишком темного оттенка 950, если вам нужно только классическое 10.
• Предварительный просмотр оттенков в реальном времени — видите каждый оттенок на глаз, нажмите на любой оттенок, чтобы скопировать его шестнадцатеричное значение, и мгновенно настройте масштаб при вводе текста.
• Проверка контрастности WCAG — каждый оттенок оценивается на белом и черном фоне с метками «проход» или «неудовлетворительно» по критериям AA и AAA.
• Множественные цели экспорта — экспортируется как CSS-переменные, переменные SCSS или простые JSON-дизайн-токены. tailwind.config.js, :root Контроль насыщенности
• — один ползунок масштабирует насыщенность во всех оттенках, поэтому вы можете сделать палитру ярче или уменьшить насыщенность без изменения оттенка. Без выхода за границы гаммы
• — насыщенность автоматически ограничивается на каждом уровне яркости, поэтому полученные шестнадцатеричные значения всегда отображаются в пределах sRGB. Что такое пространство цвета OKLCH?