How to color text with the generator

The tool wraps every letter — or every whole word — in its own HTML font tag with a random color and a random size from 1 to 7. The preview box and the code block are built from the same string, so what you see in the preview is what you copy.

Nothing leaves the browser tab: there is no upload, no account and no server round trip, and the markup can be pasted into any editor, forum or template that still accepts HTML.

  1. Paste or type the text. Latin, Cyrillic, Greek, Arabic, CJK and emoji all work; an emoji counts as one letter even when it is built from several code points.
  2. Choose Color each letter to give every character its own color, or Color each word to color whole words and keep the spaces between them.
  3. Press Generate effect. The yellow box shows the colored result, the block underneath holds the markup, and Copy code puts that markup on the clipboard.
  4. Press Clear to empty both boxes. If the text box is empty, the tool says so instead of leaving the previous result on screen.

What the generated markup contains

Counting what the tool produces

One letter costs a font tag of roughly 39 characters: 60,000 letters turn into about 2.3 MB of markup, and 12,000 words in word mode into about 516 KB. Both measured in the browser at 0.5 s and 0.16 s.

The code block highlights the markup up to 50,000 characters. Longer text is still generated and copied correctly, it is only shown as plain escaped text without syntax colors.

Letter mode and word mode

Letter mode splits on grapheme clusters, the units a reader sees: an emoji family, a flag or a letter with a combining accent stays inside one tag instead of being cut in half.

Word mode wraps each word and keeps the gaps as typed. A second space in a run is written as a non-breaking space so it survives in the pasted page, a tab counts as one space, and each line break becomes a line-break tag.

The colors are random, not chosen

Color and size come from a random draw on every run: the same text produces different markup each time, and two neighboring letters can share a color by chance.

The generator does not check contrast against your page background — a light color is hard to read on white, a dark one on black. Run it again until the mix fits, or edit the hex values in the copied markup.

What the pasted markup does in a page

The font element is obsolete in HTML5 but browsers still render it, which is why the output targets it: old editors, forum software and mail templates that strip CSS keep the colors.

Text you type is escaped on the way in: angle brackets and ampersands appear as characters, not as tags, so typing markup produces a colored copy of the markup instead of breaking the preview.

Recent tools: