JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="ctrl">
    <table>
        <tr ng-repeat="arr in data">
            <td ng-repeat="value in arr" ng-attr-style="background: #{{getColor(value, arr)}};">
                {{value}}
            </td>
        </tr>
    </table>
</div>

CSS

table, table tr{
    border: black 1px solid;
    
}

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrl', function($scope){
    var arr = [];
    for(var i = 0; i < 10; i++){
        var innerArr = [];
        var len = 10;
        for(var k = 0; k < len; k++){
            innerArr.push(k);
        }
        arr.push(innerArr);
    }
    $scope.data = [Array(45).fill(0).map((e,i)=>i+1)];
    $scope.getColor = function(item, array){
        var h = item / array.length ;
        return RGBtoHex(HSVtoRGB(h, 1, 1))
        
    };
    function RGBtoHex(color){
        var r = color.r.toString(16);
        if(r.length < 2) r = '0' + r;
        var g = color.g.toString(16);
        if(g.length < 2) g = '0' + g;
        var b = color.b.toString(16);
        if(b.length < 2) b = '0' + b;
        return r + g + b;
    }
    
function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (h && s === undefined && v === undefined) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return {
        r: Math.floor(r * 255),
        g: Math.floor(g * 255),
        b: Math.floor(b * 255)
    };
}    
});
angular.bootstrap(document, ['app']);