JSFiddle - React, Tailwind, and code Playground

HTML

<p id="container"></p>

CSS

div {
    display: inline-block;
    width: 20px;
    height: 20px;
}

JavaScript

var black = [0, 0, 0],
   	white = [255, 255, 255],
    container = document.getElementById('container');

function getColorAt (percent, startColor, endColor) {
    var gap = startColor.map(function(val, idx) {
        return Math.abs(endColor[idx] - val);
    });
    return gap.map(function(val) {
    	return Math.round(val * percent / 100); 
    });
}

function createDivs (num, startColor, endColor) {
    var colors = [startColor],
        percent,
        i;
    
    for (i = 0; i < num - 2; i++ ) {
        percent = 100 - ((i + 1) * 100 / (num-2+1));
        colors.push(getColorAt(percent, startColor, endColor));
    }
    colors.push(endColor);
    colors.forEach(createDiv);
}

function createDiv (color) {
    var div = document.createElement('DIV');
    div.style.backgroundColor = 'rgb(' + color.join(',') + ')';
    container.appendChild(div);
}

createDivs(10, white, black);