// Die Lineare Interpolation wie in meinem Beitrag beschrieben.
// Interpoliert zwischen beleibig-dimensionalen "Vektor"-Arrays a und b.
// Gibt einen Vektor (bzw. ein Array) mit dem interpolierten Wert zurück.
function lerp(t, a, b) {
    return a.map((_, i) => a[i] + t * (b[i] - a[i]));
}

// Erzeugt einen einzelnen Farbcode aus einem RGB-Array mit 3 Elementen jeweils zwischen 0 und 1.
function rgb_to_color_code(rgb) {
    return "#" 
        + Math.round(rgb[0] * 255).toString(16).padStart(2, "0")
        + Math.round(rgb[1] * 255).toString(16).padStart(2, "0")
        + Math.round(rgb[2] * 255).toString(16).padStart(2, "0");
}

// Generiert den farbigen Text. Dazu wird die aktuelle t-Position im Text (text_t) bestimmt und
// falls diese in einem neuen Farbintervall von text_colors liegt, die aktuellen Farben, zwischen
// denen interpoliert (a und b) wird, angepasst.
function make_color_text(text, text_colors) {
    if (!text_colors || !text_colors[0])
        return "$" + text + "$";
    // Start-Farbe. Diese ist erstmal null, da auch möglich ist, erst bei einer späteren
    // Textposition mit Farben zu beginnen. Farbcodes werden nur erzeugt, wenn eine
    // Startfarbe gesetzt ist.
    let a_t = null;
    let a = null;
    let b_t = text_colors[0][0];
    let b = text_colors[0][1];
    return "$" + text.split("").reduce(
        (result, c, i) => {
            // Aktuelle t-Position im Text (t = 0 für Anfang und t = 1 für Ende des Texts).
            const text_t = i / (text.length - 1);
            
            // Falls eine nächste Farbe angegeben wurde und t-Position im Text größer/gleich
            // der in text_colors angegebenen t-Position ist ...
            while (text_colors[1] && text_t >= text_colors[0][0])
            {
                // ... dann wird das Array ein Element nach vorne verschoben, die
                // vorherige End-Farbe zur neuen Start-Farbe und das nun erste Element
                // im Array zur neuen End-Farbe.
                text_colors.shift();
                a_t = b_t;
                a = b;
                b_t = text_colors[0][0];
                b = text_colors[0][1];
            } // das ist übrigens eine while-Schleife für den Fall, dass mehr Farben definiert wurden,
              // als es Buchstaben im Text gibt. In dem Fall werden dann einfach Farben übersprungen.
                
            if (a)
            {
                const t = (text_t - a_t) / (b_t - a_t);
                return result + "\\color{" + rgb_to_color_code(lerp(t, a, b)) + "}{" + c + "}";
            }
            else
                return result + c;
        },
        ""
    ) + "$";
}

const text = "Einen Farbverlauf (schwarz-rot-gold) programmieren:";

// Array mit [t, farbe]-Paaren für beliebige Farbverläufe mit beliebig vielen Farben.
// t = 0 repräsentiert den Textanfang und t = 1 für das Ende des Textes.
const text_colors = [
    [0, [0, 0, 0]],
    [0.5, [1, 0, 0]],
    [1, [1, 1, 0]]
];

console.log(make_color_text(text, text_colors));

Embed on website

To embed this program on your website, copy the following code and paste it into your website's HTML: