Оттенки фирменного цвета

Введите основной цвет вашего бренда и получите палитру из десяти оттенков (от 50 до 900) в стиле дизайн-системы, чтобы выстроить согласованную цветовую гамму. Расчёт 100% локально в вашем браузере.

Сгенерированные оттенки

Как это работает

Надёжная дизайн-система никогда не ограничивается одним тоном: нужны более светлые варианты для фонов и неактивных состояний и более тёмные — для текста или состояний при наведении. Этот инструмент переводит ваш цвет в HSL, сохраняет исходный тон и меняет только яркость (а на краях диапазона слегка и насыщенность), чтобы получить десять оттенков с номерами от 50 (очень светлый) до 900 (очень тёмный) по образцу палитр Tailwind CSS.

Какой оттенок ближе всего к моему исходному цвету?

Оттенок 500 рассчитывается так, чтобы максимально приблизиться к введённому вами цвету; оттенки с меньшими номерами постепенно светлеют к белому, а с большими — постепенно темнеют к чёрному.

Можно ли скопировать один оттенок или всю палитру?

Нажмите на плашку, чтобы скопировать её код HEX по отдельности, или воспользуйтесь кнопкой «Копировать всю палитру», чтобы получить полный список в формате номер: #hex, готовый для вставки в файл конфигурации CSS или Tailwind.

Расчёт оттенков выполняется полностью в вашем браузере; цвет вашего бренда никогда не отправляется на сервер.