Cómo colorear texto con el generador

La herramienta envuelve cada letra —o cada palabra completa— en su propia etiqueta font de HTML con un color aleatorio y un tamaño aleatorio de 1 a 7. La vista previa y el bloque de código se construyen con la misma cadena, así que lo que ves es lo que copias.

Nada sale de la pestaña: no hay subida, ni cuenta, ni ida y vuelta al servidor, y el marcado se puede pegar en cualquier editor, foro o plantilla que todavía acepte HTML.

  1. Pega o escribe el texto. Funcionan latino, cirílico, griego, árabe, CJK y emoji; un emoji cuenta como una letra aunque esté formado por varios puntos de código.
  2. Elige Colorear cada letra para dar un color a cada carácter, o Colorear cada palabra para colorear palabras completas y conservar los espacios.
  3. Pulsa Generar efecto. El recuadro amarillo muestra el resultado coloreado, el bloque de abajo contiene el marcado y Copiar código lo pone en el portapapeles.
  4. Pulsa Limpiar para vaciar ambos recuadros. Si la caja de texto está vacía, la herramienta lo dice en lugar de dejar el resultado anterior en pantalla.

Qué contiene el marcado generado

Cuánto ocupa el resultado

Cada letra cuesta una etiqueta font de unos 39 caracteres: 60.000 letras se convierten en unos 2,3 MB de marcado, y 12.000 palabras en modo palabra en unos 516 KB. Medido en el navegador en 0,5 s y 0,16 s.

El bloque de código resalta el marcado hasta 50.000 caracteres. Un texto más largo se genera y se copia igual de bien, solo se muestra como texto escapado sin colores de sintaxis.

Modo letra y modo palabra

El modo letra divide por grupos de grafemas, las unidades que ve el lector: una familia de emoji, una bandera o una letra con acento combinado se quedan dentro de una sola etiqueta en vez de partirse en dos.

El modo palabra envuelve cada palabra y conserva los huecos tal como los escribiste. El segundo espacio de una racha se escribe como espacio duro para que sobreviva en la página, un tabulador cuenta como un espacio y cada salto de línea se convierte en una etiqueta de salto.

Los colores son aleatorios, no elegidos

El color y el tamaño salen de un sorteo en cada ejecución: el mismo texto produce un marcado distinto cada vez, y dos letras vecinas pueden compartir color por casualidad.

El generador no comprueba el contraste con el fondo de tu página: un color claro se lee mal sobre blanco y uno oscuro sobre negro. Vuelve a generar hasta que la mezcla encaje o edita los valores hexadecimales del marcado.

Qué hace el marcado al pegarlo

El elemento font está obsoleto en HTML5, pero los navegadores siguen dibujándolo: por eso la salida lo usa, porque los editores antiguos, los foros y las plantillas de correo que eliminan CSS conservan los colores.

El texto que escribes se escapa al entrar: los signos de menor y mayor y los ampersands aparecen como caracteres, no como etiquetas, así que pegar marcado produce una copia coloreada del marcado en lugar de romper la vista previa.

Herramientas recientes: