color-mix()

Definition

Fonction CSS qui mélange deux couleurs dans un espace colorimétrique donné. Permet de créer des variantes (hover, disabled) à partir d'une couleur de base sans calcul manuel.

Analogie

Comme mélanger deux pots de peinture dans les proportions voulues pour obtenir la teinte parfaite.

Exemple de code

.btn {
  --bg: #3b82f6;
  background: var(--bg);
}
.btn:hover {
  background: color-mix(in oklch, var(--bg), black 20%);
}
.btn:disabled {
  background: color-mix(in oklch, var(--bg), gray 50%);
}

Cas d'usage

Générer des variantes de couleur (hover, active, disabled) dynamiquement depuis un token unique.

Termes lies