CSS color-mix() functie

Definitie en gebruik

CSS color-mix() De functie mixt twee kleurwaarden in de gegeven kleurspace volgens de gespecificeerde verhouding.

Voorbeeld

Voorbeeld 1

Meng verschillende verhoudingen van twee kleurwaarden in de hsl-kleurruimte:

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

Probeer het zelf

Voorbeeld 2

Meng verschillende verhoudingen van twee kleurwaarden in de oklab-kleurruimte:

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

Probeer het zelf

CSS syntaxis

color-mix(color-interpolation-method, color1 %, color2 %)
Waarde Beschrijving
color-interpolation-method

Verplicht. Definieer het kleurinterpolatiemethode dat moet worden gebruikt.

Het bestaat uit het woord in gevolgd door de naam van de kleurruimte.

Beschikbaar in de volgende twee types:

Vierkante kleurruimte:

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

Polair kleurruimte:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Verplicht. De te mengen kleurwaarden, alsmede optionele procentwaarden (0% tot 100%), worden gebruikt om de verhouding van de kleur te specificeren.

Standaardpercentage is 50%.
color2 %

Verplicht. De te mengen kleurwaarden, alsmede optionele procentwaarden (0% tot 100%), worden gebruikt om de verhouding van de kleur te specificeren.

Standaardpercentage is 50%.

Technische details

Versie: CSS Color Module Level 5

Browserondersteuning

Tafelnummers geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Gerelateerde pagina's

Referentie:CSS Colors