Смешивание цветов
FreeСмешивайте два цвета с настраиваемым балансом, используя простое RGB-смешивание, гамма-коррекцию или HSL-смешивание.
Градиент смешивания (0% до 100%)
Недавняя активность
Видно всем. Последние 20 использований от всех посетителей, сначала новые.
#FF0000 + #0000FF → #800080
16 часов назад
Что делает этот инструмент
Смешивает два цвета вместе и показывает получившийся цвет, с настраиваемым балансом между ними и выбором из трёх методов смешивания: простое усреднение RGB, гамма-корректное (линейный свет) смешивание или смешивание HSL через оттенок и насыщенность.
Как это работает
Каждый цвет сначала преобразуется из hex в значения красного, зелёного и синего (0-255). Простой режим RGB напрямую линейно интерполирует каждый канал: результат = цвет1 + (цвет2 - цвет1) × баланс. Гамма-корректный режим сначала преобразует каждый канал из значений sRGB, отображаемых вашим экраном, в линейный свет с помощью стандартной передаточной функции sRGB, интерполирует в этом линейном пространстве, затем преобразует обратно, что соответствует физическому комбинированию света и избегает искусственно тёмной средней точки. Режим HSL преобразует оба цвета в оттенок/насыщенность/светлоту, интерполирует оттенок вокруг цветового круга по кратчайшему угловому пути (так что он корректно оборачивается, например, смешивание оттенка около 350° с оттенком около 10° проходит через 0°, а не длинным путём через 180°), нормально интерполирует насыщенность и светлоту, и преобразует результат обратно в RGB.
Какие проблемы решает
- Поиск промежуточного цвета для градиента, палитры темы или дизайн-системы без ручного подбора hex-значений.
- Сравнение того, как выглядят одни и те же два цвета при смешивании разными методами, поскольку «правильный» способ смешивания цветов зависит от того, что вы создаёте.
- Предварительный просмотр полного градиента между двумя фирменными или UI-цветами с первого взгляда перед выбором точки остановки.
Часто задаваемые вопросы
›Какой режим смешивания использовать?
Простой RGB подходит для быстрых, предсказуемых смесей и соответствует тому, что делают большинство базовых инструментов. Гамма-коррекция - лучший выбор, когда вы хотите физически естественно выглядящую смесь, особенно между тёмными и светлыми цветами, поскольку она избегает мутного, слишком тёмного вида, который создаёт простое усреднение RGB. HSL стоит попробовать, когда вы хотите результат, более близкий к смешиванию пигментов или краски, где красный и зелёный склоняются к жёлтому, а не к тусклому коричневому.
›Почему смешивание чёрного и белого даёт более тёмный серый в «Простом RGB», чем в «Гамма-коррекции»?
Простой RGB напрямую усредняет исходные числа 0-255, поэтому 50% чёрного и белого дают ровно 127,5 - средний серый. Гамма-коррекция сначала преобразует оба цвета в линейный свет (отменяя гамма-кривую sRGB, которую ожидает ваш экран), усредняет там, затем преобразует обратно, что даёт заметно более светлый результат (около 188), поскольку равные шаги в сохранённых значениях цвета не соответствуют равным шагам в воспринимаемой яркости.
›Что делает ползунок «Баланс»?
Он задаёт весовое соотношение между двумя цветами: 0% - это 100% первого цвета, 100% - 100% второго цвета, а 50% - равномерная смесь. Перемещая его, вы можете просмотреть любую точку вдоль смеси, а не только середину.
›Почему смешивание HSL иногда даёт неожиданный цвет, например красный и синий смешиваются через фиолетовый, а красный и зелёный - через жёлтый?
Смешивание HSL интерполирует угол оттенка на 360-градусном цветовом круге по кратчайшему пути между двумя оттенками, а не усредняет значения красного, зелёного и синего напрямую. Красный (0°) и зелёный (120°) относительно близки на этом круге, проходя по пути через жёлтый (60°), поэтому смесь склоняется к жёлтому, а не становится плоским коричневым, как это сделало бы простое усреднение RGB.
›Поддерживает ли этот инструмент прозрачность или альфа-значения?
Нет, он смешивает два полностью непрозрачных цвета. Если вам нужно наложить полупрозрачный цвет поверх другого (альфа-композитинг), это другая операция, отличная от смешивания двух сплошных цветов, и потребует специального инструмента.
Похожие инструменты
Изображение
RGB-каналы изображения
Разделите фотографию на красный, зелёный и синий каналы в оттенках серого или цветном виде, объедините их обратно и скачайте в ZIP прямо в браузере.
FreeИзображение
Конвертер и просмотрщик SVG
Конвертируйте SVG в PNG, JPEG, WEBP, BMP, ICO или AVIF, или оберните PNG/JPEG/WEBP/BMP/GIF/ICO в допустимый SVG с автоматическим определением направления прямо в браузере.
FreeИзображение
Создатель Постеров
Разбейте любое изображение на печатные страницы A4/Letter/A3, которые можно склеить в один большой постер, с настраиваемым нахлёстом для лёгкого выравнивания — прямо в браузере.
FreeИзображение
Добавить линию на изображение
Нарисуйте одну или несколько линий на загруженном изображении, перетаскивая или задавая точные координаты, затем скачайте результат в полном разрешении.
Комментарии (0)
Понравился инструмент? Оставьте комментарий, поделитесь советом или расскажите, как нам его улучшить.
Пока нет комментариев. Будьте первым, кто поделится мнением!