Make about://tracing color palette more readable |
||
Issue descriptionThe current color palette has been chosen more than two years ago [0]. The description of the change indicates that it has been generated using HSL, but the luminosity is way too low, making labels hard to read. I suggest generating the palette using HSL at runtime, with fixed saturation and luminosity. I have a change that looks a lot better imo. [0] https://codereview.chromium.org/1426173002
,
Apr 3 2018
Hi Yang, I think the new color palette looks objectively better, but tracing has been migrated to catapult, and this should become a catapult issue. Happy to review the CL once uploaded.
,
Apr 3 2018
Thanks. I'll follow up on this :)
,
Apr 3 2018
Following up here: https://github.com/catapult-project/catapult/issues/4373
,
Apr 3 2018
New palette.
,
Apr 3 2018
For posterity, the script to generate this screenshot:
const old = [
[122, 98, 135],
[150, 83, 105],
[44, 56, 189],
[99, 86, 147],
[104, 129, 107],
[130, 178, 55],
[87, 109, 147],
[111, 145, 88],
[81, 152, 131],
[142, 91, 111],
[81, 163, 70],
[148, 94, 86],
[144, 89, 118],
[83, 150, 97],
[105, 94, 139],
[89, 144, 122],
[105, 119, 128],
[96, 128, 137],
[145, 88, 145],
[88, 145, 144],
[90, 100, 143],
[121, 97, 136],
[111, 160, 73],
[112, 91, 142],
[86, 147, 86],
[63, 100, 170],
[81, 152, 107],
[60, 164, 173],
[143, 72, 161],
[159, 74, 86]];
for (var rgb of old) {
var div = document.createElement('div');
div.style.cssText = `width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`;
console.log(div.style.cssText);
document.body.appendChild(div);
}
var div = document.createElement('div');
div.style.cssText = `width:20px;height:20px;`;
document.body.appendChild(div);
for (var i = 0; i < 18; i++) {
var div = document.createElement('div');
div.style.cssText = `width:20px;height:20px;background-color: hsl(${i/18*360},75%,75%);float:left`;
console.log(div.style.cssText);
document.body.appendChild(div);
}
,
Apr 13 2018
This is the script to generate using SinebowColorGenerator, for posterity: https://gist.github.com/hashseed/3bc2844b15e006b380a4566325361b36 |
||
►
Sign in to add a comment |
||
Comment 1 by yangguo@chromium.org
, Apr 3 2018Components: Speed>Tracing
Owner: yangguo@chromium.org
Status: Assigned (was: Untriaged)