Funkcja color-mix() w CSS

Definicja i użycie

CSS color-mix() Funkcja do mieszania dwóch wartości kolorów w określonym obszarze kolorów w proporcji określonej.

Przykład

Przykład 1

Mieszaj dwa wartości kolorów w przestrzeni kolorów hsl w określonych proporcjach:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Spróbuj sam

Przykład 2

Mieszaj dwa wartości kolorów w przestrzeni kolorów oklab w różnych proporcjach:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Spróbuj sam

Gramatyka CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Wartość Opis
color-interpolation-method

Wymagane. Definiuje metodę interpolacji kolorów do użycia.

Składa się z klucza in i nazwy przestrzeni kolorów.

Dostępne są dwa rodzaje:

Przestrzeń kolorów prostokątna:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Kolorowa przestrzeń współrzędnych:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Wymagane. Kolory do mieszania oraz opcjonalne wartości procentowe (0% do 100%), które określają proporcje koloru.

Domyślna wartość procentowa wynosi 50%.
color2 %

Wymagane. Kolory do mieszania oraz opcjonalne wartości procentowe (0% do 100%), które określają proporcje koloru.

Domyślna wartość procentowa wynosi 50%.

Szczegóły techniczne

Wersja: CSS Color Module Level 5

Wsparcie przeglądarki

Tabela zawiera liczby reprezentujące wersje przeglądarek, które w pełni wspierają tę funkcję.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Strony związane

Odniesienie:Kolory CSS