Обзор Генератор шкалы цвета
Любой цвет → шкала 50–950 с экспортом CSS
Как использовать
Превратите одну базовую краску в полную шкалу от 50 до 950 с готовым к вставке CSS и выводом Tailwind.
Генератор шкалы цвета
Зачем нужна шкала 50–950
Шкала даёт одному оттенку достаточно ступеней для фонов, рамок, текста и состояний. Ступень 50 — самый светлый тон, 950 — самый тёмный, а 500 обычно несёт брендовый цвет.
Ровные ступени упрощают поддержку: разница между соседними значениями остаётся предсказуемой на любом экране.
Как строятся ступени
Каждая ступень нацелена на светлоту в OKLCH, поэтому шкала остаётся перцептивно ровной и не проваливается в тенях. По краям снижается насыщенность, чтобы светлые тона были чистыми, а тёмные — глубокими.
Частые вопросы
Почему ступень 500 не равна моему цвету?
500 находится в середине шкалы и безопаснее всего для кнопок и ссылок. Исходный цвет может быть светлее или темнее и попадает на соседнюю ступень.
Можно ли сразу использовать экспортированный CSS?
Да. Блок задаёт --brand-50 … --brand-950. Перед вставкой переименуйте префикс под вашу систему.
Работает ли это для серых цветов?
Да. Цвета с низкой насыщенностью дают нейтральную шкалу почти без оттенка, подходящую для текста, рамок и неактивных состояний.