В этой статье
Что такое оттенки, тона и полутона цвета?
Оттенок создаётся смешиванием цвета с чёрным, делая его темнее. Тон создаётся смешиванием с белым, делая светлее. Полутон создаётся смешиванием с серым. Эти три операции создают полную палитру из любого базового цвета.
Понимание разницы между оттенками, тонами и полутонами фундаментально для теории цвета.
Как работает генерация оттенков
Генератор оттенков принимает базовый цвет (например #3b82f6) и создаёт диапазон более светлых и тёмных вариантов через манипуляцию яркостью в HSL.
- HSL-манипуляция — регулирует значение L при постоянных H и S
- Расчёт шагов — диапазон делится на равномерные интервалы
- Смешивание цветов — некоторые генераторы смешивают с белым/чёрным/серым
Попробуйте бесплатно — без регистрации
Генерировать оттенки цвета →Когда генерировать оттенки
Палитры оттенков необходимы для создания цельных дизайнов.
- Дизайн-системы — генерируйте полную шкалу (50-950) из основного цвета бренда
- UI-тематизация — создавайте состояния hover, active, focus и disabled
- Контраст доступности — тестируйте комбинации по требованиям WCAG
Часто задаваемые вопросы
В чём разница между оттенком и тоном?
Оттенок — цвет, смешанный с чёрным (темнее), тон — смешанный с белым (светлее).
Сколько оттенков нужно дизайн-системе?
Большинство используют 10 шагов (50-950) по конвенции Tailwind CSS.
Можно ли генерировать доступные комбинации?
Да. Генерируя полную палитру, можно тестировать пары по требованиям WCAG.