Avatar Generator

Initials avatars done deterministically

When a user has no profile photo, a tidy fallback is a colored circle showing their initials. The trick that makes it feel designed rather than random is determinism: the same name always maps to the same color. That consistency means a person is visually recognizable across a list, a comment thread, and a header without any stored image.

How the color is derived

The name is run through a simple hash to produce a number, then that number is mapped onto a fixed palette or a hue on the color wheel. Because the hash is stable, "Ada Lovelace" lands on the same swatch every time. Picking the hue in HSL with a fixed saturation and lightness keeps every generated avatar legible and in the same visual family.

Example

function colorFromName(name) {
  let hash = 0
  for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) | 0
  const hue = Math.abs(hash) % 360
  return 'hsl(' + hue + ', 65%, 45%)'
}
// "Ada Lovelace" -> always the same hue

The fixed 65 percent saturation and 45 percent lightness guarantee the white initials stay readable on top, whatever hue the hash picks.

Pitfalls

Deriving initials is harder than taking the first two letters: single-word names, names with particles like "van", and non-Latin scripts all need thought. A purely hue-based color can still land on a low-contrast combination, so lock lightness and verify the worst case against the contrast checker. For a plain box stand-in instead of a person, use the placeholder image generator.

FAQ

Why deterministic colors? So the same user keeps the same avatar everywhere, which aids recognition and avoids a jarring color change on reload.

How many initials should I show? One or two. More than two gets cramped in a small circle and loses legibility.

What about right-to-left names? Detect the script and take the leading characters in logical order; do not assume left-to-right.