CSS color-mix() funktion

Definition og brug

CSS' color-mix() Funktion bruges til at blande to farveværdier i en given farvespace i forhold til specificeret proportion.

Eksempel

Eksempel 1

Bland to farveværdier i forskellige proportioner i hsl-farverummet:

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

Prøv det selv

Eksempel 2

Bland to farveværdier i forskellige proportioner i oklab-farverummet:

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);
}

Prøv det selv

CSS-syntaks

color-mix(color-interpolation-method, color1 %, color2 %)
Værdi Beskrivelse
color-interpolation-method

Obligatorisk. Definer den ønskede metode til farveinterpolation.

Det består af nøgleordet in efterfulgt af navnet på farverummet.

Tilgængelige i følgende to typer:

Rektangulært farverum:

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

Polær farverum:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Obligatorisk. At blande farveværdier, samt valgfri procentværdi (0% til 100%), bruges til at specificere farveprocenten.

Standardprocentværdien er 50%.
color2 %

Obligatorisk. At blande farveværdier, samt valgfri procentværdi (0% til 100%), bruges til at specificere farveprocenten.

Standardprocentværdien er 50%.

Tekniske detaljer

Version: CSS Color Module Level 5

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Relaterede sider

Referencer:CSS farver