Generador de imágenes de marcador
Genera una imagen de marcador a cualquier tamaño con tu propio color de fondo, color de texto y etiqueta, y descárgala como PNG, JPG, WebP o SVG.
Generador de imágenes de marcador — Indica un ancho y un alto en píxeles, elige un color de fondo y de texto, escribe una etiqueta opcional y la herramienta dibuja una imagen de marcador centrada que se previsualiza en vivo mientras escribes. Elige PNG, JPG, WebP o SVG y descarga el resultado con un clic. Todo se renderiza en tu navegador con las API integradas de canvas y SVG, así que nada de lo que introduces se sube nunca a un servidor.
¿Qué es Generador de imágenes de marcador?
El Generador de Imágenes de Marcador es una herramienta gratuita en el navegador para diseñadores y desarrolladores front-end que necesitan un gráfico de relleno rápido mientras construyen maquetas, prototipos o bibliotecas de componentes. Defines las dimensiones exactas en píxeles, eliges un color de fondo y de texto (como valor HEX o con el selector de color) y añades una etiqueta corta, como un tamaño, una proporción o una nota. Si dejas la etiqueta vacía, la imagen se dibuja con el ancho y el alto incorporados (por ejemplo, 600×400). El resultado se actualiza al instante en la vista previa, y puedes exportarlo como PNG, JPG o WebP de mapa de bits, o como un SVG nítido y escalable hasta el infinito cuyo marcado también puedes copiar. Úsalo para rellenar huecos de imagen en un prototipo, probar cuadrículas responsivas o generar miniaturas de prueba consistentes.
Cómo usar Generador de imágenes de marcador
- Introduce el ancho y el alto de la imagen en píxeles.
- Elige un color de fondo y un color de texto, escribiendo un valor HEX o usando el selector del cuadro de color.
- Escribe una etiqueta opcional; déjala en blanco para mostrar las dimensiones (p. ej. 600×400) automáticamente.
- Elige el formato de salida: PNG, JPG, WebP o SVG.
- Revisa la vista previa en vivo y haz clic en Descargar para guardar la imagen (con SVG también puedes copiar el marcado).
Ejemplos
Marcador gris estándar
Configura 600×400 con un fondo gris claro y un color de texto gris suave, deja el texto vacío y descarga un PNG que muestra 600×400 centrado: un relleno listo para un hueco de imagen.
Maqueta de banner principal con etiqueta
Usa un tamaño ancho como 1200×400, un color de fondo de marca, texto blanco y una etiqueta como 'HERO', luego exporta como WebP para un recurso de maqueta ligero.
Hueco de avatar SVG escalable
Elige un tamaño cuadrado como 256×256, cambia el formato a SVG y copia el marcado generado directamente en tu HTML para que el marcador se mantenga nítido a cualquier zoom.
Preguntas frecuentes
- ¿Qué formatos puedo exportar?
- Cuatro: PNG, JPG y WebP son imágenes de mapa de bits renderizadas en un canvas, mientras que SVG es una imagen vectorial generada como marcado. Cambia de formato con el menú Formato; con SVG también puedes copiar el texto del marcado directamente.
- ¿Qué pasa si dejo la etiqueta vacía?
- La imagen muestra automáticamente sus propias dimensiones, por ejemplo 600×400, dibujadas en el centro. Escribe tu propia etiqueta para reemplazarla con el texto que quieras.
- ¿Cómo establezco los colores?
- Escribe un valor HEX como #e2e8f0 en el campo de fondo o de texto, o haz clic en el pequeño cuadro de color para abrir el selector nativo de tu navegador. También funcionan los colores con nombre de CSS. La vista previa se actualiza al cambiarlos.
- ¿Por qué el JPG rellena el fondo aunque quiera transparencia?
- El formato JPG no admite transparencia, por lo que siempre se pinta un fondo sólido para evitar zonas negras. Para un fondo transparente usa PNG, WebP o SVG con un valor de color transparente.
- ¿Se suben mis imágenes o textos a algún sitio?
- No. El marcador se dibuja por completo en tu navegador usando las API de canvas y SVG, y la descarga se realiza localmente: nada de lo que escribes o generas se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu trabajo privado.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.