选择两种颜色并在其间获得 n 种颜色答案

【问题标题】：Pick two colors and get n colors in between选择两种颜色并在其间获得 n 种颜色
【发布时间】：2016-08-07 08:45:28
【问题描述】：

我想在一个边界内选择给定数量的颜色。例如，我将#fff 和#000 作为边界，并希望在它们之间使用 5 种颜色。如何实现得到#fff, color 2, ..., color5, #000，均匀分布？

我想根据图表中项目的动态数量为图表工具选择颜色。只是想知道这是否可以通过代码轻松完成，或者可能已经有一个在线工具？否则我会手动选择颜色；）

【问题讨论】：

您可以使用 rgb 代替 hex 例如 color1: rgb(255,255,255) color2: rgb(0,0,0) 颜色介于：rgb(50,50,50), rgb(100,100,100), RGB(150,150,150)
这有点奇怪，但我做了一次，通过制作一个高 n 宽的画布，对其应用渐变，然后相应地获取像素数据。效果很好，基本上就是你想要的
并不奇怪，实际上很聪明；）
这也非常好，因为我不希望颜色在接近尾声时才改变，所以我制作了自定义渐变，我的代码只是不断检查颜色而不需要 if 来判断颜色是否变了

【解决方案1】：

你可以写一个函数来获取一个区间，然后用区间和它们的倍数组成一个数组。

function getInbetweenColors(color1, color2, count) {
    var array = [color1],
        c1 = parseInt(color1.substring(1), 16),
        c2 = parseInt(color2.substring(1), 16),
        interval = (c2 - c1) / count,
        i;

    for (i = 1; i < count; i++) {         
        array[i] = Math.floor(c1 + i * interval).toString(16);
        while(array[i].length < color1.length-1) {
           array[i]= '0' + array[i];
        }
        array[i]= '#' + array[i];
    }
    array[count] = color2;
    return array;
}

document.write('<pre>' + JSON.stringify(getInbetweenColors('#fff', '#000', 5), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(getInbetweenColors('#0391f5', '#27333d', 5), 0, 4) + '</pre>');

【讨论】：

这看起来也很酷，但是当我尝试使用我的两种基色时，并非所有颜色都有效；例如尝试使用#0391f5 和#27333d。我认为这是因为第一种颜色以 0 开头。
这是结果的预期长度。它现在需要第一个参数的长度。

【解决方案2】：

chroma.js 是一个很棒的库，可以做到这一点！ - 查看.scale方法here

【讨论】：