Смеситель цветов

Смешивайте два HEX-цвета в выбранной пропорции в цветовом пространстве RGB или Lab и считывайте полученный промежуточный цвет в виде образца и копируемого HEX-значения.

Загрузка инструмента…

Смеситель цветов — Вставьте два цвета в формате HEX, задайте ползунком пропорции, сколько цвета B подмешать, и выберите, смешивать ли в обычном RGB или в перцептивном пространстве Lab — результат мгновенно появляется в виде образца предпросмотра и копируемого HEX-значения. Нет ни пресетов, которых нужно ждать, ни кнопки, которую нужно нажимать; смесь пересчитывается по мере того, как вы печатаете или перетаскиваете. Всё работает целиком в вашем браузере, поэтому ваши цвета никогда не покидают ваше устройство.

Что такое Смеситель цветов?

Смеситель цветов — это бесплатный онлайн-инструмент, который интерполирует между двумя цветами и выдаёт промежуточный цвет. Вы вводите Цвет A и Цвет B в формате HEX (подходят как #rrggbb, так и сокращённая запись #rgb), перемещаете регулятор пропорции от 0% (полностью Цвет A) до 100% (полностью Цвет B) и выбираете цветовое пространство: RGB смешивает исходные каналы напрямую, тогда как Lab смешивает в перцептивном пространстве, которое обычно делает среднюю точку более естественной на вид и избегает грязно-серых оттенков. Дизайнеры, фронтенд-разработчики и иллюстраторы используют его, чтобы найти средний тон между двумя фирменными цветами, построить плавные двухцветные градиенты, вывести оттенки для состояний наведения или границ либо заранее увидеть, как две краски или две точки градиента встретятся посередине. Результат показывается в виде большого образца над полем HEX только для чтения, которое можно скопировать одним кликом.

Как пользоваться Смеситель цветов

  1. Введите или вставьте первый цвет в поле Цвет A (HEX), а затем второй в поле Цвет B (HEX), в формате #rrggbb или #rgb.
  2. Перетащите ползунок Пропорция (или введите число), чтобы задать, сколько Цвета B подмешивается: 0% даёт Цвет A, 100% даёт Цвет B, 50% — это ровная средняя точка.
  3. Выберите пространство смешивания переключателем RGB / Lab — выберите Lab для более перцептивно ровной смеси или RGB для буквального усреднения канал за каналом.
  4. Наблюдайте, как образец предпросмотра обновляется в реальном времени, и считывайте HEX-значение смешанного цвета под ним.
  5. Нажмите кнопку копирования рядом с результатом, чтобы скопировать смешанный HEX в буфер обмена.

Примеры

Ровная средняя точка красного и синего в RGB

Ввод

A #ff0000, B #0000ff, ratio 50%, RGB

Вывод

#800080

Преимущественно к белому

Ввод

A #4f86f7, B #ffffff, ratio 75%, RGB

Вывод

#d3e1fd

Lab против RGB на двух насыщенных тонах

Смешайте #00a000 с #d000d0 при 50%. В RGB вы получите тусклый смешанный тон, тогда как переключение на Lab даёт среднюю точку, которая лучше соответствует тому, что глаз ожидает между двумя тонами, — удобно для двухцветных градиентов, которые не должны мутнеть в середине.

Часто задаваемые вопросы

В чём разница между вариантами RGB и Lab?
RGB смешивает красный, зелёный и синий каналы независимо, что быстро и в точности совпадает с тем, как CSS усредняет цвета, но для далёких тонов может уходить в тусклые серые оттенки. Lab преобразует оба цвета в перцептивное пространство CIELAB, интерполирует там и преобразует обратно, благодаря чему средняя точка обычно остаётся ярче и ближе к тому, что ожидает ваш глаз. Оба дают результат #rrggbb.
Что означает регулятор пропорции?
Пропорция — это доля Цвета B в смеси. При 0% результат равен Цвету A, при 100% — Цвету B, а при 50% это ровная средняя точка между ними. Можно перетаскивать ползунок или ввести точный процент.
Какие форматы цвета я могу вводить?
Оба поля принимают HEX в форме #rrggbb (шесть символов) или #rgb (трёхсимвольная сокращённая запись). Если одно из значений не является допустимым HEX-цветом, появляется сообщение об ошибке, и смесь не показывается, пока оба значения не станут допустимыми. Вывод — всегда HEX-значение #rrggbb.
Можно ли использовать смешанный цвет в цепочке рабочего пространства?
Да. Результат предоставляется как выходной порт, поэтому в рабочем пространстве deftdeck вы можете подключить смешанный HEX прямо к другому инструменту, и он автоматически обновляется всякий раз, когда вы меняете цвет, пропорцию или цветовое пространство.
Отправляются ли мои цвета куда-либо?
Нет. Все вычисления смешивания выполняются локально в вашем браузере, поэтому значения цветов никогда не загружаются на сервер. Инструмент работает офлайн и сохраняет вашу палитру приватной.

Похожие инструменты

Код в изображение

Превратите фрагмент кода в аккуратную PNG-карточку с подсветкой синтаксиса прямо в браузере — с темой, градиентным или прозрачным фоном и отступами, без загрузки на сервер.

Проверка цветового контраста

Проверьте коэффициент контраста WCAG между HEX-цветом текста и фона и узнайте, проходит ли он AA и AAA для обычного и крупного текста.

Генератор оттенков цвета

Превратите один базовый цвет HEX в шкалу оттенков 50-950 в стиле Tailwind, смешивая его с белым и чёрным; каждая ступень с образцом и копируемым HEX.

Симулятор дальтонизма

Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.