Обзор Генератор шкалы цвета
Любой цвет → шкала 50–950 с экспортом CSS
Как использовать
Превратите одну базовую краску в полную шкалу от 50 до 950 с готовым к вставке CSS и выводом Tailwind.
Ограничения
Шаги строятся с фиксированным интервалом светлоты; очень насыщенные базовые цвета обрезаются на краях.
Генератор шкалы цвета
Зачем нужна шкала 50–950
Шкала даёт одному оттенку достаточно ступеней для фонов, рамок, текста и состояний. Ступень 50 — самый светлый тон, 950 — самый тёмный, а 500 обычно несёт брендовый цвет.
Ровные ступени упрощают поддержку: разница между соседними значениями остаётся предсказуемой на любом экране.
Как строятся ступени
Каждая ступень нацелена на светлоту в OKLCH, поэтому шкала остаётся перцептивно ровной и не проваливается в тенях. По краям снижается насыщенность, чтобы светлые тона были чистыми, а тёмные — глубокими.
Частые вопросы
Почему ступень 500 не равна моему цвету?
Можно ли сразу использовать экспортированный CSS?
Работает ли это для серых цветов?
Кривая контраста по шкале
На примере «藍 #104E8B»: все одиннадцать ступеней 50–950 измерены против белого и чёрного текста. Зелёный — 4,5:1 и выше, там можно ставить основной текст.