Путь задачи / от ввода к результату
Как сгенерировать шкалу оттенков цвета
- 01
Задайте базовый цвет
Введите шестнадцатеричное значение в поле «Базовый цвет» — подходят #RGB, #RGBA, #RRGGBB и #RRGGBBAA, а поле открывается с #6D5EF8. Базовый цвет всегда оказывается в середине готовой шкалы.
- 02
Выберите количество оттенков
Установите «Количество оттенков» в целое число от 3 до 20 — по умолчанию 9. Нечётное количество равномерно балансирует тёмную и светлую стороны вокруг базового цвета; чётное по-прежнему центрирует базу и даёт светлой стороне один лишний образец.
- 03
Сгенерируйте шкалу
Нажмите «Сгенерировать оттенки». Палитра идёт от глубоких тёмных оттенков через базовый цвет к светлым, и каждый образец пронумерован и подписан своим шестнадцатеричным значением, поэтому позиция 1 — всегда самый тёмный шаг.
- 04
Проверьте поведение смешивания
Оттенки ниже базового смешиваются в сторону чёрного, светлые выше — в сторону белого, но смешивание никогда не проходит больше 78% пути к любому из крайних значений. Крайние ступени остаются цветными и пригодными, а не проваливаются в почти чёрный или почти белый.
- 05
Загрузите пример шкалы
Нажмите «Загрузить пример», чтобы сгенерировать семь оттенков вокруг #0EA5E9 — полный эталонный прогон, который можно изучить перед вводом собственного фирменного цвета. «Сбросить» возвращает базу #6D5EF8 и количество 9.
- 06
Скопируйте или скачайте токены
Нажмите «Копировать результат», чтобы скопировать блок :root из пользовательских свойств --toolars-shade-1 …, или «Скачать», чтобы сохранить его как toolars-color-shades.css — готово для вставки в таблицу стилей. На каждой карточке образца также показано шестнадцатеричное значение для разового копирования.