Skip to content

User color coding standard draft proposal

Alexey Andreyev edited this page Nov 25, 2020 · 21 revisions

User color-coding standard draft proposal

In addition to showing MXID for user disambiguation, it makes sense to use color-coding for user names. To provide a common color disambiguation functionality across the clients, the next algorithm is proposed.

Introdution

Currently, projects like matrix react sdk or telegram desktop are using ~8 colors table to distinguish user names. While it is possible to accept that method and standardize it for the matrix or provide additional user defined property, another idea for color selection is proposed too.

The idea is to hash user identifier for hue value from HSL, HSV or similar color model with hue in a range from 0 to 1. Additional recommendations for the other parameters like saturation and lightness to make the text readable on different backgrounds is also provided (TODO: decide is it a recommendation or part of the standard).

Silimilar idea was found at xep-0392, and proposed document follows it a lot as good source.

Implementation

String to hue hash algorithm

Using MXID as input and normalize result by scaling between 0 and 1 to accept as hue value.

Rationale: Use a persistent user identifier to keep the same color e.g. on user displayName changed.

Result color generation recommendations

According to:

Possible recommendations could be:

  • work with LAB color model: use HCL color space (chroma.js could be used as reference probably)
  • ignore it and use HSL, since it's easier in some cases: Naive implementation with experimentally picked values is showing acceptable results:
Hue: as described earlier,
Saturation: 1-backgroundColor.hslSaturation,
/* experimentally picked values:
  bg lightness=0 -> text lightness=0.9
  bg lightness=1 -> text lightness=0.2
  so line equation by two points:
  y = -0.7x + 0.9
 */
Lightness: -0.7*backgroundColor.hslLightness + 0.9),
Alpha: generalTextColor.alpha

checked with kde themes, quaternion:

Imgur

and neochat:

Imgur

Sources