Color from Name

What this tool does

Color from Name turns any piece of text — a person’s name, a username, a team label, an email address or a project code — into a unique, repeatable colour. It does this by running the text through a stable hash function and mapping the resulting number onto an HSL colour. The hue can land anywhere in the full spectrum, while saturation and lightness are constrained to ranges chosen to keep every result attractive and legible. Because the hash is deterministic, the same input always yields exactly the same colour, on any device and at any time. You see the generated swatch immediately, along with its HEX, RGB and HSL values, each ready to copy. Everything is computed locally in your browser.

Use cases

This is the technique behind the coloured initials you see in countless apps. When a user has not uploaded a profile picture, products generate a default avatar tinted by the person’s name — and this tool shows you exactly how that colour is chosen. Developers use name-to-colour mapping to give chat participants distinct, consistent colours, to tag environments (a red-ish hue for production, a calm blue for staging), or to colour-code branches, tickets and build pipelines in a dashboard. Designers can use it to prototype identity systems where every team or category needs a recognisable colour without anyone hand-picking each one. It is also handy in data visualisation: mapping a category label to a stable colour means the same series keeps the same colour across every chart, even as data changes.

How to use it

1. Type any name, word or string into the input field.
2. The colour swatch and its HEX, RGB and HSL values appear instantly and update as you type.
3. Click the copy icon on any value, or use Copy all to grab every format at once.
4. Try the Examples chips to see how different kinds of strings — a full name, a slug, an email — map to colours.
5. Press Reset to return to the default name.

Tips

Decide on a canonical form for your input before you generate colours in production. The tool lowercases and trims text, so casing and surrounding spaces do not matter, but internal punctuation does — pick either team frontend or team-frontend and use it consistently everywhere. If you are building avatars, pair the generated background colour with automatically chosen black or white text so the initials always stay readable; the same luminance logic used here can decide that. For category colours in charts, hash a stable identifier such as a database ID or a fixed slug rather than a display name, so a later rename does not silently change the colour. And remember that while collisions are rare, they are not impossible — treat the colour as a friendly visual cue, not a unique key.

Related techniques

Once you have a base colour from a name, other colour tools extend it. A tints and shades generator can turn that single colour into hover, active and disabled states for a fully interactive avatar or badge. A colour converter lets you express the value in whatever format your stack expects, including modern oklch(). If the generated colour will sit behind text, run the pairing through a contrast checker to confirm it meets WCAG guidelines. Together these tools take you from a raw string all the way to an accessible, production-ready identity colour.