Para qué sirve
Los iconos SVG suelen tener un color negro fijo. Para recolorearlos mediante CSS sin editar el archivo SVG, se usa la propiedad filter con las funciones invert, sepia, saturate, hue-rotate y brightness.
Cómo funciona el algoritmo
La herramienta usa un método de búsqueda binaria para encontrar la combinación óptima de filtros CSS. El algoritmo prueba miles de variantes y selecciona aquella donde el color resultante es más cercano al objetivo.
Limitaciones del método
El filtro CSS solo funciona para elementos con un color negro original (#000000). Si el icono es de otro color — primero añade invert(1) o ponlo negro mediante fill en CSS. La precisión es normalmente ±5 unidades RGB.
Preguntas frecuentes
¿Para qué elementos funciona el CSS filter?
El filtro CSS para recolorear funciona con cualquier elemento HTML — img, svg, div. Es especialmente útil para recolorear iconos SVG cargados mediante la etiqueta img, cuando no se puede cambiar el fill directamente.
¿Por qué el icono debe ser negro originalmente?
El algoritmo de filtros trabaja desde el color negro como punto cero. Si el icono es blanco — añade invert(1) al inicio del filtro. Si es de otro color — es mejor cambiar el fill en el propio SVG.
¿Qué tan preciso es el resultado?
La precisión es normalmente ±3-8 unidades por canal RGB. Para la mayoría de tareas esto es suficiente — la diferencia es prácticamente invisible en pantalla. La tarjeta de precisión muestra cuán cercano es el resultado.
¿Es gratuita esta herramienta?
Sí, completamente gratuito y sin límites. Sin registro, todo funciona en tu navegador.