element-hq / element-meta

Shared/meta documentation and project artefacts for Element clients
70 stars 12 forks source link

Add more colors to display name color palette #1559

Open vranki opened 3 years ago

vranki commented 3 years ago

Screenshot from 2020-11-02 20-31-43

Description

The color palette to choose colors for display names is very small and there are lot of color clashes. In the example screenshot you notice that these users have the same color:

Modern computers can display much more colors, and Element should have a much larger palette to pick them from to avoid clashes. IRC clients have solved the issue by having a much larger palette.

I think the same palette & hash algorithm is used by Element Android so the issue is valid also for it.

Version information

Element Desktop 1.7.10 / Ubuntu 20.04

Implementation idea

Calculate hue & saturation values from mxid hash and use them with brightness value to "generate" actual RGB values. Brightness could be adjusted by client to have dark colors on bright background and vice versa.

olmari commented 3 years ago

Even more broadly, generally more colors and their variations for different nicks. One cool tech @vranki already figured, whoeheartedly welcomed idea :)

dbkr commented 3 years ago

These colours are chosen to fit in with the colour scheme of the app and be to have enough contrast to be distinguishable from one another. Generating completely random colours from the complete spectrum would probably generate a lot of colours that didn't have enough contrast from one another to be visually distinguishable anyway, I'd expect? We could potentially consider this as a feature, but please use the 'feature' template rather than 'bug'.

olmari commented 3 years ago

However colour would technically work, I feel there are way too few of variations... Sure, I can see some colours/"shadings"/variations are hard for certain colourblind peoples and whatnot to distinguish, but at the moment no one is able to when such does not exist. :) So introducing more variations for colours there would ease many of us daily use of Element, while situation for less able ones would more or less stay as is, should one not distinguish, for example, red and lighter red (pink?) etc.

baltitenger commented 3 years ago

Pidgin starts with these 24 colors (defined in pidgin/gtknickcolors.h) image Then, in generate_nick_colors (at pidgin/gtkconv.c:7861), it filters this list based on whether they are different enough from the background, the color used for mentions, and regular text. (it calculates some luminance contrast ratio and makes sure it's bigger than some threshold)

/* first we look through the list of "good" colors: colors that differ from every other color in the
 * list.  only some of them will differ from the background color though. lets see if we can find
 * numcolors of them that do
 */

Then, it might have less colors than desired, so it generates some at random:

/* we might not have found numcolors in the last loop.  if we did, we'll never enter this one.
 * if we did not, lets just find some colors that don't conflict with the background.  its
 * expensive to find colors that not only don't conflict with the background, but also do not
 * conflict with each other.
 */

This way it ends up with 220 colors that are readable, but are not guaranteed to be different from eachother. For small chats, though, the initial "seed" colors will be enough, so they will definitely be different, but you still get some variance for larger groups.

This approach is kind of overkill, but it really does the job without having to come up with tons of colors for every theme.

MayeulC commented 3 years ago

Calculate hue & saturation values from mxid hash and use them with brightness value to "generate" actual RGB values. Brightness could be adjusted by client to have dark colors on bright background and vice versa.

This is how nheko does it. It works quite well in my experience:

Screenshots from synapse admins and gitter rooms dark | Light|Dark w/ collisions|Light w/ collisions :-------------------------:|:-------------------------:|:---:|:--: ![image](https://user-images.githubusercontent.com/3952726/120295824-d0113080-c2c7-11eb-8697-b30bc4346639.png) | ![image](https://user-images.githubusercontent.com/3952726/120295986-f767fd80-c2c7-11eb-86f7-8e5af9e36a9e.png)|![image](https://user-images.githubusercontent.com/3952726/120297016-faafb900-c2c8-11eb-9ed9-36111721a92e.png)|![image](https://user-images.githubusercontent.com/3952726/120297197-27fc6700-c2c9-11eb-8b5a-0bf679cbc937.png)

Of course, there are still some collisions. Often enough, though, the colors are slightly different.

yajo commented 2 years ago

One problem I find particularly disgusting about this is that even in rooms with just 2 persons, sometimes both have the same color:

The screenshot is not much friendly but you get the point. This is a private conversation:

imagen

vranki commented 2 years ago

Screenshot from 2021-10-03 02-35-45 Here is a pretty artistic example of the problem. Two active users get the same color and it's really hard to distinguish them.

unknown-user-9246102101 commented 1 year ago

Tangentially related: https://github.com/matrix-org/matrix-spec/issues/835