Javascript Color Palette Generator - Формула для генерации массива промежуточных цветов в Javascript с учетом двух шестнадцатеричных (# abc123) значений?

Question

Учитывая 2 или 3 базовых цвета, я пытаюсь сгенерировать промежуточные цвета, так что 2-3 становится где угодно от 5 до 50, как показано в приведенной ниже таблице.

Есть идеи?Я использую Highcharts для создания круговой диаграммы.

Answer 1

Основная идея: использовать линейную интерполяцию.

Пример:

function lerp(a, b, fac) {
    var ret = [];

    for(var i = 0; i < Math.min(a.length, b.length); i++) {
        ret[i] = a[i] * (1 - fac) + b[i] * fac;
    }

    return ret;
}

Кроме того, вам, вероятно, будет полезно иметь некоторую форму абстракции для Цвет ,Вы можете придать цвету более приятный вид, создав его как "var col = new Color ('# ff00ff');".После этого вы можете легко получить доступ к его значениям rgb и hsv.

Вот пример (не проверенный), который показывает, как он должен работать на практике:

// this func returns n colors (begin, <interpolated colors>, end)
function lerpColors(begin, end, n) {
    var ret = [];

    for(var i = 0; i < n; i++) {
        var fac = i / (n - 1);

        ret.push(lerp(a.toRGBArray(), b.toRGBArray(), fac));
    }

    return ret;
}

var col1 = new Color('#ff0011'); // some red
var col2 = new Color('#00ff11'); // some green

var colors = lerpColors(col1, col2, 7);

Answer 2

сначала благодаря @Juho Vepsäläinen

Я подал заявку на мой проект, как это

function lerp(a, b, fac) {
    var ret = [];

    for(var i = 0; i < Math.min(a.length, b.length); i++) {
        ret[i] = a[i] * (1 - fac) + b[i] * fac;
    }

    return new Color().setRGB(ret[0], ret[1], ret[2]).toString();
}

function lerpColors(begin, end, n) {
    var ret = [];

    for(var i = 0; i < n; i++) {
        var fac = i / (n - 1);
        ret.push(lerp(begin.toRGBArray(), end.toRGBArray(), fac));
    }

    return ret;
}

var paletteSize = 300;
var palette = lerpColors(
    new Color('#C6DBEF'),
    new Color('#3182BD'),
    paletteSize
);

console.log (palette) будет отображаться как показано ниже (пример):

['002b36', '073642', '586e75', '657b83', '839496', '93a1a1', 'eee8d5', 'fdf6e3']

Answer 3

Вы можете выполнить линейную интерполяцию между двумя цветами, скажем, (r1, g1, b1) - (r2, g2, b2). Используйте параметр t, который принимает значения 0-1. Вы получаете плавный переход между двумя цветами, используя (r, g, b) = (r1, g1, b1) + (r2-r1, g2-g1, b2-b1) * t