🎨 Палитра и OKLCH

22 оттенка × 11 ступеней, роли ступеней, контраст

Ступени и их роли

Ступени	Роль	Пример
50–100	фон блока, подсветка строки	`bg-amber-50`
200–300	рамки, разделители	`border-slate-200`
400–500	иконки, декоративные акценты	`text-slate-400`
600–700	заливка кнопок, активные состояния	`bg-sky-600`
800–950	текст, тёмные поверхности	`text-slate-900`

Правило пары: сумма ступеней фона и текста — не меньше 900 при разнице не менее 500. Например, фон 100 и текст 800.

Все оттенки

Слева направо: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

slate нейтральный холодный

gray нейтральный

zinc нейтральный тёплый

neutral чистый серый

stone тёплый серый

red ошибки, удаление

orange предупреждения

amber ожидание

yellow внимание

lime свежесть

green успех

emerald успех, финансы

teal спокойный акцент

cyan информация

sky ссылки, акцент

blue классический акцент

indigo бренд

violet премиум

purple креатив

fuchsia яркий акцент

pink мягкий акцент

rose ошибки, мягче красного

Формат OKLCH

--color-sky-600: oklch(58.8% 0.158 241.966);
/*                    │      │     └── тон: положение на цветовом круге
                       │      └──────── насыщенность (chroma)
                       └─────────────── светлота (lightness) */

Что нужно	Что менять
Сделать светлее	увеличить первое число
Приглушить	уменьшить второе число
Сменить оттенок	изменить третье число (0–360)
Добавить прозрачность	`oklch(0.6 0.2 240 / 50%)`

Практическое правило для тёмной темы: возьмите светлоту светлого варианта и увеличьте её на 0.05–0.1, слегка уменьшив насыщенность.

Семантические токены

В проектах поверх палитры строят смысловой слой — тогда тема меняется в одном месте (уроки 13 и 19).

background

card

primary

secondary

muted

destructive

<div class="grid gap-2 sm:grid-cols-3">
  <div class="rounded-lg bg-background p-3 text-sm text-foreground ring-1 ring-border">background</div>
  <div class="rounded-lg bg-card p-3 text-sm text-card-foreground ring-1 ring-border">card</div>
  <div class="rounded-lg bg-primary p-3 text-sm text-primary-foreground">primary</div>
  <div class="rounded-lg bg-secondary p-3 text-sm text-secondary-foreground">secondary</div>
  <div class="rounded-lg bg-muted p-3 text-sm text-muted-foreground">muted</div>
  <div class="rounded-lg bg-destructive/10 p-3 text-sm text-destructive">destructive</div>
</div>

Токен	Что означает
`background` / `foreground`	страница и основной текст
`card`, `popover`	поверхности разного уровня
`primary`, `secondary`	действия по важности
`muted`, `accent`	приглушённое и подсвеченное
`destructive`	опасное действие
`border`, `input`, `ring`	границы, поля, фокус

Контраст

Текст	Минимальный контраст
Обычный (до 18px)	4.5:1
Крупный (от 24px или 18px жирный)	3:1
Границы интерактивных элементов	3:1

Проверять удобно в DevTools: выберите элемент, откройте палитру цвета — рядом со значением показан контраст с фоном.