Генератор tint и shade

Это генератор tint и shade. Из одного HEX строит смесь к белому и к чёрному либо шагает по светлоте, насыщенности и тону HSL.

Нажмите значение, чтобы скопировать

Примеры — нажмите образец

Несколько цветов сразу. По одному в строке или через запятую: #3B82F6, #FF573380. «Подставить пример» вставит три строки и таблицу ниже.

Генератор tint и shade

Это генератор tint и shade. Смешивает HEX к белому или чёрному для наведения и рамок.

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

  1. Вставьте HEX, rgb() или hsl(), выберите цвет, случайный, пример (#3B82F6, #171B45, #0074D9, #0F766E) или пиксель, если браузер умеет.
  2. Ось «Смесь (белый / чёрный)» — начальная. Светлота, насыщенность и тон держат остальные каналы HSL. Шаг 5%, 10%, 20% или 25%; «Своё» — 2–20 делений.
  3. Полная шкала: shade слева, база по центру, tint справа. HEX под блоком. Щелчок копирует HEX и обновляет чипы.
  4. Имя токена (brand) заполняет --brand-tint-10 и фрагмент Tailwind. Копировать результат копирует CSS. Показать пример грузит #3B82F6 на 10% смеси.
  5. Пакет принимает несколько HEX. Пример — #3B82F6, #171B45 и #0074D9. В строке база, средний tint и средний shade.

Замечания

Смесь линейна в sRGB к #FFFFFF или #000000. 50% tint у #3B82F6 — этот синий на 50% поверх белого. Светлота / насыщенность / тон — HSL, не OKLCH. Неверный HEX даёт ошибку. Очистить всё опустошает шкалы. Связанное: HEX to Tailwind, прозрачность, HEX to RGBA.

Где применять

  • Hover, нажатие и рамка из брендового HEX.
  • Рампа 10% под токены 100–900.
  • Приглушённые заливки снижением насыщенности.
  • Парные тона поворотом hue.

Вопросы

50% tint — это 50% прозрачности на белом?

На оси смеси да: цвет на 50% поверх #FFFFFF.

10% — это Tailwind 50–950?

По девять шагов в каждую сторону плюс база. Это проценты смеси, не OKLCH. Для класса по умолчанию — HEX to Tailwind.

Несколько цветов сразу?

Да. По одному в строке или запятые вне скобок. rgb(22, 163, 74) остаётся одним пунктом.