计算 1 种颜色的颜色范围，从浅色到深色（er）色

Question

我发现了这个漂亮的调色板

我想用它让用户从这个调色板中选择一个调色板作为前 8 种颜色（垂直）。所以我想我可以添加更多，当然不要输入所有的十六进制代码。

有没有办法计算这些值？

因此，例如输入颜色 c6ff89（或任何其他颜色），然后以 498e00（右列）结尾。

所以潜在的问题是：对这些颜色有数学运算吗？

其次，现在我正在查看这些颜色：顶行的项目看起来都是同一种“亮度”（不知道该使用什么术语）。我的意思是左边是相同的蓝色光，右边是绿色光，所以相同的亮度（/暗度）。是否也可以计算，例如为红色或橙色计算相同类型的亮度？

Answer 1

是的，计算它们实际上非常简单！

在hsl 中，这些只是具有完全饱和度和每步降低 7% 的亮度的颜色：

#c6ff89 is hsl(89deg 100% 77%),
#b5ff65 is hsl(89deg 100% 70%);
#a3ff42 is hsl(89deg 100% 63%);
...
#498e00 is hsl(89deg 100% 28%);

要获得其他颜色渐变，您只需要更改色调。

这是一个可以尝试的片段。

#c6ff89 is hsl(89deg 100% 77%),
#b5ff65 is hsl(89deg 100% 70%);
#a3ff42 is hsl(89deg 100% 63%);
...
#498e00 is hsl(89deg 100% 28%);

 function colorChanged(h) {

    let s = 100;
    let l = 77;

    document.getElementById('deg').innerText = h;

    for (let color of document.getElementsByClassName('color')) {

        color.style.backgroundColor = `hsl(${h}deg ${s}% ${l}%)`;
        color.innerText = HSLToRGB(h, s, l);

        l -= 7;
    }
}

function HSLToRGB(h, s, l) {
    s /= 100;
    l /= 100;

    let c = (1 - Math.abs(2 * l - 1)) * s,
        x = c * (1 - Math.abs((h / 60) % 2 - 1)),
        m = l - c / 2,
        r = 0,
        g = 0,
        b = 0;

    if (0 <= h && h < 60) {
        r = c; g = x; b = 0;
    } else if (60 <= h && h < 120) {
        r = x; g = c; b = 0;
    } else if (120 <= h && h < 180) {
        r = 0; g = c; b = x;
    } else if (180 <= h && h < 240) {
        r = 0; g = x; b = c;
    } else if (240 <= h && h < 300) {
        r = x; g = 0; b = c;
    } else if (300 <= h && h < 360) {
        r = c; g = 0; b = x;
    }

    return "#" + 
      Math.floor((r + m) * 255).toString(16).padStart(2, '0') + 
      Math.floor((g + m) * 255).toString(16).padStart(2, '0') + 
      Math.floor((b + m) * 255).toString(16).padStart(2, '0');
}

colorChanged(89);

.color {
    width: 200px;
    height: 45px;
    background: black;
    margin-bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

从这里窃取的颜色转换：https : //css-tricks.com/converting-color-spaces-in-javascript/