¿Cómo coloreo un SVG negro vía CSS sin editar el archivo?
Generador de cadena de filtros CSS: escribe un color objetivo y la herramienta encuentra una secuencia de filtros CSS (invert + sepia + saturate + hue-rotate + brightness + contrast) que convierte un SVG / IMG negro en ese color.
El clásico truco de Sosuke (CodePen 2018). Algoritmo: simulated annealing, 5 reinicios aleatorios × 800 iteraciones.
Salida: una regla "filter:" lista para soltar en CSS. Perfecto cuando tienes un icono SVG negro y lo necesitas en otro color sin editar el archivo.
Cómo usarlo
- Escribe el color objetivo: HEX, picker nativo o cuentagotas de pantalla (Chrome/Edge).
- Pulsa "Calcular": el generador itera combinaciones de parámetros (~5-10 s) buscando el mejor match. ΔE: <1 = perfecto, 1-3 = bueno, >3 = notable.
- La demo de abajo muestra 3 tiles: SVG negro de origen, color objetivo, SVG negro con el filtro aplicado: deberían verse idénticos.
- Copia la regla `filter: ...` de CSS y pégala en tu stylesheet. Aplícala a `<img>`, `<svg>`, `<i>` (iconos).
- Los sliders manuales de abajo permiten afinar: si está "demasiado brillante" toca brightness; si está "demasiado rojo" toca hue-rotate.
Cuándo es útil
Dónde se nota el generador de filtros CSS - escenarios típicos:
- Iconos SVG de marca: tienes una biblioteca de iconos en negro (Heroicons, Phosphor, Lucide) y los quieres en tu color de marca sin editar el SVG.
- Cambio de tema: dark/light mode: un único SVG negro, dos reglas de filtro.
- Coloreado tipo Material Icons: los Google Material Icons originales son negros; con un filtro obtienes cualquier color.
- Efectos hover: un filtro en :hover cambia el color del icono sin SVG inline ni hacks de ::before.
- Web components: elementos personalizados con iconos en slot: los usuarios pasan cualquier color de fondo.
- Educación: date cuenta de que los filtros CSS son transformaciones de matriz: hue-rotate + saturate + brightness + contrast cubren la mayoría de edge cases.
Preguntas y respuestas
ΔE 2000 es una medida de distancia perceptual entre dos colores en el espacio Lab. ΔE < 1 = diferencia invisible incluso para un ojo entrenado. ΔE 1-3 = ligeramente perceptible al ponerlos al lado. ΔE > 5 = claramente distintos. Para una cadena de filtros CSS: <1 ideal, <3 apto para producción.