Online Tool Store
Смеситель цветов
Смешивайте два цвета HEX в любом соотношении со смешиванием в линейном свете для естественного результата, с мгновенным выводом HEX и RGB в браузере.
🔒 Этот инструмент работает полностью в вашем браузере. Ваши файлы никогда не загружаются на сервер.
Показан пример — выберите свои два цвета и соотношение.
Созданная палитра
Цвета палитры
Цвет A
Результат смешивания
Цвет B
HEX смеси
RGB смеси
Как работает смеситель цветов
- Выберите или введите два цвета HEX — Цвет A и Цвет B.
- Перетащите ползунок соотношения к цвету, который должен преобладать в смеси.
- Образец смеси, код HEX, значение RGB и созданная пошаговая палитра обновляются мгновенно при изменении любого цвета или соотношения.
Метод
Красный, зелёный и синий каналы каждого цвета переводятся из гамма-кодированного sRGB в линейный свет, смешиваются по соотношению, затем переводятся обратно в sRGB для показа. Смешивание в линейном пространстве избавляет от затемнённого, слегка серого вида, который получается при прямом усреднении байтов sRGB.
mixed = linearToSrgb(srgbToLinear(A) × (1 − t) + srgbToLinear(B) × t)
Пример: смешивание #2F6FED (синий) и #FFD166 (золотой) в соотношении 50/50 даёт тёплый сбалансированный полутон, а не плоский серо-коричневый, как при наивном усреднении байтов. Выберите 3, 5, 7 или 9 цветов палитры, когда нужен повторно используемый диапазон между конечными точками.
FAQ
Почему смесь 50/50 не выглядит как обычное среднее двух значений RGB?
Этот инструмент смешивает цвета в линейном свете, а не усредняет сырые байты sRGB. Значения sRGB гамма-кодированы для дисплеев, поэтому прямое среднее двух байтов выглядит заметно темнее и мутнее, чем настоящее смешивание на основе света — перевод в линейный свет, смешивание и обратный перевод дают более естественный результат.
Имитирует ли это физическое смешивание красок?
Нет. Смешивание красок субтрактивно и зависит от химии пигментов, которая сильно различается между красками. Этот инструмент смешивает свет (аддитивный цвет), что соответствует смешиванию цветов на экране или в дизайнерском ПО, а не настоящей краске.
Можно ли ввести код HEX вместо палитры выбора цвета?
Да. Введите или вставьте 6-значный код HEX в любое текстовое поле, и образец и палитра обновятся.
Сохраняется ли соотношение смеси, если я уйду со страницы?
Нет. Всё сбрасывается при перезагрузке — расчёт выполняется полностью в вашем браузере, и ничего не отправляется и не хранится.
Можно ли экспортировать смешанную палитру как CSS-переменные?
Да. После создания палитры её можно скопировать или скачать как пользовательские свойства CSS, готовые для вставки в таблицу стилей.
Сколько цветов можно создать в палитре?
Выберите 3, 5, 7 или 9 равномерно распределённых шагов между двумя конечными цветами — все они смешиваются в линейном свете так же, как основная смесь.
Как мы в сравнении
| Функция | Online Tool Store | colorxs.com | Adobe Color |
|---|---|---|---|
| Регулируемое соотношение смеси, не только 50/50 | ✓ | Фиксированная середина | ✓ |
| Без регистрации и аккаунта | ✓ | ✓ | Аккаунт Adobe |
| Работает полностью на вашем устройстве | ✓ | Не указано | Не указано |
Если нужен точный контроль соотношения смешивания двух цветов с мгновенным приватным предпросмотром, Color Mixer от Online Tool Store держит всё на вашем устройстве.