Генерируйте тона, оттенки и полутона из любого базового цвета. Идеально для создания цветовых шкал, дизайн-систем и градиентов. Полностью на стороне клиента — мгновенный результат.
Более светлые версии (смешанные с белым)
Более тёмные версии (смешанные с чёрным)
Приглушённые версии (смешанные с серым)
Этот инструмент генерирует систематические вариации цвета из любого базового цвета. Тона создаются смешиванием цвета с белым для получения более светлых версий, оттенки — смешиванием с чёрным для более тёмных версий, а полутона — смешиванием с серым для приглушённых версий. Эти цветовые шкалы необходимы для создания согласованных дизайн-систем, UI-компонентов и доступных цветовых палитр. Вся обработка происходит в вашем браузере — данные не отправляются на сервер.
Тона создаются смешиванием цвета с белым, делая его светлее. Оттенки создаются смешиванием с чёрным, делая его темнее. Полутона создаются смешиванием с серым, что снижает насыщенность, сохраняя относительную светлоту. Вместе они образуют полную цветовую шкалу.
Для большинства дизайн-систем 10 шагов обеспечивают достаточную детализацию (например, 50–900 в Tailwind CSS). Для более простых проектов достаточно 5 шагов. Для высокодетализированных систем можно использовать до 20 шагов.
Да! Экспортируйте как CSS-переменные и используйте их в стилях, или экспортируйте как JSON для интеграции в дизайн-токены. Многие разработчики используют 10-ступенчатые шкалы (50, 100, 200, ..., 900) как основу для своих цветовых систем.
Цветовые шкалы используются для создания согласованных UI-компонентов — более светлые тона для состояний наведения и фонов, базовый цвет для основных действий, более тёмные оттенки для нажатых состояний и текста. Они обеспечивают визуальную иерархию и доступность во всём приложении.