Keep person avatar colors consistent across page loads

Keep person avatar colors consistent across page loads

Description

Krayin CRM uses colored circular initials as avatars for people/contacts (for example, a contact named Name Surname is displayed as NS inside a colored circle).

Currently, the avatar color appears to be generated or assigned dynamically. As a result, the color of the same person can change after every page reload or navigation to another page.

For example:

• NS → blue
• Navigate to another page → NS → green
• Reload the page → NS → orange
• Navigate back → NS → purple

This makes the UI visually inconsistent and makes it harder to recognize people at a glance, especially when working with the CRM repeatedly throughout the day.

Expected behavior

The avatar color should be deterministic and persistent for the same person/contact.

For example, if Name Surname is assigned a blue avatar:

**NS **

then the same person should continue to have the same blue avatar across:

• page navigation
• page reloads
• different CRM views/lists
• lead/contact detail pages
• browser sessions

The color should preferably be derived deterministically from a stable identifier (such as the person's database ID), rather than randomly generated on each render.

Actual behavior

The avatar color changes between page loads and/or navigation, even though the person represented by the avatar remains the same.

Why this matters

Consistent avatar colors provide a useful visual identity for CRM records. When colors change frequently, users cannot build a reliable visual association between a person and their avatar.

This is particularly noticeable in lists containing many contacts or leads, where users naturally use the avatar color as an additional visual cue for quickly locating familiar records.

Suggested implementation

Assign the avatar color deterministically based on a stable attribute of the record, such as:

• person/contact ID, or
• another stable unique identifier.

The generated value could then be mapped to the existing avatar color palette.

For example:

person ID → deterministic hash → color from existing palette

This would preserve the existing visual design while ensuring that the same record always receives the same color.

Acceptance criteria

• The same person/contact always receives the same avatar color.
• The color remains unchanged after a full page reload.
• The color remains unchanged when navigating between CRM pages/views.
• Different people should normally receive different colors where the available palette allows it.

Environment

• Krayin CRM
• Browser: Chrome
• Issue observed in the CRM's person/contact/lead avatar circles

Thank you for considering this small UX improvement. It would make the CRM noticeably easier to scan and use consistently.