color-mix()

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La notation fonctionnelle color-mix() prend deux couleurs (deux valeurs de type <color>) et renvoie le résultat de leur mélange selon des proportions données, dans un espace de couleur donné.

Syntaxe

css

color-mix(in lch, peru 40%, lightgoldenrod)
color-mix(in srgb, #34c9eb 20%, white)

Valeurs

color-mix( in <espace-couleur> , [ <couleur> && <proportion>? ]#{2})

<espace-couleur> est une valeur parmi srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklch. Il n'y a pas de valeur par défaut.

<couleur> est n'importe quelle couleur valide (voir <color>).

<proportion> est un pourcentage (type <percentage>) indiquant la proportion de la couleur dans le mélange.

Exemples

HTML

html

<ul>
  <li>10% #34c9eb</li>
  <li>40% #34c9eb</li>
  <li>70% #34c9eb</li>
</ul>

CSS

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid #34c9eb;
  padding: 10px;
}

li {
  padding: 10px;
}

css

li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 10%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 40%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 70%, white);
}

Résultat

Dans un navigateur qui prend en charge cette fonctionnalité, les trois carrés sont de plus en plus bleus, car la proportion de #34c9eb dans le mélange augmente.

Spécifications

Specification
CSS Color Module Level 5 # color-mix

Compatibilité des navigateurs

BCD tables only load in the browser