Untitled

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <input type="number" id="ar" value="255" />
    <input type="number" id="ag" value="255" />
    <input type="number" id="ab" value="255" />
    <br/>
    <input type="number" id="br" value="255" />
    <input type="number" id="bg" value="255" />
    <input type="number" id="bb" value="255" />
    <br/>
    <textarea id="text"></textarea>
    <button type="button" onclick="submit()">Submit</button>
    <blockquote id="out"></blockquote>

    <script>
        function submit() {
            const arEl = document.getElementById('ar');
            const agEl = document.getElementById('ag');
            const abEl = document.getElementById('ab');
            const brEl = document.getElementById('br');
            const bgEl = document.getElementById('bg');
            const bbEl = document.getElementById('bb');
            const textEl = document.getElementById('text');
            const outEl = document.getElementById('out');
            const ar = Number.parseInt(arEl.value);
            const ag = Number.parseInt(agEl.value);
            const ab = Number.parseInt(abEl.value);
            const br = Number.parseInt(brEl.value);
            const bg = Number.parseInt(bgEl.value);
            const bb = Number.parseInt(bbEl.value);
            const text = textEl.value;
            outEl.innerText = '';
            for (let i = 0; i < text.length; ++i) {
                const t = (Math.sin(i / 5) + 1) / 2;
                const r = ar * (1 - t) + br * t;
                const g = ag * (1 - t) + bg * t;
                const b = ab * (1 - t) + bb * t;
                const colStr = Math.round(r).toString(16).padStart(2, '0')
                    + Math.round(g).toString(16).padStart(2, '0')
                    + Math.round(b).toString(16).padStart(2, '0');
                outEl.innerText += '[color=#' + colStr + ']' + text[i] + '[/color]';
            }
        }
    </script>
</body>

</html>