Генератор оттенков и затемнений

• Мгновенное создание оттенков и затемнений: генератор обновляет всю палитру при каждом изменении цвета без задержек. Щёлкните по любому образцу, чтобы сразу скопировать его HEX-код, — никаких кнопок.
• Безопасно и на 100 % приватно: всё создание оттенков и затемнений выполняется полностью в вашем браузере. Ваши данные о цветах никогда не отправляются на сервер — это безопасно для непубличных брендовых цветов и конфиденциальных дизайн-систем.
• Экспорт в CSS-переменные, конфиг Tailwind или список HEX: экспортируйте созданную палитру в трёх форматах: пользовательские свойства CSS (:root), объект конфигурации Tailwind CSS или простой список HEX. Настраиваемое имя переменной и число шагов (5, 8, 10 или 12).
• 100 % бесплатно — без регистрации: полностью бесплатно, без аккаунта, премиум-тарифа, лимитов использования и рекламы, блокирующей интерфейс. Создавайте оттенки и затемнения сколько угодно раз.

• Цветовые шкалы для дизайн-систем: инженеры дизайн-систем используют генератор для построения полных цветовых шкал для библиотек компонентов. Экспортируйте прямо в CSS-переменные или конфиг Tailwind, чтобы интегрировать в пайплайн дизайн-токенов.
• Расширение палитры бренда: бренд-дизайнеры используют генератор, чтобы расширить один брендовый цвет до полной палитры более светлых и тёмных вариантов — получая диапазон, необходимый для фонов, границ, состояний наведения и текста.
• Библиотеки цветов Figma и Sketch: UI-дизайнеры используют генератор для создания библиотек цветов в Figma и Sketch. Копируйте HEX-коды из таблицы образцов и вставляйте их прямо в цветовые стили вашего инструмента дизайна.
• Сайты электронной коммерции и маркетинга: веб-разработчики используют генератор для создания состояний наведения, активных состояний и вариантов фона из одного брендового цвета — обеспечивая визуальную согласованность на страницах товаров и лендингах.
• Адаптация цветов для тёмной темы: разработчики тёмных тем используют генератор, чтобы подобрать подходящие более светлые варианты базовых цветов для тёмных фонов — обеспечивая достаточный контраст без изменения оттенка бренда.
• Пользовательские цвета Tailwind CSS: разработчики Tailwind CSS используют генератор для создания пользовательских цветовых шкал в соответствии с соглашением об именах 50-900 в Tailwind. Экспортируйте прямо как объект конфигурации Tailwind и вставьте в tailwind.config.js.

В теории цвета оттенок — это цвет, смешанный с белым, что делает его светлее и менее насыщенным. Затемнение — это цвет, смешанный с чёрным, что делает его темнее и более насыщенным. Вместе оттенки и затемнения образуют цветовую шкалу — диапазон значений от почти белого до почти чёрного с одним и тем же тоном, что и базовый цвет. Цветовые шкалы — основа современных дизайн-систем: они обеспечивают полный диапазон значений, необходимых для фонов, границ, текста, состояний наведения и индикаторов фокуса, сохраняя визуальную согласованность. Наш браузерный генератор создаёт такие шкалы мгновенно из любого базового цвета с помощью линейной интерполяции RGB.

1. Введите базовый цвет: введите значение HEX (например, #3b82f6) или RGB в поле цвета либо используйте нативный выбор цвета. Можно также выбрать готовый цвет для быстрого старта.
2. Выберите число шагов: выберите 5, 8, 10 или 12 шагов на сторону. Больше шагов даёт более тонкую гранулярность для сложных дизайн-систем; меньше шагов лучше подходит для простых палитр. Генератор обновляет палитру мгновенно при каждом изменении.
3. Скопируйте или экспортируйте: щёлкните по любому образцу, чтобы скопировать его HEX-код. Используйте панель экспорта, чтобы скопировать всю палитру в виде пользовательских свойств CSS, объекта конфигурации Tailwind CSS или простого списка HEX — с настраиваемым именем переменной.

• Формула оттенка: каждый оттенок рассчитывается линейной интерполяцией между базовым цветом и белым (RGB 255, 255, 255). Оттенок с коэффициентом r = базовый × r + белый × (1 − r). Самый светлый оттенок имеет наименьшее значение r (ближе к белому); самый тёмный оттенок имеет наибольшее значение r (ближе к базовому).
• Формула затемнения: каждое затемнение рассчитывается линейной интерполяцией между базовым цветом и чёрным (RGB 0, 0, 0). Затемнение с коэффициентом r = базовый × r. Самое светлое затемнение имеет наибольшее значение r (ближе к базовому); самое тёмное затемнение имеет наименьшее значение r (ближе к чёрному).
• Распределение шагов: шаги равномерно распределяются между базовым цветом и белым/чёрным, исключая чистые крайние точки. Это обеспечивает согласованные визуальные интервалы между шагами палитры.
• Форматы вывода: для каждого образца предоставляются значения HEX, RGB и HSL. Представление HSL полезно для понимания того, как меняется светлота по шкале, пока тон и насыщенность остаются примерно постоянными.

Оттенок добавляет к цвету белый (увеличивает светлоту, уменьшает насыщенность). Затемнение добавляет к цвету чёрный (уменьшает светлоту, может увеличить или уменьшить насыщенность). Тон добавляет к цвету серый (уменьшает насыщенность, не меняя светлоту так резко). Наш генератор сосредоточен на оттенках и затемнениях — наиболее часто нужных вариантах в UI-дизайн-системах. Для создания тонов используйте инструмент «Смеситель цветов», чтобы смешать базовый цвет с нейтральным серым.