Мікшер кольорів
Змішуйте два кольори у вибраному просторі кольорів і в будь-якому співвідношенні — так само, як це робить 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%. Щоб отримати повну шкалу до білого, чорного або сірого, скористайтеся генераторами висвітлених, затемнених і тонованих кольорів — вони покажуть усі кроки в одній таблиці.