Урок 06. Цвет: палитра, прозрачность, градиенты

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Палитра Tailwind — 22 оттенка по 11 ступеней: от 50 (почти белый) до 950 (почти чёрный). Одно и то же значение подставляется в разные свойства: bg-sky-600, text-sky-600, border-sky-600, ring-sky-600. Прозрачность добавляется через дробь: bg-slate-900/60.

О чём этот урок

Цвет — это не «выбрать красивый оттенок», а система: какие ступени брать для фона, какие для текста, как получить достаточный контраст и как не развалить интерфейс на десяток несогласованных тонов. Разберём устройство палитры, цветовое пространство OKLCH, модификатор прозрачности, градиенты и правила подбора пар «фон + текст».

Структура урока

Теория

Ступени, OKLCH, контраст, прозрачность.

Справочник

Все цветовые утилиты и палитра.

Примеры

Статусы, кнопки, подложка модального окна, градиент.

Старый vs Новый

HEX-константы против токенов, RGB против OKLCH.

Задания

Собрать набор статусов и проверить контраст.

Решения

Готовые пары цветов с объяснением.

Ошибки

Низкий контраст, случайные оттенки, цвет как единственный признак.

Домашнее задание

Цветовая система проекта.

Ресурсы

Документация по цвету и контрасту.

Практика

  • Соберите три бейджа статусов на одной цветовой логике.
  • Подберите пару «фон 100 / текст 800» и проверьте её в тёмной теме.
  • Сделайте подложку модального окна полупрозрачной.

Навигация