Get n scales (RGB) of a color in javascript

Question

I have a color which I want n scales from it.

Initially, I just wanted 5 colors:

So I did this way:

/* given color */
var level3 = {
    red: 225,
    green: 127,
    blue: 39
}

var level1 = {};
level1.red = parseInt(level3.red / 3);
level1.green = parseInt(level3.green / 3);
level1.blue = parseInt(level3.blue / 3);

var level2 = {};
level2.red = level1.red * 2;
level2.green = level1.green * 2;
level2.blue = level1.blue * 2;

var level4 = {};
level4.red = level3.red + parseInt((255 - level3.red) / 3);
level4.green = level3.green + parseInt((255 - level3.green) / 3);
level4.blue = level3.blue + parseInt((255 - level3.blue) / 3);

var level5 = {};
level5.red = level3.red + parseInt(((255 - level3.red) / 3) * 2);
level5.green = level3.green + parseInt(((255 - level3.green) / 3) * 2);
level5.blue = level3.blue + parseInt(((255 - level3.blue) / 3) * 2);

It works. (Illustration)

The problem is if I need more than five levels of the given color.

Is it possible to get n levels with a function? Returning an array of RGBs or something like that?

Thanks for your time.

Answer 1

You can try something like this:

function colorScale(color, n) {
  var scale = [];
  color = [color.red, color.green, color.blue];
  for(var i=1; i<=n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v * i / n);
    }));
  for(var i=1; i<n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v + (255-v) * i / n);
    }));
  return scale;
}

Note I don't know how it should behave when you want an even number of colors. Therefore, I only defined it for odd numbers, as follows: if you want m colors, use the parameter n = (m+1)/2. For example, if you want 5 colors, use n = 3.

function colorScale(color, n) {
  var scale = [];
  color = [color.red, color.green, color.blue];
  for(var i=1; i<=n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v * i / n);
    }));
  for(var i=1; i<n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v + (255-v) * i / n);
    }));
  return scale;
}
var wrapper = document.getElementById('scale');
function paint() {
  wrapper.innerHTML = '';
  colorScale({
    red: +document.getElementById('red').value,
    green: +document.getElementById('green').value,
    blue: +document.getElementById('blue').value
  }, +document.getElementById('n').value
            )
  .forEach(function(color) {
    var el = document.createElement('div');
    el.style.backgroundColor = 'rgb(' + color + ')';
    wrapper.appendChild(el);
  });
}
paint();
document.addEventListener('change', paint);

label {
  display: block;
}
#scale > div {
  padding: 10px;
  border: 1px solid #000;
  float: left;
}

<label>n = <input id="n" value="3" /></label>
<label>red = <input id="red" value="225" /></label>
<label>green = <input id="green" value="127" /></label>
<label>blue = <input id="blue" value="39" /></label>
<div id="scale"></div>