À quoi ça sert
Les icônes SVG ont souvent une couleur noire fixe. Pour les recoloriser via CSS sans modifier le fichier SVG, on utilise la propriété filter avec les fonctions invert, sepia, saturate, hue-rotate et brightness.
Comment fonctionne l'algorithme
L'outil utilise une méthode d'optimisation numérique (SPSA) pour trouver la combinaison optimale de filtres CSS. L'algorithme teste des milliers de variantes et sélectionne celle où la couleur résultante est la plus proche de la cible.
Limitations de la méthode
Le filtre CSS ne fonctionne que pour les éléments avec une couleur noire originale (#000000). Si l'icône est d'une autre couleur — ajoutez d'abord invert(1) ou mettez-la en noir via fill en CSS. La précision est généralement ±5 unités RGB.
Questions fréquentes
Pour quels éléments fonctionne le filtre CSS ?
Le filtre CSS pour recoloriser fonctionne avec tous les éléments HTML — img, svg, div. Particulièrement utile pour recoloriser des icônes SVG chargées via la balise img, quand on ne peut pas modifier le fill directement.
Pourquoi l'icône doit-elle être noire à l'origine ?
L'algorithme de filtres travaille depuis le noir comme point zéro. Si l'icône est blanche — ajoutez invert(1) au début du filtre. Si elle est d'une autre couleur — il vaut mieux modifier le fill dans le SVG lui-même.
Quelle est la précision du résultat ?
La précision est généralement ±3-8 unités par canal RGB. Pour la plupart des tâches c'est suffisant — la différence est pratiquement invisible à l'écran. La carte de précision montre la proximité du résultat.
Cet outil est-il gratuit ?
Oui, complètement gratuit et sans limites. Sans inscription, tout fonctionne dans votre navigateur.