Cambiar color de icono PNG
Convierte iconos negros en blancos, adapta un logotipo al color de tu marca o aplica un degradado a un conjunto de iconos. La forma y sus bordes transparentes suaves se conservan exactamente; solo cambia el color. Recolorea un lote completo de una vez en tu navegador.
Última actualización:
Las partes oscuras toman el nuevo color y las claras (como un símbolo blanco dentro de una insignia oscura) siguen claras.
Para JPG o PNG planos de un icono oscuro sobre blanco: el blanco se vuelve transparente con bordes suaves.
Cómo usar Cambiar color de icono PNG
- Añade tus iconos: suelta archivos PNG, SVG o JPG, pégalos desde el portapapeles o pulsa Elegir iconos. Hay tres iconos de ejemplo cargados para que lo pruebes primero.
- Elige el nuevo color: escribe un código hex, usa el selector o haz clic en una muestra. Cambia a Degradado para un relleno de dos colores.
- Ajusta los detalles: conserva los detalles interiores claros, fija la opacidad y elige un tamaño de salida.
- Revisa la vista previa sobre fondo de cuadros, blanco u oscuro para asegurarte de que el icono se ve bien.
- Descarga cada PNG o pulsa Descargar todo en ZIP.
Cómo funciona el cambio de color de iconos
Un icono PNG guarda cuatro valores por píxel: rojo, verde, azul y alfa (opacidad). En un icono de un solo color, la forma la define en realidad el canal alfa: el interior es opaco, el fondo es totalmente transparente y los píxeles suavizados del borde quedan en medio. Esta herramienta conserva el valor alfa de cada píxel y sustituye solo los valores de rojo, verde y azul por el color elegido, así que la silueta y sus bordes suaves quedan perfectos al píxel.
En un degradado, la posición de cada píxel dentro del recuadro visible del icono decide en qué punto del degradado está: en un degradado lineal es la distancia a lo largo del ángulo elegido, y en uno radial la distancia desde el centro. Las imágenes opacas sin transparencia se convierten primero usando la oscuridad de cada píxel como su opacidad: alfa = (brillo del fondo − brillo del píxel) ÷ (brillo del fondo − tinta más oscura).
Colores de icono habituales
| Uso | Color típico | Hex |
|---|---|---|
| Iconos sobre un encabezado o botón oscuro | Blanco | #ffffff |
| Iconos de texto sobre una página clara | Casi negro | #1f2937 |
| Iconos desactivados o secundarios | Gris medio | #6b7280 |
| Éxito, confirmación | Verde | #16a34a |
| Errores, acciones de eliminar | Rojo | #dc2626 |
| Advertencias | Ámbar | #d97706 |
| Enlaces e información | Azul | #2563eb |
Son opciones habituales, no un estándar; usa siempre la paleta de tu marca si tienes una.
Consejos para obtener resultados limpios
- Parte de la versión más grande del icono que tengas y elige un tamaño de salida menor; reducir mantiene los bordes nítidos y ampliar los suaviza.
- Comprueba el contraste sobre el fondo blanco y sobre el oscuro de la vista previa. Los iconos pequeños de interfaz deberían alcanzar al menos una relación de contraste de 3:1 con su fondo para seguir siendo reconocibles.
- Para un icono JPG con fondo gris o tintado, quita primero el fondo con la herramienta Hacer imagen transparente y luego recolorea aquí.
- Recolorea un conjunto de iconos completo en un solo lote para que todos los archivos tengan exactamente el mismo valor hex.
Preguntas frecuentes
¿Cómo cambio el color de un icono PNG?
Añade el PNG a la herramienta y elige un nuevo color. Cada píxel visible se pinta con ese color manteniendo su transparencia (alfa), así que el contorno y los bordes suavizados se ven exactamente igual que antes. Después descarga el nuevo PNG.
¿El fondo transparente seguirá siendo transparente?
Sí. Los píxeles totalmente transparentes siguen siéndolo y los píxeles semitransparentes de los bordes conservan su opacidad original, así que el icono recoloreado se sigue integrando suavemente en cualquier fondo.
¿Puedo recolorear un icono con fondo blanco?
Sí. Si la imagen no tiene transparencia, como la mayoría de los JPG, la herramienta trata el fondo claro como espacio vacío y lo vuelve transparente, usando la oscuridad de cada píxel como su opacidad. Funciona mejor con iconos oscuros sobre un fondo blanco o muy claro.
¿Qué hace Conservar detalles interiores claros?
Algunos iconos combinan una forma oscura con detalles más claros, como una marca de verificación blanca dentro de un círculo negro. Con esta opción activada, las partes oscuras reciben el nuevo color y las partes claras siguen claras, así que el detalle no desaparece. Desactívala para rellenar toda la forma con un solo color.
¿Funciona con logotipos de varios colores?
Está pensada para iconos y logotipos de un solo color. Un logotipo de varios colores pasa a ser de un solo color (o un solo degradado) conservando su forma, lo que resulta útil para versiones monocromas. Para cambiar solo uno de varios colores, usa la herramienta Reemplazar color en una imagen.
¿Puedo recolorear iconos SVG?
Sí. Los archivos SVG se renderizan a 512 píxeles o más y se guardan como PNG. Si necesitas el resultado en SVG, normalmente es más fácil cambiar el atributo fill en el propio código SVG.
¿Se suben mis iconos a un servidor?
No. Todo el recoloreado se hace con la API canvas dentro de tu navegador, así que tus archivos nunca salen de tu dispositivo y la herramienta sigue funcionando sin conexión una vez cargada.
¿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.