JSFiddle - React, Tailwind, and code Playground

HTML

<table class="results" cellspacing=0>
</table>

JavaScript

var n = 20;
var red = 0;
var green = 0;
var blue = 0;
var cur = 0;

for(var i=0; i<n; ++i){
    var $r = $('<tr></tr>');
    for(var j=0; j<n; ++j){
        cur = ((i>j) ? ((i+j<n) ? (n-(j+1))*(j+1)*4-(i-(j+1)) : i*(n-i)*4-(i-(n-i))-(j-n+i+1)) : ((i+j<n) ? i*(n-i)*4-(i-(n-i))+i+j-n+1 : (n-(n-j-1))*(n-j-1)*4+(j-(n-j))+i+(j-n)+3));
        red = cur * (640/(n*n));
        green = cur * (255/(n*n));
        blue = cur * (16/(n*n));
        $r.append('<td style="width: 24px; height: 24px; background-color: rgb('+Math.round(red)+','+Math.round(green)+','+Math.round(blue)+'); color: white; text-align: center">'+cur+'</td>');
    }
    $('.results').append($r);
}