Генератор оттенков цвета
Введите HEX цвет или название Pantone и создайте рабочую шкалу цветов для UI, бренда, CSS переменных и Tailwind.
Выберите Pantone reference, чтобы построить оттенки от его ближайшего HEX значения.
Совпадения Pantone являются цифровыми приближениями. Финальный печатный цвет проверяйте по официальным гайдам.
Сгенерированная шкала
Нажмите на образец, чтобы скопировать HEX, или скопируйте всю шкалу в CSS и форматах для разработки.
Предпросмотр UI
Посмотрите, как сгенерированные цвета работают в фонах, карточках, кнопках и тексте.
Преобразуйте шкалу в UI токены
Светлые значения подходят для фонов, средние для действий, темные для текста и контрастных поверхностей.
Что такое генератор оттенков цвета
Генератор оттенков цвета превращает один базовый цвет в светлые, темные и приглушенные варианты. В результате получается согласованная шкала значений для кнопок, фонов, границ, графиков и бренд-систем.
Создание шкалы 50-950 для Tailwind
Стандартный режим выводит 11-ступенчатую шкалу 50-950, похожую на названия токенов в дизайн-системах. Можно скопировать обычные значения, CSS переменные, Tailwind config или JSON для передачи разработчикам.
Сравнение оттенков с Pantone
Каждый сгенерированный цвет сравнивается с ближайшим Pantone reference на этом сайте, чтобы связать цифровой подбор оттенков с обсуждением цвета для печати.
Как использовать шкалу оттенков
Шкала оттенков помогает превратить один брендовый цвет в полноценную рабочую систему. Светлые значения подходят для фонов и hover-состояний, средние для действий, темные для текста, границ и контрастных поверхностей.
FAQ по оттенкам цвета
Что такое tints, shades и tones?
Tint смешивает цвет с белым, shade смешивает его с черным, а tone смешивает с серым. Вместе они создают контролируемые варианты одного базового цвета.
Это официальный генератор оттенков Pantone?
Нет. Этот сайт независимый и не связан с Pantone LLC. Показанные здесь Pantone references являются цифровыми приближениями только для планирования и коммуникации.
Можно ли использовать результат в Tailwind CSS?
Да. Режим 50-950 создан для шкал в стиле Tailwind, а экспорт Tailwind дает готовый блок colors для вставки.
Подготовлены ли сгенерированные оттенки для печати?
Нет. Генератор использует RGB смешивание в браузере для быстрого дизайн-поиска. Для точного производственного цвета проверяйте результат калиброванными инструментами и официальными физическими гайдами.
Чем это отличается от Pantone color palette generator?
Генератор палитр создает гармоничные схемы из нескольких цветов. Эта страница фокусируется на одном базовом цвете и строит его более светлые, темные и приглушенные варианты.
Инструмент загружает мои цвета?
Нет. Генерация оттенков работает в вашем браузере. Аккаунт, загрузка файлов или серверная обработка цвета не требуются.
Дополнительные инструменты
Только цифровой ориентир
Сгенерированные цвета и совпадения Pantone являются цифровыми приближениями для планирования, UI дизайна и коммуникации. Они не заменяют официальные продукты Pantone, лицензированные данные или проверку физическими образцами.