Skip to content

User color coding standard draft proposal

Alexander Akulich edited this page Mar 6, 2019 · 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, 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)

Implementation

String to hue hash algorithm

TODO: select something like:

User 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 "How To Avoid Equidistant HSV Colors" by Gregor Aisch, zenozeng's color-hash FAQ section and my general subject's knowledge, different hue values, ceteris paribus, are perceived "not equally" due to the physiology of the human eye.

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 earlied,
Saturation: 1-backgroundColor.hslSaturation,
/* experimentally picked values:
  bg lightness=0 -> text lightness=0.9
  bg lightness=1 -> text lightness=0.3
  so line equation by two points:
  y = -0.6x + 0.9
 */
Lightness: -0.6*backgroundColor.hslLightness + 0.9),
Alpha: generalTextColor.alpha

checked with kde themes: Imgur

Sources

Clone this wiki locally