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% синього. Такий підхід дозволяє створювати багато різних відтінків, використовуючи лише два основних кольори, та контролювати їх змішування на різних етапах дизайну.

автор: Bond

Порада: Експериментуйте з різними методами інтерполяції кольорів та відсотками, щоб досягти бажаного ефекту змішування кольорів.
автор: Bond

Синтаксис

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

Функція color-mix може отримувати 3 значень:

<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.

автор: Bond

<color1>, <color2>

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

автор: Bond

<p1>, <p2>