# Feature DREAM-127 - Make avatars more distinguishable by allowing users to pick their avatar color themselves

Project: Stream Design System
Status: tested
URL: https://community.openproject.org/work_packages/DREAM-127

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0, Passion time |
| Sprint |  |
| Backlog bucket |  |
| Votes | 4 |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-993 | Bug | Default colors have changed for avatars | confirmed |  | 18.0.0 |  | Frontend components and Primer design system, Administration / User administration |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / My account, Administration / Custom themes |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Henriette Darge |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a user who did not upload a custom avatar image  
**I want to** pick a color for my avatar by myself  
**so that** I can easier identify it in e.g. Lists and others can easier distinguish avatars with similar initials (e.g. "Alexander Storch" -> AS and "Ariane Stork" -> AS)

**Acceptance criteria**

*   In the avatars section of the My Account area, there is an additional field called "Fallback color" in which users can enter a hexcode
    
    *   The same field is shown when an admin goes to `users/:id/edit`
        
        *   This will have the same issue we currently have when an admin updates the avatar of another issue: The new image will not be seen until the cache is invalidated (which either happens manually or after 24h)
            
    *   The field offers a color picker
        
*   This colour is used as the background color for the automatically generated avatar if there is no image uploaded
    

**Current situation**

Currently, the color code of the avatars is calculated from user name and ID. While each avatar gets its own color this way, they can still be so similar that the difference is hard to gasp for users. For example `#bf7f40` vs `#bf8640`.  
Example:

&nbsp;<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/173567/content">

It seems that the current technical implementation can hardly be adjusted in a way that ensures a clearly visible color difference in every situation.  
Some users created their own avatar via MS paint and uploaded them as custom avatars to avoid this.  
This topic has been discussed via element chat. One proposed solution was

> \[...\]we could just generate a simple avatar based on a user provided color that would look almost the same as they currently do. So we would just have to alter the user administration a bit. But this would only work if custom avatars are enabled \[...\]

_First mentioned in support ticket 18611_

**Hint for QA**

Changing the fallback color (or the avatar) of another user currently does not invalidate the cache and will thus not be visible immideatly. This was existing behaviour before and now also affects the color. This is a limitation we accept for the sake of performance. In order to check it without waiting a day, you need to manually delete the browser cache.