Микшер Цветов
Смешивайте два цвета и получайте смесь плюс каждый шаг между ними в HEX, RGB и HSL. Выбирайте смешивание sRGB, Linear RGB или перцепционное OKLab, установите непрозрачность для каждого цвета и скопируйте соответствующий CSS-градиент.
Ввод
Выберите цвет или введите значение HEX напрямую.
Сколько промежуточных цветов генерировать. Два исходных цвета всегда включаются.
sRGB соответствует большинству микшеров; OKLab поддерживает равномерную яркость и избегает грязных средних тонов.
Вывод
Два цвета, смешанные в равных частях.
Your color palette will appear here.
Каждое вычисленное значение написано, поэтому Linear RGB или OKLab рампа сохраняется в обычном CSS.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/color-mixer/"
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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что делает этот инструмент
Микшер Цветов смешивает два цвета и показывает вам все, что между ними. Выберите начальный цвет и конечный цвет, выберите желаемое количество шагов, и вы получите смесь 50/50, полную рампу промежуточных цветов в HEX, RGB и HSL, а также готовый к вставке CSS-градиент с теми же остановками.
Это цифровой эквивалент смешивания двух красок — за исключением того, что вы можете видеть каждый промежуточный оттенок одновременно, скопировать любой из них одним щелчком и точно контролировать как два цвета усредняются.
Как использовать
- Установите Начальный Цвет и Конечный Цвет (используйте выбор цвета или введите значение HEX).
- Перетащите Промежуточные Шаги для выбора количества промежуточных цветов. Два исходных цвета всегда включаются.
- По желанию понизьте Начальную Непрозрачность или Конечную Непрозрачность для смешивания полупрозрачных цветов.
- Скопируйте смесь 50/50, нажмите на любой образец для копирования его HEX или возьмите CSS-градиент.
Все работает в вашем браузере — без загрузок, без учетной записи, без ограничений.
Выбор цветового пространства смешивания
Это параметр, который большинство микшеров цветов вам не предоставляют, и он сильно меняет результат.
- sRGB усредняет необработанные значения каналов. Это то, что делает почти каждый микшер, и это соответствует тому, чего люди ожидают — но смешивание между двумя насыщенными цветами часто заканчивается грязной и темной серединой.
- Linear RGB сначала конвертирует из гамма-кривой sRGB, смешивает реальный свет, а затем конвертирует обратно. Это то, как свет физически комбинируется, поэтому середина остается ярче.
- OKLab смешивает в перцепционно однородном пространстве. Яркость и оттенок движутся с постоянной визуальной скоростью, поэтому рампа выглядит равномерно распределенной для глаза — лучший выбор для шкал системы дизайна и градиентов.
Синий к желтому — классический тест: в sRGB средняя точка смещается к серому, а в OKLab она остается похожей на реальный переход.
Почему CSS-градиент перечисляет каждую остановку?
Браузер интерполирует двухостановочный linear-gradient() в sRGB. Если вы смешивали в Linear RGB или OKLab, двухостановочный градиент выбросит это. Запись каждого вычисленного значения фиксирует рампу, которую вы действительно выбрали, и работает в каждом браузере.
Что означают восьмизначные значения HEX?
Когда смешанный цвет становится полупрозрачным, инструмент переключается на #rrggbbaa (и rgba() / hsla()), где последняя пара — это альфа-канал. Полностью непрозрачные цвета остаются в знакомой шестизначной форме. Непрозрачность всегда смешивается линейно, независимо от выбранного цветового пространства.
Что если я хочу оттенки одного цвета вместо смеси двух?
Используйте Генератор Оттенков и Теней Цвета, который смешивает единственный базовый цвет в сторону белого и черного. Для многоостановочного градиента с углами и позициями попробуйте Генератор CSS Градиента, а для извлечения цветов из существующего изображения используйте Экстрактор Палеты Цветов.