CSS color-mix() funktion

Definition och användning

CSS color-mix() Funktion används för att blanda två färgvärden i en given färgrymd med specifik proportion.

Exempel

Exempel 1

Blanda två färgvärden i specifika proportioner i hsl-färgutrymmet:

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

Prova själv

Exempel 2

Blanda två färgvärden i olika proportioner i oklab-färgutrymmet:

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

Prova själv

CSS-syntaks

color-mix(color-interpolation-method, color1 %, color2 %)
Värde Beskrivning
color-interpolation-method

Obligatoriskt. Definiera den färginterpolationsmetod som ska användas.

Det består av nyckelordet in följt av färgutrymmets namn.

Tillgängliga i följande två typer:

Rektangulärt färgutrymme:

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

Polär färgutrymme:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Obligatoriskt. De färgvärden som ska blandas, samt valfria procentvärden (0% till 100%), används för att specificera färgens proportion.

Standardprocentvärdet är 50%.
color2 %

Obligatoriskt. De färgvärden som ska blandas, samt valfria procentvärden (0% till 100%), används för att specificera färgens proportion.

Standardprocentvärdet är 50%.

Tekniska detaljer

Version: CSS Color Module Level 5

Webbläsarstöd

Tabellens siffror representerar den första webbläsarversion som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Relaterade sidor

Referens:CSS färger