Générateur de texte arc-en-ciel coloré

<div class="css-rainbow-text">Texte arc-en-ciel CSS</div>

.css-rainbow-text {
    background: linear-gradient(90deg, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
}

<div class="animated-rainbow">Dégradé arc-en-ciel animé</div>

.animated-rainbow {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    background-size: 500px 100%;
    animation: rainbow-move-left-right 5s linear infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@keyframes rainbow-move-left-right {
    0%   { background-position: 0 0; }
    100% { background-position: -500px 0; }
}

<div class="animated-rainbow-2">Couleur arc-en-ciel animée</div>

.animated-rainbow-2 {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    animation: rainbow-color-change 3s linear infinite alternate;
}

@keyframes rainbow-color-change {
    0%, 100% { color: #ff0000 }
    14%      { color: #ff8b00 }
    28%      { color: #e8ff00 }
    42%      { color: #5dff00 }
    56%      { color: #00b9ff }
    70%      { color: #5d00ff }
    84%      { color: #e800ff }
}

<div id="js-rainbow-1">Texte arc-en-ciel JavaScript</div>
<div id="js-rainbow-2">Texte faible luminosité</div>

#js-rainbow-1, #js-rainbow-2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 50px;
}

class RainbowText {
    constructor(elements, saturation = 100, lightness = 50) {
        this.saturation = this.clamp(saturation, 20, 100);
        this.lightness = this.clamp(lightness, 20, 99);
        // script - https://www.html-code-generator.com/fr/html/generateur-texte-arc-en-ciel
        const elementArray = elements instanceof NodeList ? Array.from(elements) : [elements];
        elementArray.forEach(element => this.applyColor(element));
    }

    clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }

    applyColor(element) {
        const text = element.textContent;
        if (!text) return;
        const chars = [...text];
        const hueStep = 360 / Math.max(chars.length - 1, 1);
        const html = chars.map((char, index) => {
          const hue = Math.round(hueStep * index);
          const color = `hsl(${hue}, ${this.saturation}%, ${this.lightness}%)`;
          const safe = char
          .replace(/&/g, '&')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
          return `<span style="color:${color}">${safe}</span>`;
        }).join('');
        element.innerHTML = html;
    }
}

// Exemple d'utilisation :
// style par défaut
new RainbowText(document.getElementById("js-rainbow-1"));

// ajuster la luminosité des couleurs : saturation = 40, lightness = 50
new RainbowText(document.getElementById("js-rainbow-2"), 40, 50);