CSS color-mix() -funktio

Määrittely ja käyttö

CSS:n color-mix() Funktio sekoittaa kaksi väriarvoa annetussa väriavaruudessa määritetyn suhteen.

Esimerkki

Esimerkki 1

Yhdistetään kaksi väriarvoa määritetyillä suhteilla hsl-väriavaruudessa:

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

Kokeile itse

Esimerkki 2

Mistä eri suhteista yhdistetään kaksi väriarvoa oklab-väriavaruudessa:

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

Kokeile itse

CSS-grammatiikka

color-mix(color-interpolation-method, color1 %, color2 %)
Arvo Kuvaus
color-interpolation-method

Välttämätön. Määritä käytettävä väri interpolointimenetelmä.

Se koostuu avainsanasta in ja väriavaruuden nimestä.

Käytettävissä seuraavat kaksi tyyppiä:

Suorakulmainen väriavaruus:

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

Polaarinen väriavaruus:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Välttämätön. Yhdistettävät väriarvot, sekä valinnainen prosenttialue (0% - 100%), määrittävät väriprosentteja.

Oletusprosenttialue on 50%.
color2 %

Välttämätön. Yhdistettävät väriarvot, sekä valinnainen prosenttialue (0% - 100%), määrittävät väriprosentteja.

Oletusprosenttialue on 50%.

Tekninen tarkistus

Versio: CSS Color Module Level 5

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka tukee tätä funktiota täysin.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Tiedotusvihko

Viittaus:CSS värit