🔣🎨 Ethan's Text-Color ID

Any letter or symbol or emoji or anything else you can type or show on a screen is part of a big system called Unicode 🔣. In Unicode, each letter or symbol is given a unique numerical value, called a code point. The code point for the letter A is 65, while code points for some emojis are up in the 128,000+ range.

This tool takes the Unicode code point for a given letter or symbol and runs it through a 32-bit avalanche mixing function — the same family of finalizer used in hashes like Murmur3. The idea of an avalanche function is that flipping even a single bit of the input should flip roughly half the bits of the output, unpredictably. That property is what earlier, simpler approaches (multiply-then-truncate-to-8-bits schemes, for instance) don't actually deliver, however convincing they look on paper.

The mixing itself works by repeatedly XOR-ing the value with a right-shifted copy of itself, then multiplying by a large odd constant, and doing that twice more with different shift amounts and constants. Each round spreads the influence of every input bit a little further across the full 32-bit output. Critically, this all happens with true 32-bit integer multiplication, via JavaScript's Math.imul — ordinary * in JavaScript silently promotes to a floating-point double the moment a product exceeds 2⁵³, which quietly throws away the low bits you need. Math.imul keeps the arithmetic honest.

To get three channels — red, green, and blue — out of one code point, the tool doesn't reuse one mixed value three times in a row. Instead, it XORs the code point with three different fixed salts before mixing, once per channel, so red, green, and blue are each an independent avalanche of the same input rather than a chain where green is just a function of red and blue is just a function of green. From each of those three fully-mixed 32-bit results, the tool keeps only the top 8 bits — the byte least distorted by truncation and most representative of the full mix — and uses that as the channel value.

RGB values (Red, Green, and Blue values) are expressed between 0 and 255. For instance, RGB(255, 0, 0) is red, since it's like turning the red slider all the way up and keeping the green and blue sliders all the way down. Meanwhile, RGB(255, 0, 255) is purple, since it's combining a full mix of red and blue, with no green.

The point of all this is to make sure that similar Unicode characters (like "abcd") don't necessarily have similar color values, and — just as important — that unrelated characters from entirely different scripts don't accidentally collide on the exact same color. We could have used a shortcut that only paid attention to the low byte of each code point, but that would mean thousands of unrelated characters spread across Unicode's full range would silently render as identical colors, which defeats the purpose of a tool meant to visually distinguish text. With a proper full-range avalanche mix, the entire code point — not just a sliver of it — determines the color, and the full color space is genuinely reachable rather than a narrow slice of it.

And once we find the color for the first symbol, we do it for the second, third, fourth, to the last, then put them in the most convenient square shape, and fill any blank space at the end with repeating black and white tiles.

In theory, this is reverse-translatable as well. But that's for another day. Enjoy your unique text color ID block!

By Ethan Hulbert. View all tools. If you use this, send me a thank you email :)