Generate color gradient array using Javascript

Question

Note: I want to accomplish this using a simple js, without using a library.

I have a text with inputs are specified below

const str = "The Gradient Legacy";
var n = str.length
startColor = "#CF0A0A";
endColor = "#0000CF";
stopColors = ["#78FF9C","#00FF22"]; //This is dynamic, when this array is empty ignore it

The expected output: Array of color codes of length = str.length, where each value represents the character color of the given input string.

I have tried with, I am not sure how can I incorporate the start end and stop

function getGradientArrayForGivenText()
{
    if (phase == undefined) phase = 0;
    var center = 128;
    var width = 127;
    var result = [];
    var frequency = Math.PI * 2 / str.length;
    for (var i = 0; i < str.length - 1; ++i) {
        var red = Math.sin(frequency * i + 2 + phase) * width + center;
        var green = Math.sin(frequency * i + 0 + phase) * width + center;
        var blue = Math.sin(frequency * i + 4 + phase) * width + center;
        result.push("#"+red+green+blue)
    }
    return result;
}