avatar-background-color

Every avatar surface in this repo paints a deterministic background derived from the user's display name, mirroring decentraland/unity-explorer's NameColorHelper.GetNameColor (referenced from ADR-292's avatar rendering pipeline). Same algorithm in browser and in-world = visually consistent identity.

The algorithm (do not re-implement, import the helpers)

src/utils/avatarColor.ts:

• getDisplayName({ name, hasClaimedName, ethAddress }) — strips non-alphanumeric Unicode, appends #<last4 of address> for unclaimed names, mirroring Profile.CompactInfo.GenerateAndValidateName.
• getAvatarBackgroundColor(displayName) — FNV-1a 32-bit hash → hue → HSV(hue, 0.75, 1) → #rrggbb.

The hooks that already wire this up:

• useProfileAvatar(address) returns backgroundColor: string.
• useCreatorAvatar(address, name) and useCreatorProfile(address, userName) propagate it; the latter overrides it with the Foundation brand violet (#9d76e3) when isDclFoundationCreator(userName) matches.

Never re-derive the color in a component — always pull from the hook (when one of the avatar hooks already runs) or call getAvatarBackgroundColor(getDisplayName(...)) once at the parent level.

Application patterns