Como colorir texto com o gerador

A ferramenta envolve cada letra — ou cada palavra inteira — na própria tag font de HTML, com uma cor aleatória e um tamanho aleatório de 1 a 7. A prévia e o bloco de código saem da mesma string, então o que você vê é o que você copia.

Nada sai da aba do navegador: não há upload, conta nem ida ao servidor, e a marcação pode ser colada em qualquer editor, fórum ou modelo que ainda aceite HTML.

Cole ou digite o texto. Latim, cirílico, grego, árabe, CJK e emoji funcionam; um emoji conta como uma letra mesmo quando é formado por vários pontos de código.
Escolha Colorir cada letra para dar uma cor a cada caractere, ou Colorir cada palavra para colorir palavras inteiras e manter os espaços.
Clique em Gerar efeito. A caixa amarela mostra o resultado colorido, o bloco abaixo traz a marcação e Copiar código coloca tudo na área de transferência.
Clique em Limpar para esvaziar as duas caixas. Se a caixa de texto estiver vazia, a ferramenta avisa em vez de deixar o resultado anterior na tela.

O que a marcação gerada contém

Quanto ocupa o resultado

Cada letra custa uma tag font de cerca de 39 caracteres: 60.000 letras viram uns 2,3 MB de marcação, e 12.000 palavras no modo palavra viram cerca de 516 KB. Medido no navegador em 0,5 s e 0,16 s.

O bloco de código destaca a marcação até 50.000 caracteres. Textos maiores continuam sendo gerados e copiados corretamente, apenas aparecem como texto escapado sem cores de sintaxe.

Modo letra e modo palavra

O modo letra divide por grupos de grafemas, as unidades que o leitor enxerga: uma família de emoji, uma bandeira ou uma letra com acento combinado ficam dentro de uma única tag em vez de serem cortadas ao meio.

O modo palavra envolve cada palavra e mantém os espaços como digitados. O segundo espaço de uma sequência vira espaço não separável para sobreviver na página colada, uma tabulação conta como um espaço e cada quebra de linha vira uma tag de quebra.

As cores são aleatórias, não escolhidas

Cor e tamanho saem de um sorteio a cada execução: o mesmo texto gera marcações diferentes toda vez, e duas letras vizinhas podem compartilhar a cor por acaso.

O gerador não verifica contraste com o fundo da sua página: uma cor clara some no branco e uma escura some no preto. Gere de novo até o conjunto agradar ou edite os valores hexadecimais na marcação copiada.

O que a marcação faz na página

O elemento font é obsoleto no HTML5, mas os navegadores continuam desenhando: é por isso que a saída o usa, porque editores antigos, fóruns e modelos de e-mail que removem CSS mantêm as cores.

O texto digitado é escapado na entrada: sinais de menor e maior e ampersands aparecem como caracteres, não como tags, então colar marcação gera uma cópia colorida da marcação em vez de quebrar a prévia.