Смешивание цветов
Смешайте два цвета в любой пропорции и скопируйте результат в hex. Всё считается в браузере, ничего никуда не отправляется.
sRGB проводит прямую между двумя цветами, и для противоположных оттенков она проходит через серый. OKLab обходит его и сохраняет насыщенность.
Результат
Очевидный способ смешать два цвета — усреднить их красный, зелёный и синий — обычно даёт результат темнее и серее обоих. Смешивание в OKLab сохраняет яркость там, где её ожидаешь. Здесь есть оба варианта, чтобы видеть, во что обходится разница.
Как считается смесь
Цвет можно ввести в hex (#f27d14 или коротко #f80), в rgb() или hsl(), названием CSS вроде red или выбрать в палитре рядом с полем. Ползунок задаёт долю второго цвета от 0 до 100% с шагом 1%, и результат пересчитывается сразу, без кнопки. В режиме sRGB каждый канал — красный, зелёный и синий — берётся как среднее двух значений от 0 до 255 с этой долей. В режиме OKLab, который включён по умолчанию, оба цвета сначала переводятся в пространство OKLab, где равные шаги выглядят для глаза равными; там усредняются светлота и два цветовых канала, а результат переводится обратно. Отсюда разница: синий #0000ff и жёлтый #ffff00 пополам дают в sRGB серый #808080, а в OKLab — голубой #6cabc7. Щелчок по образцу копирует hex в буфер обмена.
Ограничения
Смешиваются ровно два цвета; третий добавляется смешиванием результата с ним. Результат копируется только в hex. Прозрачность из #rrggbbaa или rgba() отбрасывается, поэтому смесь всегда непрозрачная. Доля задаётся целыми процентами. Это смешивание света, как на экране, а не красок: моделей RYB или CMYK для пигментов здесь нет. Каналы, вышедшие за пределы sRGB при обратном переводе из OKLab, обрезаются до диапазона 0–255.
Как пользоваться
- Введите оба цвета.
- Ползунком задайте пропорцию.
- Щёлкните по результату, чтобы скопировать.
Почему этот инструмент
Полная конфиденциальность
Всё работает внутри браузера. Ваши файлы и текст никогда не отправляются на сервер.
Бесплатно и без ограничений
Без регистрации, без водяных знаков и без лимита на количество использований.
Мгновенный результат
Не нужно ничего загружать и ждать очереди — результат появляется так быстро, как позволяет ваше устройство.
Работает на любом устройстве
Любой современный браузер на телефоне, планшете или компьютере. Ничего устанавливать не нужно.
Частые вопросы
- Как смешать два цвета онлайн?
- Введите первый и второй цвет, ползунком задайте долю второго и щёлкните по результату: hex скопируется в буфер обмена. Цвет можно ввести в hex, rgb(), hsl() или названием.
- Какой цвет получится, если смешать синий и жёлтый?
- На экране не зелёный: в sRGB выйдет серый #808080, в OKLab — светло-голубой #6cabc7. Зелёный получается у красок, потому что пигменты поглощают свет, а экран его складывает.
- Почему красный с зелёным дают жёлтый?
- Так складывается свет. Пополам в OKLab выходит золотисто-жёлтый #d0a800, в sRGB — оливковый #808000. У красок те же два цвета дают бурый.
- Почему способов смешивания два?
- sRGB — то, что делает большинство кода, и усреднение по каналам по дороге проходит через более тёмные и менее насыщенные значения. OKLab построен так, что равные шаги выглядят равными, поэтому смесь остаётся такой же яркой, как исходные цвета.
- Так ли смешиваются краски?
- Нет. Краски смешиваются субтрактивно, поэтому синий с жёлтым дают зелёный на бумаге и серый на экране. Здесь смешивается свет, как это и делает экран.
- Можно смешать больше двух?
- Смешайте два, скопируйте результат и смешайте его с третьим. Порядок влияет на итог — ровно как с красками.
Похожие инструменты
Оттенки и тона
Построить полную шкалу из одного цвета, от светлого к тёмному.
Генератор CSS-градиентов
Собрать градиент, который не сереет в середине.
Подбор цвета
Один цвет, все коды и то, с чем он сочетается.
Генератор палитры
Пять сочетающихся цветов. Закрепите удачные, остальные — заново.
Цвет с изображения
Взять любой цвет с картинки или сразу всю палитру.
Проверка контраста
Проверить, читается ли текст на своём фоне.
Генератор фавиконок
Превратить логотип в favicon.ico и все иконки, нужные сайту.