Comprendre la fonction CSS color-mix()
Qu'est-ce que color-mix() ?
La fonction color-mix() permet de combiner deux couleurs en CSS pour en créer une nouvelle. Cette fonctionnalité rend possible des mélanges dynamiques et précis directement dans les feuilles de style, sans utiliser de préprocesseur.
Pourquoi utiliser color-mix() ?
Elle simplifie la création de palettes cohérentes, les effets de survol personnalisés, ou encore les thèmes dynamiques. Elle permet aussi de gagner en maintenabilité et en lisibilité du code.
Structure de la fonction
La syntaxe générale de color-mix() est :
- Un espace colorimétrique (ex. :
srgb,hsl,lab) - Une première couleur, avec un pourcentage optionnel
- Une seconde couleur, également avec un pourcentage optionnel
Si les pourcentages ne sont pas définis, le mélange est équitable par défaut (50%/50%). Les pourcentages doivent idéalement totaliser 100%.
Les espaces colorimétriques
Le choix de l'espace colorimétrique a un impact sur le rendu final. Voici les plus courants :
- srgb : standard pour le web, linéaire mais parfois imprécis dans certaines transitions
- hsl : utile pour les transitions douces sur la teinte, la saturation et la lumière
- lab : perceptuellement uniforme, plus fidèle à la perception humaine
Prise en compte de la transparence
color-mix() gère également la transparence. Si une ou les deux couleurs contiennent un canal alpha, il sera aussi combiné en fonction des proportions définies.
Compatibilité navigateur
Étant une fonctionnalité récente du CSS, son utilisation nécessite des navigateurs modernes. Il est recommandé de tester le rendu et de prévoir des solutions alternatives pour une compatibilité maximale.
Code CSS d'exemple
:root {
--main-color: #347ab7;
--white: #ffffff;
--black: #000000;
}
/* Exemple d'utilisation */
.element-transparent {
/* Teinte principale atténuée (25% de transparence) */
color: color-mix(in srgb, transparent, var(--main-color) 75%);
}
.element-lightened {
/* Teinte principale mélangée à 10% de blanc = plus claire */
color: color-mix(in srgb, var(--white) 10%, var(--main-color));
}
.element-darkened {
/* Teinte principale mélangée à 10% de noir = plus sombre */
color: color-mix(in srgb, var(--black) 10%, var(--main-color));
}
Explication
color-mix(in srgb, transparent, var(--main-color) 75%) :
Cela signifie 75% de --main-color mélangé avec 25% de transparence. L’effet visuel sera une couleur moins opaque, utile pour des overlays ou effets de flou.
color-mix(in srgb, var(--white) 10%, var(--main-color)) :
Tu ajoutes 10% de blanc à la couleur principale, ce qui l’éclaircit subtilement.
color-mix(in srgb, var(--black) 10%, var(--main-color)) :
Tu ajoutes 10% de noir, ce qui donne une teinte plus sombre, très pratique pour des hover, bordures ou thèmes sombres.
Exemple d'un fichier complet pour color-mix()
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test color-mix()</title>
<style>
:root {
--main-color: #347ab7;
--white: #ffffff;
--black: #000000;
}
body {
font-family: sans-serif;
background: #f5f5f5;
padding: 2rem;
}
h1 {
color: var(--main-color);
}
.box {
padding: 1rem;
margin-bottom: 1rem;
border-radius: 8px;
font-weight: bold;
}
.element-transparent {
background-color: color-mix(in srgb, transparent, var(--main-color) 75%);
border: 1px solid var(--main-color);
}
.element-lightened {
background-color: color-mix(in srgb, var(--white) 10%, var(--main-color));
border: 1px solid var(--main-color);
}
.element-darkened {
background-color: color-mix(in srgb, var(--black) 10%, var(--main-color));
border: 1px solid var(--main-color);
}
</style>
</head>
<body>
<h1>Démo de la fonction <code>color-mix()</code> en CSS</h1>
<div class="box element-transparent">
Couleur principale + transparence (75%)
</div>
<div class="box element-lightened">
Couleur principale + 10% de blanc
</div>
<div class="box element-darkened">
Couleur principale + 10% de noir
</div>
</body>
</html>
Voir un exemple sur codepen de :