Make heatmap colors more distinct

[silverwind]

The second shade falls out of the scheme of 20% increases because it was too hard to see at just 20% opacity but it seems still distinct enough to me from the third color.

Random data generator code

    this.values = new Array(400).fill().map((_, i) => {
      const date = new Date(new Date().setDate(new Date().getDate() - i));
      let count = Math.round(Math.random() * 100);
      if (count % 3 === 0) count = 0;
      return {date, count};
    });

Fixes: #13529

[bagasme]

@silverwind not so much difference between second and third shade (on default scheme)

[silverwind]

Last I tested, there was barely any difference between grey background and 20% opacity primary color, at least on my screen. Will check again later.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

applied your patch @silverwind
maybe it's just me but I also don't think the distinction between certain levels is perfectly visible 🙈 .
it is a laptop screen but it used to be a little more distinct (before the switch to a defined colour palette recently).

[silverwind]

Yes, at least level 2 and 3 still need more distinction, don't land this yet.

[silverwind]

Another variation pushed that uses opaque colors and goes a bit more into the darker shades, how does that look to you two?

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

Another variation pushed that uses opaque colors and goes a bit more into the darker shades, how does that look to you two?

lemme check 🚀

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

Tried it.
Looks fine 💯
Maybe the first level could have a little more opacity (so as not to be as prominent, as it's the least significant one)?

[silverwind]

Ok, made the grey color less opaque (70% as before).

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

Ok, made the grey color less opaque (70% as before).

thanks, building...

so this imo looks better now, I think the levels are a liitle easier to distinguish.

edit: added screenshots

[techknowlogick]

🚀