# Микшер цветов

Смешивайте два цвета в выбранном цветовом пространстве в любой пропорции, как это делает 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%. Чтобы получить полную шкалу от исходного цвета до белого, черного или серого, воспользуйтесь генераторами светлых оттенков, теней и тонов цвета.

Ваша реклама здесь?

[Напишите нам по электронной почте](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набор плагинов для работы агентов с WordPress.](https://sleekwp.com/?ref=oneclickpro)