Генератор градиентных палитр
Создайте плавную цветовую шкалу из базового цвета или между несколькими цветами. Копируйте любой образец, получайте CSS градиента и экспортируйте в CSS, Tailwind, SCSS или JSON.
Загрузка: Генератор градиентных палитр…
Ваши файлы не покидают устройство
Как пользоваться: Генератор градиентных палитр
- 1
Откройте «Генератор градиентных палитр» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Дизайн системе нужен не один оттенок каждого цвета: светлые для фонов, средние для кнопок, тёмные для текста и состояний наведения. Этот генератор градиентных палитр строит плавную цветовую шкалу из базового цвета или серию шагов между выбранными цветами и сразу экспортирует её в код.
Как создать цветовую шкалу
- Выберите базовый цвет.
- Выберите режим: scale для оттенков одного цвета от светлого к тёмному или steps, чтобы смешать несколько добавленных цветов.
- Добавляйте и удаляйте цвета, задайте количество шагов.
- Назовите палитру, нажмите на образец, чтобы скопировать HEX код, и скопируйте CSS градиента.
- Экспортируйте палитру как CSS переменные, цвет Tailwind, переменные SCSS или JSON.
Шкала в дизайн системе
Распространённая схема, которую использует Tailwind, нумерует оттенки от 50 (самый светлый) до 900 или 950 (самый тёмный):
- От 50 до 100: фоны страниц и карточек.
- От 200 до 300: границы и деликатные заливки.
- От 500 до 600: основные кнопки и ссылки.
- От 700 до 900: состояния наведения и текст на светлом фоне.
Советы
- Проверяйте контраст любого оттенка под текстом с помощью проверки контраста.
- Держите шаги равномерными, чтобы состояния наведения и нажатия выглядели согласованно.
- Смешивайте близкие тона для естественных градиентов; далёкие тона могут проходить через серый.
- Называйте цвета по роли в коде (primary, accent), чтобы при ребрендинге менять одно место.
Для гармоничных сочетаний разных цветов используйте генератор цветовых палитр. Чтобы создать один градиентный фон, попробуйте генератор CSS градиентов.
Частые вопросы
Что такое цветовая шкала?
Ряд оттенков одного цвета от светлого к тёмному, который последовательно используют для фонов, границ, кнопок и текста.
Можно ли экспортировать шкалу для Tailwind?
Да. Выберите экспорт Tailwind, чтобы получить запись цвета для вставки в конфигурацию Tailwind.
Чем режим scale отличается от steps?
Scale создаёт более светлые и тёмные оттенки одного базового цвета. Steps смешивает несколько выбранных цветов в заданное количество шагов.
Как скопировать один цвет?
Нажмите на любой образец, чтобы скопировать его HEX код.
В какие форматы можно экспортировать?
CSS переменные, конфигурация Tailwind, переменные SCSS и JSON, а также CSS градиента.
Это бесплатно?
Да, без регистрации.