# Мікшер кольорів

Змішуйте два кольори у вибраному просторі кольорів і в будь-якому співвідношенні — так само, як це робить 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(), мікшер виконує інтерполяцію з попередньо помноженим альфа-каналом, тож прозорий колір не зміщує суміш у бік чорного. Сам альфа-канал інтерполюється в тому самому співвідношенні й відображається в 8-значному hex-коді та після скісної риски у функціях CSS.

### Які формати вводу можна використовувати?

Hex-коди зі знаком # або без нього, назви кольорів 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, що приймає колір. Вираз задає вхідні кольори за hex-кодом або через 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)