Как сделать светлые и тёмные оттенки цвета из HEX-кода

Что делает инструмент

Инструмент Color Shades помогает получить более светлые и более тёмные варианты одного исходного цвета. Это удобно при подготовке палитры для интерфейса, иллюстрации или макета, когда нужно быстро рассмотреть несколько последовательных изменений оттенка, не подбирая каждое значение вручную. На вход подаётся цвет в шестнадцатеричной записи, например #3498db. Если цвет указан без начального символа #, он добавляется перед разбором значения. Короткая трёхзначная запись также подходит: каждая цифра в ней разворачивается повторением перед преобразованием цвета. (Например, #abc обрабатывается как запись с повторёнными цифрами.)

По умолчанию используется цвет #3498db, создаётся 10 шагов, а в результат включаются обе группы: светлые и тёмные варианты. Эти параметры можно изменить под задачу: выбрать другое исходное значение, указать число шагов и оставить только нужную группу. Чем больше положительное число шагов, тем больше позиций будет в каждой включённой группе.

Как получить варианты цвета

Введите исходный цвет в шестнадцатеричной записи. Можно написать значение с # или без него. Если поле оставить пустым, будет использован цвет #3498db.
Укажите положительное целое число шагов. Если отдельное значение не задано, инструмент использует 10. Для небольшой палитры задайте меньше шагов, а для более плавного ряда увеличьте число, учитывая, что каждая включённая группа получит столько записей.
Определите, какие варианты нужны. Светлую группу и тёмную группу можно включать или исключать независимо. Если ничего не менять, в результат попадут обе группы.
Запустите обработку с выбранными параметрами. Проверьте, что введённый цвет действительно записан в поддерживаемом шестнадцатеричном формате, особенно если значение копировалось из другого источника.
Просмотрите результат. При пяти шагах каждая включённая группа содержит пять вариантов. Сопоставьте их с исходным цветом и выберите значения, которые подходят для фона, текста, границ или соседних элементов палитры. Не ориентируйтесь только на порядок: оцените каждый оттенок в контексте вашей композиции.

Полезно сначала задать небольшое число шагов, чтобы увидеть направление изменения, а затем повторить обработку с более подходящим размером группы. Если нужны только осветлённые или только затемнённые значения, отключите вторую группу до запуска, чтобы результат сразу соответствовал вашей задаче.

Как читать результат

В результате следует искать исходный цвет и отдельные группы светлых и тёмных вариантов. Число элементов в каждой группе связано с заданным положительным целым числом шагов: при пяти шагах в каждой включённой группе будет пять элементов, а отключённая группа в выдачу не входит. Поэтому отсутствие одной из групп может быть следствием выбранных параметров, а не признаком ошибки.

Значения каналов при создании вариантов округляются до целых чисел и ограничиваются диапазоном от 0 до 255 перед форматированием в шестнадцатеричный вид. Это значит, что итоговые записи будут представлены целыми цветовыми каналами в допустимом диапазоне. Отчёт об исходном цвете сохраняет введённый текст после добавления начального #, если его не было.

Если введённое значение не проходит преобразование при разборе, возвращаемые данные содержат признак ошибки, хотя сама операция отмечается как успешная. В такой ситуации не выбирайте полученные варианты для макета: исправьте исходную запись и выполните обработку снова. Если нужен контролируемый ряд, сравните результат с исходным цветом и заранее решите, какая группа и какое количество шагов действительно нужны.

Инструмент формирует варианты от заданного цвета, но выбор подходящего оттенка остаётся частью работы с дизайном. Один и тот же ряд может по-разному восприниматься рядом с белым, чёрным или насыщенным фоном. Проверяйте читаемость текста и визуальный баланс уже в том макете, где цвет будет использоваться.

Практический пример

Дизайнер подбирает по три более светлых и более тёмных варианта для палитры карточки интерфейса.

Введите #336699, задайте 3 шага, оставьте обе группы включёнными и запустите обработку.

В результате будут исходный цвет и две группы вариантов: светлая и тёмная, по три записи в каждой. Конкретные значения зависят от обработки введённого цвета.

Ограничения

При значении, которое не проходит разбор цвета, результат содержит признак ошибки, хотя операция отмечается как успешная; такой результат нужно перепроверить после исправления ввода.

Частые ошибки

Причина: в поле введено значение, которое инструмент не может разобрать как цвет. Исправление: проверьте шестнадцатеричную запись, затем повторите обработку и используйте варианты только из результата без признака ошибки.

Частые вопросы

Можно ли использовать короткую HEX-запись без символа #?

Да, если запись содержит три шестнадцатеричные цифры: перед преобразованием каждая цифра повторяется. Запись без начального # также обрабатывается после добавления этого символа.

Сколько оттенков создаётся по умолчанию?

Если число шагов не задано, используется 10. При положительном целом числе каждая включённая группа содержит столько вариантов, сколько указано шагов.

Можно ли получить только светлые или только тёмные варианты?

Да, группы настраиваются независимо. Можно оставить светлые варианты, тёмные варианты или обе группы; по умолчанию включены обе.