Микшер цветов
Смешивайте два цвета в выбранном цветовом пространстве в любой пропорции, как это делает CSS color-mix(). Введите два цвета в любом формате CSS, задайте долю второго цвета от 0 до 100 процентов и выберите OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB или XYZ. Результат будет представлен в форматах HEX, RGB, HSL и OKLCH, а также в виде готового выражения color-mix() для таблицы стилей.
Часто задаваемые вопросы
Как работает доля?
Доля — это процент цвета 2 в смеси. При 0% результатом будет цвет 1, при 100% — цвет 2, а при 50% получится середина между ними в выбранном пространстве. Это соответствует color-mix(in space, color1 (100 - p)%, color2 p%).
Какое цветовое пространство выбрать?
По умолчанию используется OKLab: это перцептивно однородное пространство, в котором промежуточные цвета не выглядят грязными или темными. В sRGB смешиваются каналы с гамма-кодированием, как в старых браузерах и Sass, поэтому смеси насыщенных цветов получаются темнее и тусклее. Lab — более старое перцептивное пространство CIE; оно ведет себя похоже на OKLab, но синие оттенки распределены менее равномерно.
Как работают пространства на основе тона?
В OKLCH, LCH, HSL и HWB тон интерполируется по кратчайшей дуге цветового круга — это значение по умолчанию CSS. Поэтому промежуточный цвет сохраняет насыщенность и может быть ярче обоих исходных. Если один из цветов — нейтральный серый без тона, используется тон другого цвета.
Для чего нужны linear sRGB и XYZ?
В обоих пространствах линейно смешиваются интенсивности света, как при наложении лучей, поэтому промежуточный цвет выглядит ярче, чем в sRGB. Они пригодятся для физических эффектов и для точного воспроизведения вида размытых или смешанных пикселей.
Как обрабатывается прозрачность?
Как и в CSS color-mix(), микшер интерполирует цвета с предварительно умноженной альфой, поэтому прозрачный цвет не смещает смесь в сторону черного. Само значение альфа-канала также интерполируется в той же пропорции и отображается в восьмизначном шестнадцатеричном коде и после косой черты в функциях CSS.
Какие форматы ввода можно использовать?
Шестнадцатеричные коды с # или без него, названия цветов CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), пространства oklch(), color(), например display-p3, а также cmyk() — в любом сочетании. Длина каждого цвета — до 100 символов.
Что происходит, если результат выходит за пределы sRGB?
При смешивании в Display P3, OKLCH или LCH могут получиться цвета, которые невозможно отобразить в sRGB. Тогда значения HEX, RGB и HSL преобразуются в sRGB по алгоритму CSS Color 4, и результат сопровождается примечанием. Значение OKLCH сохраняет цвет без преобразования.
Как использовать выражение color-mix()?
Вставьте его в любое свойство CSS, которое принимает цвет. Входные цвета задаются шестнадцатеричными кодами, а для широкого цветового охвата — через oklch(), поэтому браузер вычислит ту же смесь. color-mix() работает во всех современных версиях Chrome, Edge, Firefox и Safari.
Насколько точен результат?
Доля задается целым процентом, а смесь вычисляется с полной точностью с помощью библиотеки culori. Каналы RGB округляются до целых чисел, значения в процентах HSL — до двух знаков после запятой, а светлота и насыщенность OKLCH — до четырех, поэтому последнее значение может отличаться на один шаг в разных браузерах.
Как получить несколько промежуточных цветов между двумя?
Запустите микшер с разными долями, например 25%, 50% и 75%. Чтобы получить полную шкалу от исходного цвета до белого, черного или серого, воспользуйтесь генераторами светлых оттенков, теней и тонов цвета.