Змішування кольорів
Змішайте два кольори в будь-якій пропорції в OKLab, OKLCH або sRGB. Скопіюйте результат або готовий вираз color-mix().
- HEX
- RGB
- OKLCH
CSS із запасним варіантом
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Кроки від першого кольору до другого
Та сама суміш у всіх просторах
У sRGB середина сірішає і темнішає. OKLab тримає яскравість рівною. OKLCH і HSL зберігають насиченість, але проходять по колу тонів.
Запитання і відповіді
Що таке color-mix() у CSS?
color-mix() це функція CSS, яка змішує два кольори у вибраному колірному просторі, наприклад color-mix(in oklab, #ff5733, #3b82f6 30%). Вона працює в усіх актуальних браузерах. Для старіших залиште перед нею звичайний колір як запасний варіант, як у сніпеті вище.
У якому просторі краще змішувати?
OKLab найнадійніший варіант за замовчуванням: середина зберігає яскравість і не стає брудною. OKLCH тримає кольори насиченими, але йде найкоротшим шляхом по колу тонів, тому червоний і синій проходять через фіолетовий і рожевий. sRGB це змішування старих інструментів, і середина часто виходить сірою й темною.
Чому змішування світла відрізняється від змішування фарб?
Екран додає світло, тому інструмент усереднює значення світла: синій і жовтий дають сірий або блідий колір, а не зелений. Фарби віднімають світло, тому та сама суміш на папері виглядає зеленою. Щоб передбачити змішування фарб, потрібна модель фарб, а не екранний колірний простір.