Генератор тинтов и оттенков цветов
Создайте полосу тинтов (смешанных в белый цвет) и оттенков (смешанных в черный цвет) базового цвета с точными значениями hex для систем дизайна и состояний пользовательского интерфейса.
Ввод
Выберите цвет или введите значение HEX напрямую.
Сколько строк тинтов/оттенков создать, равномерно распределенных между базовым цветом и чистым белым/черным.
Вывод
Your color palette will appear here.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-tint-shade-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#808080",
"steps": "5"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `color-tint-shade-generator` tool (Color Tint & Shade Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/color-tint-shade-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор тинтов и оттенков цветов — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Генератор тинтов и оттенков цветов берет один базовый цвет и создает полосу более светлых тинтов (смешанных в белый) и более темных оттенков (смешанных в черный), каждый с меткой, указывающей процент смешивания и его точное значение hex. Выберите цвет, укажите количество нужных шагов и получите готовую шкалу для системы дизайна, библиотеки компонентов или одноразового интерфейса.
Тинты и оттенки
- Тинт — базовый цвет смешанный с белым. Тинты используются для фонов при наведении, отключенных состояний, тонких бликов и светлых поверхностей, которые по-прежнему читаются как «тот же» цвет вашего бренда.
- Оттенок — базовый цвет смешанный с черным. Оттенки используются для нажатых/активных состояний, темных поверхностей, границ и текста, который должен оставаться читаемым на светлом фоне, при этом связываясь с базовым цветом.
Вместе шкала тинтов/оттенков является основой большинства цветовых шкал дизайн-токенов (color-50 до color-900, или аналогично): один базовый оттенок расширяется в полный диапазон значений яркости, которые пользовательский интерфейс может последовательно использовать, вместо того чтобы каждый компонент выбирал свой собственный произвольный оттенок.
Как работает смешивание
Каждый шаг смешивает красный, зеленый и синий каналы базового цвета в сторону целевого цвета (белый или черный) на процент t, используя прямую линейную интерполяцию для каждого канала:
- Тинт:
channel + (255 - channel) × t - Оттенок:
channel × (1 - t)
Результат округляется до ближайшего целого числа и преобразуется обратно в hex. Проценты распределяются равномерно между 0% и 100% — например, при 5 шагах вы получаете примерно 17%, 33%, 50%, 67% и 83% — поэтому шкала никогда не включает вырождающийся шаг 0% (идентичный базовому цвету) или шаг 100% (чистый белый или черный).
Как пользоваться
- Выберите базовый цвет с помощью палитры или введите значение hex напрямую.
- Отрегулируйте ползунок Шаги (3–9), чтобы контролировать, сколько строк тинтов/оттенков генерируется.
- Таблица мгновенно обновляется с процентом, hex тинта и hex оттенка каждой строки.
- Скопируйте таблицу или загрузите как CSV, чтобы вставить в таблицу стилей, конфигурацию Tailwind или палитру цветов инструмента дизайна.
FAQ
Почему RGB линейная интерполяция вместо регулировки яркости HSL? Смешивание каналов прямо в направлении белого или черного — это наиболее буквальное прочтение «тинта» и «оттенка» из традиционной теории цвета — это то, что происходит, когда вы физически смешиваете краску с белым или черным пигментом. Регулировка только яркости HSL может изменить, насколько насыщенным выглядит цвет в середине шкалы; прямое смешивание каналов делает смешивание предсказуемым.
Почему шаги не совпадают с круглыми процентами, такими как 10%, 20%, 30%? Шаги равномерно распределяются по интервалу между базовым цветом и чистым белым/черным, поэтому точные проценты смещаются с изменением количества шагов. Средний шаг при нечетном количестве шагов всегда приходится на ровные 50%.
Могу ли я использовать эти цвета прямо в CSS?
Да — каждое значение hex готово к вставке в пользовательское свойство CSS, переменную Sass или цветовую шкалу Tailwind, напр. --color-primary-100: #E9E9E9;.
Изменит ли увеличение количества шагов мои существующие значения hex? Да. Поскольку проценты равномерно распределены по всем шагам, изменение количества шагов перестраивает позицию каждого шага — это не просто добавление строк к существующей шкале.
Конфиденциальность
Вся математика цветов выполняется локально в вашем браузере — ваш базовый цвет и выбранное количество шагов никогда не отправляются на сервер.