CSS function color-mix()

Опис

Функція color-mix() в CSS відкриває можливість змішування двох кольорів в заданому просторі кольорів. Цей метод забезпечує динамічне поєднання кольорів, надаючи дизайнерам та розробникам гнучкість у створенні унікальних та гармонійних кольорових схем.

Основна суть функції color-mix() полягає в тому, що вона приймає п'ять параметрів: method, color1, p1, color2 і p2. Специфікація цих параметрів наступна:

• method: визначає простір кольорів, в якому відбувається інтерполяція.
• color1 і color2: вказують кольори, які треба змішати.
• p1 і p2: вказують відсоток кожного кольору для змішування, при чому їх сума нормалізується до 100%. Якщо відсотки відсутні, значення за замовчуванням - 50% для кожного кольору.

Приклад використання:

div {
  background-color: color-mix(in srgb, red, blue, 30%);
}

У цьому прикладі color-mix() змішує червоний колір із синім у просторі sRGB, використовуючи 30% синього кольору. Результатом є унікальний відтінок, що містить обидва кольори, з домінуючим червоним та 30% синього. Такий підхід дозволяє створювати багато різних відтінків, використовуючи лише два основних кольори, та контролювати їх змішування на різних етапах дизайну.

Синтаксис

color-mix(<method>, <color1> [ <p1> ] [ <color2> [ <p2> ] ]);

<method>

Вказує простір кольорів та метод інтерполяції. Приймає значення: in srgb, in srgb-linear, in lab, in oklab, in xyz, in xyz-d50, in xyz-d65, in hsl, in hwb, in lch, in oklch.

<color1>, <color2>

Параметри, що визначають кольори, які треба змішати. Приймають значення відповідно до формату кольору, наприклад, #34c9eb, red, rgb(255, 0, 0), тощо.

<p1>, <p2>

Відсоток кожного кольору для змішування. Приймають значення від 0% до 100%.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2