This tool maps any text — a username, tag, email or category name — to a stable color that looks identical on every render. It is the trick behind colored avatar backgrounds, label chips and chart series, where you want each name to have a consistent, recognisable color without storing one. Type a string and get its HEX, RGB and HSL values plus a live swatch.
How it works
The text is run through a deterministic FNV-1a 32-bit hash, so identical input always produces the same hash. That hash is mapped to an HSL color: the hue is hash mod 360 (the full color wheel), while different bits of the hash set the saturation (constrained to 55-89%) and lightness (40-64%) to keep colors vivid but not garish. The HSL value is then converted to RGB and HEX. Finally, the tool measures the color’s relative luminance and picks black or white label text for good contrast.
Why FNV-1a and not a simpler hash?
A naive hash like summing character codes produces bad distribution — common names cluster together and many inputs collide. FNV-1a (Fowler–Noll–Vo) is a well-studied non-cryptographic hash with excellent avalanche properties: a single character change scrambles the output completely, so “alice” and “Alice” land on very different hues. It is also fast enough to run on every keystroke without perceptible delay.
The 32-bit version is used here (rather than 64-bit) because JavaScript’s bitwise operators work on 32-bit integers, and 32 bits gives 4 billion possible hash values — far more than enough distinct colors for any realistic set of names.
Real-world use cases
Avatar initials
Social apps like Gmail, Notion, and many project tools assign a background color to user avatars when no profile photo exists. The color is derived from the username or email so it is consistent across sessions and devices without being stored in the database.
Category and tag chips
When you add tags to content in a CMS or issue tracker, each tag gets a colored chip. Using a hash means no one needs to manually assign or store tag colors — they are computed on the fly and always the same.
Chart series
When rendering a chart with variable-length series — for example, a user-generated dashboard where each row is a different entity — a text hash assigns each series a stable, distinct color without requiring a pre-defined palette that might run out of entries.
Data table row highlighting
In tables where rows represent named entities, a subtle hash-derived background can help users track a specific row across sorting and filtering without requiring stored color preferences.
Example
| Text | Hue (hash mod 360) | Result style |
|---|---|---|
| ”alice” | a fixed hue | always the same teal-ish swatch |
| ”bob” | a different hue | always the same orange-ish swatch |
| ”ALICE” | a different hue from “alice” | case changes the hash |
Because the mapping is deterministic, “alice” produces the exact same HEX every single time, on every device. All computation happens in your browser; nothing is uploaded or stored.