2

I have two color pickers (start, end) and I need to produce a color range from start to end. The problem I have is the stepping from one to the next. If it was just green I could go from 0-255 on the G channel but being I have 3 channels(rgb) it's rather confusing.

My first thought was to convert rrggbb (hex) to dec and just add to the result. I could then convert it back to RGB This gives me a nice rang in short bursts. For example I get a nice light yellow to dark yellow but after that it goes to blue.

var val = Number( this.gridIDMap.cellAt( j, i ).innerHTML );
val = Math.floor( val );
var r = 256 - Math.floor( val / ( 256 * 256 ) );
var g = 256 - Math.floor( val / 256 ) % 256;
var b = 256 - Math.floor( val % 256 );
this.gridIDMap.cellAt( j, i ).style.backgroundColor = "rgba(" + r + "," + g + "," + b + ",.25)";

So I'm guessing I could do this with hue saturation but not sure how to do so. Ideally it would be grate to go from blue to red and get a blue to purple to red effect. I'm sure that is possible but it may require a 3rd party include. I have not found anything that does this so far. I don't have to use decimal the color picker has a few options (RGB, hsl, and hex). https://github.com/PitPik/tinyColorPicker

Sean Green
  • 103
  • 1
  • 7
  • You might want to consider using CSS3's [Gradient](http://www.colorzilla.com/gradient-editor/) options. – glend May 13 '15 at 15:19
  • I believe this will only color an element. I need to change the color of a background cell based on the value in the cell along with taking the range in to consideration. I think the Gradient option is a way to produces an effect. I need to create the effect from data. Correct me if I'm wrong? – Sean Green May 13 '15 at 15:31
  • This is typically done by linearly interpolating between all the channels. You can treat them independently, so the code becomes very simple. To get better colours, though, a nice approximation is to interpolate between the square of the two colour values instead (per-channel), and take the square root of that. – Cameron May 13 '15 at 15:33
  • 1
    sifriday, I think rainbow.colourAt(x) will do the trick. Thx for the suggestion. – Sean Green May 13 '15 at 15:40
  • awesome. Then if you don't mind I will flag this as a dupe, mostly because that other answer already has a good discussion and a range of ideas and I doubt we can add anything more here? – sifriday May 13 '15 at 16:12

1 Answers1

3

If you wanted a function to give you a range(array) of colors between two colors, here's another option at JSFiddle

Here's the main code for it:

var GColor = function(r,g,b) {
    r = (typeof r === 'undefined')?0:r;
    g = (typeof g === 'undefined')?0:g;
    b = (typeof b === 'undefined')?0:b;
    return {r:r, g:g, b:b};
};
var createColorRange = function(c1, c2) {
    var colorList = [], tmpColor;
    for (var i=0; i<255; i++) {
        tmpColor = new GColor();
        tmpColor.r = c1.r + ((i*(c2.r-c1.r))/255);
        tmpColor.g = c1.g + ((i*(c2.g-c1.g))/255);
        tmpColor.b = c1.b + ((i*(c2.b-c1.b))/255);
        colorList.push(tmpColor);
    }
    return colorList;
};
Micaiah Wallace
  • 1,101
  • 10
  • 17