Comment colorer un SVG noir via CSS sans éditer le fichier ?
Générateur de chaîne de filtres CSS : tape une couleur cible, l'outil trouve une séquence de filtres CSS (invert + sepia + saturate + hue-rotate + brightness + contrast) qui transforme un SVG / IMG noir en cette couleur.
L'astuce classique de Sosuke (CodePen 2018). Algorithme : simulated annealing, 5 restarts aléatoires × 800 itérations.
Sortie : une règle « filter: » prête à déposer dans le CSS. Parfait quand tu as une icône SVG noire et que tu en as besoin dans une autre couleur sans éditer le fichier.
Comment l'utiliser
- Tape la couleur cible : HEX, picker natif, ou pipette d'écran (Chrome/Edge).
- Clique sur « Calculer » : le générateur itère sur des combinaisons de paramètres (environ 5-10 s) en cherchant la meilleure correspondance. ΔE : <1 = parfait, 1-3 = bon, >3 = perceptible.
- La démo en bas montre 3 tuiles : SVG noir source, couleur cible, SVG noir avec filtre appliqué : devraient paraître identiques.
- Copie la règle CSS `filter: ...` et colle-la dans ta feuille de style. Applique à `<img>`, `<svg>`, `<i>` (icônes).
- Les curseurs manuels en dessous te laissent affiner : si « trop lumineux » ajuste brightness, si « trop rouge » ajuste hue-rotate.
Quand c'est utile
Là où le générateur de filtres CSS paie, scénarios typiques :
- Icônes SVG aux couleurs de marque : tu as une bibliothèque d'icônes en noir (Heroicons, Phosphor, Lucide) et tu les veux dans ta couleur de marque sans éditer le SVG.
- Theme switcher : dark/light mode : un SVG noir, deux règles de filtre.
- Coloration style Material Icons : les Google Material Icons originales sont en noir, avec un filtre tu obtiens n'importe quelle couleur.
- Effets hover : filtre sur :hover change la couleur d'icône sans SVG inline ni hacks ::before.
- Web components : éléments custom avec icônes en slot : les utilisateurs passent n'importe quelle background-color.
- Pédagogie : réalise que les filtres CSS sont des transformations matricielles : hue-rotate + saturate + brightness + contrast couvre la plupart des edge cases.
Questions et réponses
ΔE 2000 est une mesure de distance perceptuelle entre deux couleurs dans l'espace Lab. ΔE < 1 = différence invisible même à un œil entraîné. ΔE 1-3 = légèrement perceptible côte à côte. ΔE > 5 = clairement différent. Pour une chaîne de filtres CSS : <1 idéal, <3 qualité production.