Я провожу удивительное количество своего дня где-то между файлом дизайна и таблицей стилей, подталкивая один цвет к другому, пока состояние зависания, граница или градиентная остановка не выглядят правильно. В течение многих лет я делал арифметику в голове или смотрел на нее в сборщике, и это нормально, пока вам не понадобится точный цвет на полпути между синим и теплым нейтральным, и вам он понадобится как гексовый код, который вы можете вставить. Поэтому я построил цветовой смеситель во время Toolz.dev это сочетает в себе два цвета с соотношением, которое вы контролируете, предлагает те же режимы смешивания, которые использует редактор изображений, и передает вам результат в HEX, RGB и HSL. Это руководство к нему и к тому, что " смешивание цветов и квот; означает на экране.
TL;DR: Цветной миксер объединяет два цвета в один. Инструмент цветовой смеситель интерполирует два цвета с регулируемым соотношением, поддерживает режимы W3C separable blend (множественный, экран, наложение, затемнение, осветление, разница, среднее значение), строит градиент промежуточных шагов между цветами и выводит каждый результат как HEX, RGB, и HSL. Он принимает имена цветов hex, rgb (), hsl (), и CSS, и он полностью работает на стороне клиента.
Как вы смешиваете два цвета на экране?
Простой ответ представляет собой средневзвешенное значение двух цветов ' красный, зеленый и синий каналы. Чтобы смешать красный (255, 0, 0) и синий (0, 0, 255) в равных частях вы усредняете каждый канал: красный становится (255+0)/2 = 128, зеленый остается 0, синий становится (0+255)/2 = 128, давая (128, 0, 128), что является гексом #800080, сплошной фиолетовый. смещайте вес в одну сторону и вы скользите по линии между двумя цветами. именно это и делает ползунок соотношения: при 0 процентах вы сохраняете первый цвет, при 100 процентах вы приземляетесь на второй, а 50 процентов - это четный раскол.
Это та же интерполяция, которую использует двухстопный градиент CSS, поэтому средняя точка linear-gradient(red, blue) является тем фиолетовым. микшер делает отношения явным, также рисуя градиент между вашими двумя цветами как полоску образцов, каждый из которых вы можете скопировать как промежуточный стоп. если вы когда-либо хотели & quot;три цвета, равномерно расположенные между этими двумя, & quot; градиентная полоса является самым быстрым способом их получения.
Одно честное предостережение, потому что это удивляет людей: усреднение RGB каналов не является тем, как пигменты смешиваются На экране цвета светлые и аддитивно сочетаются; в наборе краски, они пигмент и комбинируются субтрактивно Смешивая красный и зеленый свет тенденции к тусклой оливке, а не яркий желтый цвет вы бы получить от краски, потому что вы усредняют значения света, а не смешивая пигмент Это не ошибка в инструменте, это природа sRGB, и исправление, когда вы хотите более живой результат, чтобы смешать оттенки, которые сидят ближе друг к другу на колесе.The преобразователь цвета удобен рядом с микшером, когда вы хотите видеть один и тот же цвет, выраженный в разных форматах, и рассуждать о оттенке.
В чем разница между режимами Mix и blend?
Микс - это средневзвешенное значение, описанное выше: он всегда попадает где-то на прямую линию между двумя цветами. Режимы смешивания - это нечто совершенно другое. Это операции смешивания слоев от редакторов изображений, стандартизированные для Интернета в W3C Составление и смешивание Уровень 1 спецификация, и каждый из них объединяет каналы с другой формулой, а не с простым средним значением.
| мода | Поканальная формула (значения от 0 до 1) | Эффект |
|---|---|---|
| Микс | b (взвешенное по соотношению) |
Средневзвешенное значение находится между двумя цветами |
| Умножать | a x b |
Всегда темнее; белый оставляет цвет неизменным, черный - черным |
| Экран | a + b - a x b |
Всегда легче; обратное умножению |
| Наложение | умножьте или отобразите по базам | Увеличивает контрастность |
| Темнеть | min(a, b) |
Держит более темный канал |
| Осветлить | max(a, b) |
Сохраняет более легкий канал |
| Разница | abs(a - b) |
Расстояние канала; одинаковые цвета дают черный цвет |
| Среднее | (a + b) / 2 |
Невзвешенное среднее обоих |
Интуиция, которую стоит нести: умножать всегда темнеет, потому что умножение двух дробей дает меньшую дробь, поэтому красный, умноженный на синий, является черным (каждый цвет отсутствует в канале, который есть у другого).Экран всегда светлеет, потому что он умножается на инвертированные значения.Разница дает вам расстояние по каналам, поэтому смешивание цвета с самим собой при разнице дает чистый черный. В микшере ползунок соотношений ведет себя как непрозрачность слоя: он затухает смешанный результат в первом цвете, поэтому вы можете набрать эффект от тонкого до полного.
Чем управляет ползунок соотношения?
Соотношение устанавливает, насколько сильно второй цвет, или смешанный результат выбранного режима, наносится поверх первого цвета. Думайте о нем как о непрозрачности на верхнем слое. При 0 процентах верхний слой невидим, и вы видите первый цвет нетронутым. При 100 процентах верхний слой полностью непрозрачен, и вы получаете полную смесь для этого режима. При 50 процентах вы получаете равномерное разделение. Для простого микширования это уменьшается до знакомого средневзвешенного значения; для режима, такого как "Умножить", это позволяет вам применять нежное затемнение, а не полный эффект.
Эта унифицированная модель является преднамеренной, потому что это означает, что один ползунок выполняет одну и ту же концептуальную работу в каждом режиме. На практике я использую низкие соотношения, чтобы слегка подтолкнуть цвет к другому (состояние зависания, которое является " кнопка, но 15 процентов в сторону black") и высокие соотношения, когда я хочу полную смесь.The генератор градиента выбирает место, где заканчивается микшер, когда вы хотите превратить пару смешанных цветов в полный многоостановочный градиент CSS.
Как мне получить точный цвет на полпути между двумя цветами?
Установите режим "Смешать" и соотношение на 50, и в результате получится точная средняя точка. Вы также можете прочитать его прямо с полосы градиента: центральная точка обзора - это цвет середины. Когда вам нужно несколько равномерно расположенных цветов между двумя конечными точками, поднимите количество шагов градиента и скопируйте образцы в нужных вам положениях. Это повседневная задача, для которой был создан микшер, создаете ли вы оттенки для палитры, распределяете цвета визуализации данных или находите нейтраль, которая находится между двумя цветами бренда.
Для создания целых семейств одного цвета, а не для смешивания двух, генератор цветовых оттенков лучше подходит, поскольку он смешивает один цвет с белым, черным и серым, создавая оттенки, оттенки и тона. И когда вы выбираете цвета для текста или пользовательского интерфейса, проведите результат через цветосборщик и проверка контрастности, потому что красиво смешивающийся цвет все равно может не соответствовать порогу читаемости. Более широкий рабочий процесс, от комплектации до проверки и доставки, изложен в Набор инструментов для веб-разработчиков гид.
Почему мои смешанные цвета иногда выглядят мутными или темными?
Две вещи вызывают это, и обе - о цветовом пространстве, а не об инструменте. Первая - это аддитивное и вычитающее несоответствие, уже упомянутое: усреднение отдаленных оттенков в RGB дрейфует в сторону серого, поэтому противоположные цвета на колесной смеси к чему-то тусклому. Вторая заключается в том, что значения sRGB гамма-кодируются, а не линейный свет. истинное физическое среднее значение света сначала преобразуется в линейное пространство, среднее, затем преобразуется обратно, что сохраняет средние точки ярче. Большинство инструментов, градиенты CSS и редакторы изображений интерполируются непосредственно в sRGB с гамма-кодированием, потому что это быстро, предсказуемо и соответствует тому, что дизайнеры ожидают от градиента, поэтому этот микшер делает то же самое. Если вы хотите более яркое сочетание, смешайте более близкие оттенки, наклонитесь к режиму экрана или доберетесь до перцептивно однородного пространства, такого как OKLCH, в своем последнем CSS. The онлайн-инструменты конфиденциальности данных руководство объясняет, почему, грязные или нет средние точки, выполнение этих вычислений в браузере, а не на сервере, является правильным решением по умолчанию для проектных работ, которые вы предпочитаете сохранить локальными.
Часто задаваемые вопросы
Как вы смешиваете два цвета?
Чтобы смешать два цвета, вы усредняете их красный, зеленый и синий каналы, взвешенные по тому, сколько каждого цвета вы хотите. 50/50 смесь красного (255, 0, 0) и синего (0, 0, 255) в среднем до (128, 0, 128), который фиолетовый. этот инструмент делает эту интерполяцию для вас и позволяет вам смещать вес с ползунком соотношения, так что вы можете приземлиться в любом месте между двумя цветами, а не только точной средней точкой.
В чем разница между Mix и Multiply?
Микс - это средневзвешенное значение, которое попадает между двумя цветами, поэтому смешивание красного и синего дает фиолетовый. Multiply объединяет их так, как это делают перекрывающиеся чернила или светофильтры, умножая значения канала, поэтому он всегда создает цвет, такой же темный, как или темный, чем оба входа. Умножение красного и синего дает черный, потому что каждый цвет не имеет канала, который есть у другого. Multiply - это режим смешивания при редактировании изображения, а не простое среднее значение.
Почему смешение двух ярких цветов иногда дает мутный результат?
Потому что усреднение каналов RGB перемещает результат в сторону серого всякий раз, когда два цвета сидят далеко друг от друга на цветовом круге. красный и зеленый в среднем до тусклого оливково-коричневого, а не ярко-желтого, так как цвета экрана смешиваются как светлые, в то время как яркий желтый, который вы можете ожидать, приходит от смешивания пигментов. для более живого смешивания, смешивать цвета, которые ближе по оттенку, или попробовать режим экрана, который сохраняет результаты ярче.
Могу ли я смешивать цвета в HSL вместо RGB?
Этот микшер интерполируется в RGB, что CSS градиенты и редакторы изображений делают по умолчанию, и он сообщает результат в HSL также. Микширование в RGB предсказуемо и соответствует тому, как двухстопный CSS градиент рендеринг Интерполирующий оттенок в HSL может пройти долгий путь вокруг цветового колеса и производить неожиданные промежуточные оттенки, поэтому интерполяция RGB является более безопасным по умолчанию для смеси общего назначения.
Что меняет ползунок соотношения?
Соотношение устанавливает, насколько сильно второй цвет, или смешанный результат, применяется над первым. При 0 процентах вы получаете первый цвет без изменений, при 100 процентах вы получаете полный второй цвет или полную смесь для выбранного режима, а при 50 процентах вы получаете равномерное разделение. Для режимов смешивания он ведет себя как непрозрачность слоя в редакторе изображений, выцветая смешанный цвет над основой.
Как мне получить цвет на полпути между двумя цветами?
Установите режим Микс и соотношение на 50 процентов, и результат является точной средней точкой. вы также можете прочитать его с полосы градиента, где средняя точка обзора является наполовину цвет. для более точного управления добавьте больше шагов к градиенту и скопируйте любой промежуточный образец соответствует положению, которое вам нужно между двумя цветами.
Для чего используются такие режимы смешивания, как экран и наложение?
Это режимы смешивания слоев от редакторов изображений, определенные для веб в спецификации W3C Композиция и смешивание. экран светлеет и используется для свечения и бликов, Множественное затемнение и используется для теней и оттенков, а наложение увеличивает контраст, комбинируя два. предварительный просмотр их в микшере позволяет предсказать, как два цветных слоя будут сочетаться, прежде чем применить его в CSS или инструменте проектирования.
Какие цветовые форматы принимает микшер?
Миксер принимает шестнадцатеричные коды (три, шесть или восемь цифр), значения rgb () и rgba (), значения hsl () и hsla (), а также общие названия цветов CSS, такие как коралл или ребеккапурпур. Каждый вход имеет собственный цветовой обзор, который вы можете нажать, чтобы выбрать визуально, и каждый результат отображается в HEX, RGB и HSL, чтобы вы могли скопировать любой формат, который необходим вашей таблице стилей.
Цветной миксер бесплатный и приватный?
Да. цветовой микшер совершенно свободен без регистрации, водяных знаков и ограничений использования, и каждый расчет происходит в вашем браузере. цвета, которые вы вводите, никогда не загружаются, поэтому ничто из того, что вы смешиваете, не покидает ваше устройство, и поскольку математика выполняется локально, инструмент продолжает работать, если вы потеряете соединение после загрузки страницы.
