Цвет Смеситель

Смеситель цветов смешивает два цвета в новый и показывает вам результат в HEX, RGB, и HSL. вы даете ему первый цвет и второй цвет в любом общем синтаксисе (шестигранный код, как #4466EE, значение rgb () или hsl (), или имя CSS, как коралл), выбираете, сколько второго цвета сложить, и он вычисляет смешанный цвет мгновенно. он также строит градиент промежуточных шагов между двумя цветами, так что вы можете видеть весь переход, а не одну среднюю точку.

Простая смесь является средневзвешенным: при соотношении 50 процентов каждый цвет вносит одинаковый вклад, и инструмент интерполирует каждый красный, зеленый и синий канал линейно между двумя входами. сдвиньте соотношение к 0, и вы сохраните первый цвет; сдвиньте его к 100, и вы приземлитесь на второй. Это та же самая математика, которую CSS использует для градиента с двумя остановками, поэтому средняя точка градиента от красного к синему - это фиолетовый цвет, о котором сообщает этот инструмент.

Помимо простой смеси, смеситель предлагает разделимые режимы смешивания, определенные в спецификации W3C Композиция и смешивание: умножить, экран, наложение, затемнить, осветлить, разница, и средний. это те же операции, которые редакторы изображений, как Photoshop и GIMP, применяются между слоями. умножить всегда темнеет (красный раз синий - черный), экран всегда светлеет (красный на синем - пурпурный), и разница дает вам расстояние между двумя цветами по каналам. соотношение затем действует как непрозрачность слоя, контролируя, насколько сильно смешанный результат наносится на первый цвет.

Все работает на стороне клиента в вашем браузере. цвета, которые вы вводите, никогда не покидают вкладку, и поскольку математика цвета является простой арифметикой, инструмент работает в автономном режиме после загрузки страницы. Дизайнеры обращаются к микшеру, чтобы найти цвет на полпути между основным и нейтральным брендом, чтобы построить оттенок и шкалы акцента или просмотреть, как два слоя будут объединяться перед записью в файле дизайна. Разработчики используют его для создания остановок градиента, вычисления состояний наведения и перевода смешанного результата прямо в значение HEX или HSL, которое они могут вставить в CSS.