Инструменты › Вариации цвета

Вариации любого цвета

Введи любой HEX-цвет и получи его вариации — светлее, темнее, насыщеннее, бледнее, теплее и холоднее. Кликни на любой цвет чтобы скопировать.

Исходный цвет
Исходный цвет

Тинты и шейды

Тинт — цвет смешанный с белым, становится светлее. Шейд — смешанный с чёрным, становится темнее. Вместе они создают шкалу яркости одного оттенка, как в дизайн-системах Tailwind или Material.

Насыщенность и температура

Насыщенность показывает интенсивность цвета — от серого до яркого. Температура сдвигает оттенок в тёплую (красно-жёлтую) или холодную (сине-зелёную) сторону, сохраняя остальные характеристики.

Для чего это нужно

Вариации используются в дизайн-системах для hover и active состояний, теней и фонов. Без ограничений и без регистрации.

Часто задаваемые вопросы
Что такое тинт и шейд?
Тинт — это цвет осветлённый белым, шейд — затемнённый чёрным. Например, для синего #3B82F6: тинты будут светло-голубыми, шейды — тёмно-синими.
Как это работает технически?
Все вариации рассчитываются в пространстве HSL. Яркость меняется для тинтов/шейдов, насыщенность — для вариаций интенсивности, а оттенок сдвигается для изменения температуры.
Можно экспортировать результат?
Да. Нажми «Скопировать как CSS» — получишь CSS custom properties для всех вариаций. Или «Скопировать все HEX» — список всех кодов через запятую.
Инструмент бесплатный?
Да, полностью бесплатно. Без ограничений и без регистрации.