Qu'est-ce que Generateur CSS color-mix() ?
Generateur CSS color-mix() est un outil dans le navigateur pour cette tâche : Générez des appels color-mix() CSS pour les états hover, bordures, fonds et texte discret. La sortie reste lisible afin de la vérifier avant de l'utiliser sur un site publié.
Quick answer
Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.
Limitations
- color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
- The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
- color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.
Comment utiliser cet outil
- Ouvrez l'outil et saisissez les valeurs utiles.
- Vérifiez la sortie dans le panneau de résultat.
- Copiez seulement la partie adaptéeà votre page.
- Testez la modification avant publication.
A quoi il sert
- Gagner du temps sur les tâches de publication récurrentes.
- Préparer markup, CSS ou checklist avant lancement.
- Eviter les petites erreurs faciles a manquer sur un site statique.