Generador de filtros de color CSS
Introduce un color HEX objetivo y obtén una cadena de filtros CSS que convierte un icono, SVG o PNG negro en ese color. Cada resultado muestra el color que realmente produce y una puntuación de precisión, para que sepas cuánto se acerca.
Última actualización:
Código HEX de 3 o 6 dígitos, p. ej. #E91E63
Hace que funcione en iconos que no son negro puro
Cámbiala para obtener otra cadena de filtros (igual de válida)
Cómo usar Generador de filtros de color CSS
- Introduce tu color objetivo como código HEX.
- Mantén activado el prefijo salvo que tu icono sea con seguridad negro puro.
- Haz clic en Generar y revisa la puntuación de precisión y la vista previa del icono.
- Prueba un esfuerzo mayor u otra variación si la puntuación es inferior al 95%.
- Copia el CSS y aplícalo a tu elemento img, SVG o icono.
Cómo funciona la cadena de filtros CSS
Partiendo del negro (0, 0, 0), cada función cambia el color de forma predecible:
| Función | Qué hace con el color | Rango usado |
|---|---|---|
invert(x%) | Lleva el negro hacia el blanco: cada canal pasa a valer x (como fracción) | 0-100% |
sepia(x%) | Mezcla hacia un tono marrón cálido y le da algo de color al gris | 0-100% |
saturate(x%) | Multiplica la intensidad del color; los valores altos llevan hacia un tono vivo | 0-7500% |
hue-rotate(xdeg) | Gira el tono alrededor de la rueda de colores | 0-359deg |
brightness(x%) | Aumenta o reduce todos los canales | 0-200% |
contrast(x%) | Aleja o acerca los canales al gris medio | 0-200% |
La búsqueda usa SPSA (aproximación estocástica por perturbación simultánea), un optimizador sin gradientes que ajusta los seis valores a la vez, y luego pule los números enteros redondeados para que la cadena que copias sea la que se puntuó.
Cómo leer la puntuación de precisión
| ΔE2000 | Precisión | Lo que ves |
|---|---|---|
| 0-1 | 98-100% | Sin diferencia visible |
| 1-2 | 96-98% | Visible solo lado a lado, para un ojo entrenado |
| 2-5 | 90-96% | Cercano; válido para la mayoría de los iconos |
| 5-10 | 80-90% | Diferencia apreciable: prueba el modo Exhaustivo |
| 10+ | menos del 80% | Deficiente: usa otra variación |
Consejos
- Los filtros se aplican en el navegador píxel a píxel; los bordes suavizados también se colorean, así que los iconos siguen viéndose suaves.
- Para los estados hover, pon un segundo filtro en
:hovery añadetransition: filter .2s. - Los pasteles muy claros y los casi blancos son los más difíciles de lograr con exactitud; el modo Exhaustivo suele ayudar.
Preguntas frecuentes
¿Cómo cambio el color de un SVG con un filtro CSS?
Aplica una cadena de filtros al elemento, por ejemplo filter: brightness(0) saturate(100%) invert(31%) sepia(...) ... Las dos primeras funciones vuelven negro el icono y las demás desplazan el negro hasta tu color objetivo. Funciona con SVG cargados con etiquetas img y con iconos PNG, en los que no se pueden cambiar fill ni color.
¿Por qué necesito primero brightness(0) saturate(100%)?
La cadena se calcula partiendo del negro puro. brightness(0) convierte cualquier color en negro, así que añadirlo al principio hace que el mismo filtro funcione en iconos grises, de color o blancos. Si tu icono ya es #000000, puedes quitarlo.
¿Por qué el color no es 100% exacto?
Los filtros CSS son una cadena de operaciones matemáticas fijas y no pueden alcanzar todos los colores con precisión, y los valores se redondean a números enteros. La herramienta busca la combinación más cercana e indica la diferencia de color: por debajo de ΔE 1 la diferencia es invisible y por debajo de 2 apenas se percibe.
¿Cómo se calcula la puntuación de precisión?
La herramienta simula la cadena de filtros con las matrices de la especificación Filter Effects del W3C, convierte el resultado y el objetivo a CIELAB y mide la diferencia de color CIEDE2000. Precisión = 100 − 2 × ΔE, limitada entre 0 y 100%.
¿Debo usar un filtro o cambiar el fill del SVG?
Si controlas el código del SVG, definir fill o usar fill: currentColor es más simple, exacto y ligero de renderizar. Los filtros son mejores cuando el icono es un img, una imagen de fondo o un PNG que no puedes editar.
¿El filtro funciona en partes de color o transparentes?
Las zonas transparentes siguen siendo transparentes, porque los filtros solo cambian el color, no el canal alfa. Con el prefijo, todos los píxeles visibles pasan a ser del color objetivo, así que los iconos multicolor quedan de un solo color.
¿Por qué obtengo una cadena distinta cada vez que cambio la variación?
Muchas cadenas diferentes producen casi el mismo color. La búsqueda parte de puntos aleatorios, así que otro número de variación puede devolver un filtro distinto pero igual de válido.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.