Adjust data visualization palette to be less saturated
Problem
In !99160 (merged) the contribution chart was set up to use the data visualization palette. The palette is too vibrant which causes some vibration between darker hues and the background surface.
Solution
- Decrease the saturation towards the darker end of the palette.
- Normalize hues, chroma, and lightness across the entire palette.
- Ensure the contrast ratios still satisfy 3:1 for the 500 steps on both
#1f1f1fand#ffffff.
Screenshots
Refer to the uploaded designs for exploration.
View the working file in Figma →
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
Original description
The result is a very vibrant color that is super hard to parse, especially compared to the previous version:| Before | After |
|---|---|
 |
 |
In the original MR that introduced these colors, @jeldergl and I took a considerable amount of effort into coming up with colors that did explicitly not vibrate so much, see the original thread here:
The problem is that with the new version there is a major increase in vibrancy between step 0 and step 1 that is not repeated again. We did actually briefly consider the color-set that is used now, but decided against it (last entry in the linked comment):
To put it into measurable terms, here's the reason why the new colors look off, contrast compared to Step 0 (gray), according to https://webaim.org/resources/contrastchecker/
| Color | Before Hex | After Hex | Contrast Before | Contrast After |
|---|---|---|---|---|
| Step 0 | #303030 |
#404040 |
1 | 1 |
| Step 1 | #333861 |
#1e23a8 |
1.18 | 1.08 |
| Step 2 | #4a5593 |
#445cf2 |
1.89 | 2 |
| Step 3 | #6172c5 |
#97acff |
2.96 | 4.7 |
| Step 4 | #788ff7 |
#e9ebff |
4.44 | 8.78 |
To visualize this difference, here's a regression on the contrast values (also note the difference in y-axis):
| Before | After |
|---|---|
 |
 |
I think it's valid to brighten up the lighter end of the values, but I think the lower end needs to be much, much grayer, perhaps by bleinding it with one bluer midpoint according to https://meyerweb.com/eric/tools/color-blend/#788FF7:333861:2:hex
I suggest reverting to the original values in darkmode.