Генератор оттенков цвета
Введите базовый цвет и шаг. Вы получите десять тонов к белому (тинты) и десять к чёрному (тени), у каждого свой HEX-код, плюс CSS-переменные для вставки.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Введите HEX-код или выберите цвет палитрой.
- Ползунком задайте шаг — от 1 до 10 %.
- Скопируйте список HEX светлых или тёмных оттенков либо весь блок CSS-переменных.
Как это работает
Для светлого оттенка каждый канал становится c + (255 − c) × p, для тёмного — c × (1 − p), где p — шаг, умноженный на 1…10, в долях. Значения округляются до целых.
Пример
По умолчанию — #3366cc с шагом 10 %. Первый светлый оттенок — #4775d1: красный 51 + (255 − 51) × 0,1 = 71,4 → 71 (47), зелёный 102 + 153 × 0,1 = 117,3 → 117 (75), синий 204 + 51 × 0,1 = 209,1 → 209 (d1). Первый тёмный — #2e5cb8: 51 × 0,9 = 45,9 → 46, 102 × 0,9 = 91,8 → 92, 204 × 0,9 = 183,6 → 184. На 50 % получаются #99b3e6 и #1a3366, на 100 % — #ffffff и #000000. В CSS это переменные --tint-10 … --tint-100 и --shade-10 … --shade-100.
Советы
- Шаг 10 хорошо подходит для шкалы из десяти ступеней, как 100–1000 в дизайн-системе.
- Проверяйте текст на каждом образце на контраст: на светлых оттенках белый текст почти никогда не читается.
Частые вопросы
Чем светлый оттенок отличается от тёмного?
Светлый оттенок (в дизайне — tint) — цвет, смешанный с белым. Тёмный (shade) — цвет, смешанный с чёрным. Здесь каждый канал RGB сдвигается на заданный процент пути к 255 или к 0.
Что задаёт шаг?
Сколько процентов добавляется на каждом из десяти образцов. При шаге 10 образцы проходят 10, 20 … 100 % пути к белому или чёрному, и последний — чисто белый или чёрный. При шаге 5 ряд заканчивается на 50 %.
Почему в списке нет самого базового цвета?
Ряды начинаются на один шаг от базового цвета: он — точка 0 % между светлыми и тёмными. Для этой позиции берите сам базовый HEX.
Это то же, что изменить светлоту в HSL?
Нет. Смешивание с белым или чёрным идёт по прямой в RGB и точно приходит к белому или чёрному. Изменение светлоты HSL даёт похожие, но не те же цвета, особенно у насыщенных.