Что такое оттенки цвета
Это ряд оттенков, исходящих из одного цвета: от почти белой версии до почти чёрной. У всех одинаковый базовый тон, поэтому они легко сочетаются друг с другом.
Светлые, тёмные и приглушённые оттенки
Светлый оттенок — это цвет, смешанный с белым: он ярче и нежнее. Тёмный оттенок — цвет, смешанный с чёрным: он темнее и глубже. Приглушённый оттенок — цвет, смешанный с серым: он более землистый и элегантный.
Как использовать шкалу оттенков в дизайне
Светлые оттенки (50–200) используй для фонов, средние (400–600) — для кнопок и ссылок, а тёмные (700–950) — для текста и рамок. С одной шкалой у тебя получится упорядоченный и цельный интерфейс.
Частые вопросы
Как рассчитывается шкала?
Мы используем цветовое пространство OKLCH, которое имитирует то, как глаз воспринимает светлоту. Поэтому шаги между оттенками выглядят равномерно, без резких скачков.
Что означают числа от 50 до 950?
Это шкала, которую используют Tailwind CSS и многие дизайн-системы: 50 — самый светлый оттенок, 950 — самый тёмный. Твой цвет попадает на число, которое ему лучше всего соответствует.
Можно использовать шкалу в Tailwind или в CSS?
Да. Введи название, выбери формат и скопируй код: CSS-переменные, готовые к вставке, или блок цветов для конфигурации Tailwind.
Чем шкала оттенков отличается от цветовой палитры?
Шкала — это оттенки одного цвета. Палитра сочетает разные цвета, которые подходят друг к другу. Многие палитры используют одну шкалу для фонов и текста и к ней один-два акцентных цвета.