Javascript Color Palette Generator - Formula for generating array of intermediate colors in Javascript given two hex (#abc123) v

admin管理员组

文章数量:1387460

Given 2 or 3 base colors, I am trying to generate intermediate colors, so that 2-3 bees anywhere from 5 to 50, like this chart below.

Any ideas? I'm using Highcharts making a pie chart.

Given 2 or 3 base colors, I am trying to generate intermediate colors, so that 2-3 bees anywhere from 5 to 50, like this chart below.

Any ideas? I'm using Highcharts making a pie chart.

• javascript
• colors

Share Improve this question Follow edited Dec 18, 2010 at 19:16 Lance Pollard asked Dec 18, 2010 at 18:42 Lance PollardLance Pollard 79.6k9898 gold badges333333 silver badges610610 bronze badges 3

• 2 color case is simple, just use linear interpolation. I'm a bit puzzled with 3 color one, though (lerp there too?). Could you provide more concrete example of this? – Juho Vepsäläinen Commented Dec 18, 2010 at 18:50
• Say I just have red, blue, and green, maybe even a fourth color (yellow). I guess I could just do red-blue, blue-green, green-yellow, yellow-red, and just do interpolation between the sets of two, then just keep them in order. – Lance Pollard Commented Dec 18, 2010 at 18:53
• No really an answer but this article on generating color cycles using some snazzy math may help others out with similar problems: krazydad./makecolors.php (using sine waves) – Quickredfox Commented Mar 29, 2011 at 18:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

first, thanks to @Juho Vepsäläinen

I applyed to my project like this

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) will show like below(example):

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

Core idea: use linear interpolation.

Example:

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;
}

In addition you'll probably find it useful to have some form of abstraction for Color. You can get you color into a nicer form by instantiating it like "var col = new Color('#ff00ff');". After that you can access its rgb and hsv values easily.

Here's an example (untested) that shows how it should work in practice:

// 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);

You could do a linear interpolation between two colors, say (r1,g1,b1) to (r2,g2,b2). Use a parameter t that takes values 0-1. You get a smooth transition between the two colors by using (r,g,b)=(r1,g1,b1)+(r2-r1,g2-g1,b2-b1)*t

本文标签：