Генератор оттенков цвета — Бесплатно Онлайн
Создавайте светлые и тёмные оттенки из любого базового цвета.
Who uses the Генератор оттенков цвета?
- Frontend-разработчики, создающие фирменные цветовые палитры для дизайн-систем и библиотек компонентов.
- Дизайнеры, подбирающие более светлый или тёмный вариант фирменного цвета для состояний наведения/активности.
- UI-дизайнеры, строящие согласованные цветовые градации для визуально целостных интерфейсов.
How the Генератор оттенков цвета works
Введите базовый HEX-цвет или выберите его с помощью выбора цвета.
Инструмент генерирует 9 более светлых оттенков и 9 более тёмных теней от вашего базового цвета, показанных как hex-образцы.
Нажмите на любой образец, чтобы скопировать его hex-код в буфер обмена.
Сам базовый цвет показан отдельно между рядами более светлых и более тёмных вариантов.
Tips & tricks
- Нажимайте на любой образец — не только базовый цвет — чтобы скопировать именно его hex-код; небольшое всплывающее «Copied!» подтвердит это.
- Кнопки экспортировать-всё нет, поэтому для полного блока CSS-переменных или конфигурации Tailwind копируйте нужные образцы по одному.
- Поскольку смешивание — это простое RGB-смешение, очень светлые оттенки насыщенных цветов могут выглядеть слегка блёклыми по сравнению с перцептивно настроенным инструментом палитры.
- Вводите hex-код напрямую в текстовое поле для точных цветов вместо того, чтобы полагаться на сетку образцов выбора цвета.
Frequently Asked Questions
Сколько цветов генерирует этот инструмент?
Всего 19: 9 более светлых оттенков (смешанных к белому), ваш базовый цвет и 9 более тёмных теней (смешанных к чёрному). Образцы помечены своим hex-кодом, а не пронумерованными шагами.
Использует ли этот инструмент соглашение об именовании Tailwind 50–950?
Нет — образцы показаны как обычные hex-коды, без меток числовых шагов Tailwind (50, 100, 200… 950). При необходимости вы можете сопоставить сгенерированные hex-значения с именованием Tailwind самостоятельно.
В чём разница между тенью и оттенком?
Оттенок (tint) — это цвет, смешанный с белым (светлее). Тень (shade) — это цвет, смешанный с чёрным (темнее). Этот инструмент генерирует оба направления от вашего базового цвета.
Какой метод смешивания цветов использует этот инструмент?
Простое линейное RGB-смешивание к белому (для оттенков) или чёрному (для теней). Он не использует перцептивно однородное пространство вроде OKLCH, поэтому очень насыщенные оттенки могут казаться немного неравномерно светлее или темнее по сравнению с нейтральными цветами — переключателя метода смешивания нет.
Могу ли я экспортировать палитру как CSS-переменные или файл конфигурации Tailwind?
Не автоматически — кнопки массового экспорта нет. Нажмите на нужные образцы и вставьте их hex-код в свои CSS-переменные или конфигурацию Tailwind вручную.
Is my data safe when using the Генератор оттенков цвета?
Completely safe. The Генератор оттенков цвета processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор оттенков цвета output in commercial projects?
Yes. The Генератор оттенков цвета is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор оттенков цвета follow official standards?
Yes. The Генератор оттенков цвета is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.