DISEÑO

Selector de colores interactivo para email

Elige la paleta de tu newsletter y mira cómo queda en tiempo real: fondo, texto, enlaces y botón. Exporta un HTML con CSS inline listo para tu plataforma de envío.

HW

Paleta

Paletas email-safe

Consejo: usa colores con contraste suficiente (ratio ≥ 4.5:1 para texto). Se muestra el ratio calculado bajo los controles.

Vista previa

Accesibilidad del color

  • Mantén un contraste texto/fondo ≥ 4.5:1 (WCAG AA) y ≥ 3:1 para textos grandes.
  • No uses el color como única señal: acompaña los enlaces con subrayado.
  • Los colores del email deben definirse con CSS inline (o atributos bgcolor/color) para clientes que ignoran el CSS embebido.

Qué hace Selector de colores interactivo para email

Selector de colores interactivo para email forma parte del catálogo client-side de 1000 Herramientas Web: el archivo o el texto que introduzcas no se sube a nuestros servidores. Diseña la paleta de tu email en vivo: fondo, texto, enlaces y botón con vista previa instantánea y exportación del HTML con CSS inline, compatible con clientes de correo. Categoría: DISEÑO.

Sirve a quien necesita el resultado ahora (un autónomo, un estudiante, alguien en un PC bloqueado) y no quiere una suite completa.

Cómo usarla

  1. Entra en esta página. No hay registro: la herramienta está lista en cuanto carga.
  2. Completa «Fondo del email», «Fondo del cuerpo», «Texto», «Enlaces» y «Botón (fondo)».
  3. Pulsa «Profesional» o «Cálido» o «Ventas» según quieras copiar, generar o descargar.
  4. El resultado se queda en formato texto (portapapeles).
  5. Cierra la pestaña cuando termines. No queda una copia en 1000herramientasweb.com porque el cálculo no ha salido de tu dispositivo.

Un caso real

Rellenas los campos de la ficha y copias o descargas el resultado. Nada viaja a un API de «IA en la nube».

1000 Herramientas Web publica utilidades client-side: el valor está en que puedes resolver la tarea sin una cuenta SaaS y sin entregar el documento a un tercero. Esta ficha sigue esa regla.

Límites (para no venderte humo)

  • No hay cuenta, historial en la nube ni colaboración en tiempo real.
  • Si recargas o cierras la pestaña sin copiar/descargar, el trabajo se pierde.
  • El límite práctico es la memoria de tu navegador, no un plan de pago.
  • No es asesoramiento legal, fiscal, médico ni un sustituto de software con licencia cuando el nombre comercial coincida.
  • Los formatos de salida que genera esta ficha son: texto (portapapeles).

Preguntas frecuentes

¿Selector de colores interactivo para email sube mis datos a un servidor?

No. El JavaScript de esta página corre en tu navegador. Puedes comprobarlo en las herramientas de desarrollador (pestaña Red): no verás una subida del contenido que has pegado o del archivo local.

¿Puedo usar el resultado de Selector de colores interactivo para email en un trabajo o con un cliente?

Sí. El archivo o el texto que generas es tuyo. La plantilla o el cálculo son una ayuda; si el documento tiene efectos legales o fiscales, revísalo con un profesional.

¿Funciona sin internet?

Tras la primera carga, muchas fichas siguen funcionando si el navegador ha cacheado los scripts. La primera visita sí necesita red para descargar la página, las fuentes y, si los consientes, los anuncios.

Herramientas relacionadas

\n'; } function pintar() { ids.forEach(id => $(id + 'Hex').textContent = valor(id)); $('vista').srcdoc = construirHtml(); const ratio = contraste(valor('texto'), valor('cuerpo')); const r2 = contraste(valor('botonTexto'), valor('boton')); $('contraste').innerHTML = 'Contraste texto/fondo: ' + ratio.toFixed(2) + ':1 (' + (ratio >= 4.5 ? 'AA ' : 'menor de 4.5 — revisa') + ') · Botón: ' + r2.toFixed(2) + ':1'; } ids.forEach(id => $(id).addEventListener('input', pintar)); document.querySelectorAll('[data-paleta]').forEach(btn => { btn.addEventListener('click', () => { const p = PALETAS[+btn.dataset.paleta]; ids.forEach((id, i) => $(id).value = p[i]); pintar(); }); }); $('btnHtml').addEventListener('click', () => { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([construirHtml()], { type: 'text/html;charset=utf-8' })); a.download = 'email-colores.html'; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 5000); }); pintar();