Qu'est-ce que Generateur CSS color-mix() ?
La fonction CSS color-mix() melange deux couleurs dans un espace colorimetrique specifie. Elle cree des variations de couleur directement en CSS sans preprocesseur comme Sass. L'utilisation d'oklab produit des résultats plus uniformes sur le plan perceptuel que srgb. Les cas d'usage courants incluent les états de survol, les bordures, les arriere-plans subtils et le texte atténué -- tous derives d'une seule couleur de base.
Réponse rapide
Utilisez color-mix() pour melanger deux couleurs dans un espace colorimetrique specifie, comme oklab ou srgb. C'est utile pour creer des teintes, des ombres et des variantes de survol a partir d'une seule couleur de base sans preprocesseur.
Last updated: 2026-05-25
Limites
- Color-mix() necessite Chrome 111+, Edge 111+, Safari 16.2+ et Firefox 113+. Les navigateurs plus anciens ne le prennent pas en charge et ignoreront la declaration.
- L'espace colorimetrique oklab produit des résultats plus uniformes sur le plan perceptuel que srgb. Le melange en srgb peut creer des intermediaires boueux.
- Color-mix() peut ne pas referencer les proprietes personnalisees CSS qui contiennent une sortie color-mix() dans certaines versions de navigateur plus anciennes en raison de la detection de cycles de proprietes.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Saisissez une couleur de base sous forme de valeur hexadecimale.
- Examinez les variantes color-mix() calculees utilisant le blanc, le noir ou la transparence.
- Copiez chaque declaration color-mix() dans votre CSS.
- Utilisez les proprietes personnalisees generees pour un thematisme coherent des couleurs.
A quoi il sert
- Creer des etats de survol en melangeant une couleur avec du blanc ou du noir.
- Generer des teintes d'arriere-plan subtiles a partir d'une couleur de marque.
- Construire des couleurs de bordure legerement plus foncees que l'arriere-plan.