Hash to Color (Deterministic Avatar Color)
Turn any string — a username, email, or ID — into a stable, good-looking color for avatars and labels. Same input always gives the same color. Runs in your browser.
Examples (each string → its own stable color)
The color is derived from an FNV-1a hash of the string mapped to a hue, with fixed saturation and lightness for legibility — so the same user always gets the same avatar color without storing anything.
About this tool
A common UI need is to give each user, tag, or item a distinct color without storing one — for the colored initial-avatars you see in email clients and dashboards, for category chips, or for chart series. The trick is to derive the color deterministically from the item's identifier so it is always the same. This tool does that: it runs the string through an FNV-1a hash, maps the result to a hue on the color wheel, and fixes the saturation and lightness so every generated color is vivid but still legible as a background behind white or dark text. Because it is a pure function of the input, the same email or username always produces the same color across sessions, devices, and page loads, with nothing to persist. It shows the result as hex and HSL plus a live avatar preview. Everything is computed locally.
How to use it
- Enter a string — a username, email, user ID, or label.
- See the generated avatar color and its hex/HSL values.
- Copy the color into your stylesheet or component.
- Reuse the same algorithm server-side or client-side for consistent colors everywhere.
Frequently asked questions
- Will the same string always give the same color?
- Yes. The color is a pure function of the input via an FNV-1a hash, so a given username or email maps to the identical color every time, on every device, with nothing stored. That determinism is the whole point for avatars.
- How is the color chosen?
- The string is hashed to a 32-bit number, that number modulo 360 becomes the hue, and saturation and lightness are held constant (around 65% and 55%). Fixing S and L keeps every color vivid and legible rather than occasionally producing a near-white or muddy result.
- Can two different strings get the same color?
- Yes — there are only 360 hues, so collisions are expected across many items. For avatars that is fine (it is cosmetic). If you need guaranteed-distinct colors for a small fixed set, assign from a curated palette instead.
- Should I put light or dark text on the color?
- With the default ~55% lightness, white text generally has good contrast. The preview uses that. If you raise the lightness, switch to dark text. For strict accessibility, check the contrast ratio against your text color.
- Can I reproduce this on the server?
- Yes. FNV-1a is a simple, well-defined hash, so implementing the same hash-to-hue mapping in your backend yields identical colors to the client — useful for pre-rendering avatars.
- Is my input uploaded?
- No. The hash and color are computed entirely in your browser with no network request.