Генератор оттенков цвета

Справка

Что такое тинты и шейды?

В теории цвета тинт (tint) — это любой цвет, смешанный с белым (осветлённый), а шейд (shade) — любой цвет, смешанный с чёрным (затемнённый). Вместе они образуют монохроматическую палитру — вариации одного оттенка при разных уровнях яркости. Этот инструмент генерирует полную шкалу от белого через базовый цвет до чёрного, давая готовую к использованию цветовую линейку для дизайна и разработки.

Сценарии использования цветовых оттенков

Дизайн-системы — генерация 9- или 11-ступенчатой шкалы оттенков для фирменного цвета, следуя паттерну Tailwind CSS (50–950), Material Design и большинства современных дизайн-систем. Состояния UI-компонентов — светлые тинты для фонов и hover-состояний, базовый цвет для основных действий, тёмные шейды для текста, границ и active-состояний. Визуализация данных — создание последовательных шкал от светлого к тёмному для хороплетных карт, тепловых карт и диаграмм, где интенсивность отражает величину. Доступность — подбор пар оттенков, соответствующих требованиям WCAG к контрастности (4,5:1 для обычного текста, 3:1 для крупного текста).

Как генерируются оттенки

Оттенки генерируются путём линейной интерполяции в пространстве RGB от белого (#FFFFFF) через базовый цвет до чёрного (#000000). При N оттенках базовый цвет располагается в середине шкалы. Каждый шаг равномерно смешивается, обеспечивая последовательную прогрессию яркости. Результат доступен в форматах HEX, RGB и HSL — копируйте отдельные значения или всю палитру целиком.

Конфиденциальность

Все операции выполняются 100% в браузере. Данные не передаются на сервер.