CodeKitHubЧто это за инструмент?
Шкала оттенков — это ряд вариаций одного цвета при разных уровнях светлоты, повсеместно используемый в UI-дизайне для состояний наведения, отключённых состояний, границ и фонов, которые должны соотноситься с фирменным цветом, не будучи идентичными ему.
Этот инструмент переводит ваш базовый цвет в HSL, сохраняет оттенок и насыщенность неизменными и меняет светлоту от примерно 95% (почти белый тон) до примерно 10% (почти чёрный оттенок), при этом исходный цвет занимает своё естественное положение в середине шкалы.
Зачем его использовать?
- Создаёт шкалу в стиле дизайн-системы (как шкала 50/100/200…/900 в Tailwind) из любого одного цвета, а не только из фиксированной готовой палитры.
- Выбирайте 7, 9 или 11 шагов в зависимости от нужной детализации шкалы.
- Каждый шаг показывает точный HEX-код и процент светлоты — кликните, чтобы скопировать.
- Сохраняет оттенок и насыщенность постоянными на всей шкале, поэтому все оттенки явно читаются как связанные с базовым цветом, а не уходят в серый.
- Бесплатно, мгновенно и полностью локально.
Как использовать
- Выберите базовый цвет с помощью палитры или введя HEX-код.
- Выберите нужное количество шагов в шкале (7, 9 или 11).
- Читайте HEX-код и процент светлоты каждого оттенка прямо на образце.
- Кликните по любому образцу, чтобы скопировать его HEX-код.
Пример
Ввод
#3B82F6 (средний синий), 9 шаговРезультат
9 оттенков от почти белого тона (~95% светлоты) до почти чёрного оттенка (~10% светлоты), при этом сам #3B82F6 расположен как средний шагОттенок и насыщенность остаются фиксированными во всех 9 шагах — меняется только светлота, — поэтому каждый оттенок явно читается как часть одной цветовой семьи.
Часто задаваемые вопросы
Это та же система, что использует Tailwind CSS для своих цветовых шкал?
Это та же базовая идея (фиксированные оттенок/насыщенность, переменная светлота), но не точная копия конкретной палитры Tailwind — шкалы 50-900 в Tailwind были вручную настроены дизайнерами, а не сгенерированы по единой формуле. Этот инструмент даёт вам сопоставимую структуру, созданную из любого выбранного цвета, что полезно, когда ваш базовый цвет не входит в готовые цвета Tailwind.
Почему мой цвет выглядит почти одинаково на двух соседних шагах?
Это может происходить около очень светлого или очень тёмного конца шкалы, где воспринимаемая светлота меняется медленнее, чем предполагает числовой процент (известное свойство восприятия цвета человеком, не специфичное для этого инструмента). Выбор меньшего числа шагов (7 вместо 11) раздвигает значения светлоты дальше друг от друга и уменьшает почти одинаковые образцы.
Могу ли я использовать эти оттенки напрямую как пользовательские свойства CSS?
Да — скопируйте каждый HEX-код и вставьте в свои CSS-переменные (например, --color-brand-100 до --color-brand-900), сопоставив позицию в шкале с той системой именования, которую использует ваш проект.
Что использовать — этот инструмент или Смеситель цветов?
Если вы создаёте более светлые и более тёмные версии одного цвета — состояния наведения, тонкие фоны, границы, связанные с фирменным цветом — используйте этот генератор оттенков. Если вместо этого нужен цвет между двумя разными цветами (например, шаг между основным синим и вторичным оранжевым), используйте Смеситель цветов, который интерполирует RGB-каналы двух цветов в любой пропорции, а не меняет светлоту одного цвета.
Что произойдёт, если мой базовый цвет уже очень светлый или очень тёмный?
Базовый цвет всегда находится в средней строке, светлые тона поднимаются над ним примерно до 95% светлоты, а тёмные оттенки опускаются ниже примерно до 10%. Если ваш базовый цвет уже почти белый, светлая половина шкалы сжимается в узкий диапазон светлоты (почти одинаковые строки), а тёмная половина растягивается широко — и наоборот для очень тёмного базового цвета. Для наиболее равномерно распределённой шкалы начинайте с версии цвета средней светлоты (примерно 40-60% светлоты).
Может ли он также создавать приглушённые тона (цвет, смешанный с серым)?
Нет — этот инструмент меняет только светлоту, сохраняя насыщенность фиксированной, что даёт светлые тона и оттенки, но не приглушённые тона. Если хотите более приглушённую шкалу, сначала уменьшите насыщенность базового цвета (выберите более серую версию в палитре) и создайте шкалу из неё; каждый шаг унаследует более низкую насыщенность.