Ще в той час усі 1337 дітей використовували текстові фейдери у чатах. Не знаю про вас, хлопці, але я хочу відчувати себе круто, як вони. Єдина проблема полягає в тому, що їхні старі сценарії та програми були сильно поєднані з програмним забезпеченням, для якого вони були створені, тому я не можу просто використовувати цю дивовижну функціональність там, де мені захочеться. Я також хочу, щоб рішення було легко портативним, тому вам знадобиться зробити код якомога меншим, щоб він міг розміститися на моїй дискеті (я б краще взяти з собою лише одну дискету, але якщо ваш вихідний код занадто великий Я можу перевезти більше одного : P ).

Вхідні дані

• Список кольорів (rgb, hex, назви тощо)
• Текст для форматування

Ваша програма повинна очікувати, що список кольорів містить щонайменше два кольори.
Формат тексту може бути будь-якої довжини більше нуля, а символи обмежуватимуться для друку ascii. (Підказка. Більш довгі введення тексту можуть вимагати повторного використання проміжних кольорів для послідовних символів)

Вихідні дані

Текст виводу не повинен відрізнятися від тексту введення будь-яким іншим способом, крім шрифту та / або розмітки / стилю (Примітка: якщо ваш вихід містить розмітку html, вам потрібно буде кодувати HTML введенням). Ви можете виводити текст з розміткою / стилем (теги стилів HTML, кольори консолей тощо) або зображенням зів’ялого тексту. Усі шістнадцяткові кольори повинні бути присутніми у висновку, якщо вхідне повідомлення не містить достатньо символів для задоволення цієї вимоги. Якщо це так, то зверніться до правил пріоритету, щоб визначити, які кольорові шестигранники повинні бути у вашому висновку. Порядок або ці кольори у вашому висновку все одно повинні бути порядком введення.

Правила пріоритету кольорів

1. У випадку, якщо вхід є одним символом, буде використаний перший колір
2. У випадку, якщо є лише два символи, буде використано перший і останній кольори
3. У випадку, якщо є більше трьох кольорів і більше кольорів, ніж символів, слід встановити пріоритет першого та останнього кольорів, а потім решти кольорів у їх введеному порядку.
4. У випадку, якщо символів більше, ніж кольорів, символи повинні зникати від одного кольору до іншого, використовуючи проміжні кольори

Приклади (правила пріоритету 1-3 відповідно):
# Кольори | Колір ₀ | ... | Колір _n | Текст
3 ff0000 0000ff ffff00 M-> -> ->
3 ff0000 0000ff ffff00 hi
4 ff0000 0000ff ffff00 0fff00 sup

Щоб було зрозуміло, колір тексту повинен переходити від однієї шестигранної до іншої кольорової. Вимкнення не повинно бути ідеально рівномірним, але воно не повинно бути різкою зміною кольору, якщо не вистачає символів, щоб гарно зів’янути. Як правило, це вицвітання досягається шляхом вибору проміжних кольорів для кожного з символів, збільшуючи / зменшуючи значення rgb на деякий інтервал, що визначається кількістю символів, з яким потрібно працювати, і різницею між кольорами. Наприклад, якщо нам знадобився один колір між (# ff0000) і (# 000000), ми можемо вибрати, як він розташований прямо посередині. Оптимальний вихід буде виглядати досить симпатично.

Приклад (правило пріоритету 4):
3 ff0000 ff7f00 f0ff00 To be or not to be, that is the question...-> -OR-

<span style="color:#ff0000;">T</span><span style="color:#ff0600;">o</span><span style="color:#ff0c00;"> </span><span style="color:#ff1200;">b</span><span style="color:#ff1800;">e</span><span style="color:#ff1e00;"> </span><span style="color:#ff2400;">o</span><span style="color:#ff2a00;">r</span><span style="color:#ff3000;"> </span><span style="color:#ff3600;">n</span><span style="color:#ff3c00;">o</span><span style="color:#ff4300;">t</span><span style="color:#ff4900;"> </span><span style="color:#ff4f00;">t</span><span style="color:#ff5500;">o</span><span style="color:#ff5b00;"> </span><span style="color:#ff6100;">b</span><span style="color:#ff6700;">e</span><span style="color:#ff6d00;">,</span><span style="color:#ff7300;"> </span><span style="color:#ff7900;">t</span><span style="color:#ff7f00;">h</span><span style="color:#fe8500;">a</span><span style="color:#fe8b00;">t</span><span style="color:#fd9100;"> </span><span style="color:#fc9700;">i</span><span style="color:#fb9d00;">s</span><span style="color:#fba400;"> </span><span style="color:#faaa00;">t</span><span style="color:#f9b000;">h</span><span style="color:#f9b600;">e</span><span style="color:#f8bc00;"> </span><span style="color:#f7c200;">q</span><span style="color:#f6c800;">u</span><span style="color:#f6ce00;">e</span><span style="color:#f5d400;">s</span><span style="color:#f4da00;">t</span><span style="color:#f4e100;">i</span><span style="color:#f3e700;">o</span><span style="color:#f2ed00;">n</span><span style="color:#f1f300;">.</span><span style="color:#f1f900;">.</span><span style="color:#f0ff00;">.</span> 

У своїй відповіді, будь ласка, вкажіть, як повинен відображатися ваш вихід (як html, у консолі, як зображення тощо).

^{* Усі чорні фони лише для кольорових акцентів і не потрібні}

Оцінка балів

Це код-гольф , тому найкоротша відповідь (у байтах) виграє.
Якщо вам вдасться додати зникнення до окремих персонажів, тоді я назавжди подумаю, що ви круті (але жодного бонусу забити, оскільки це не буде справедливо для деяких мов)

JavaScript (ES6), 290 байт

h=a=>f(a,a.shift());f=
(a,w)=>[...w].map((c,i)=>{l=w.length-1;m=a.length-1;s=o.appendChild(document.createElement('span'));s.textContent=c;s.style.color=`#${i?i-l?a[r=l%m,n=l/m|0,i<r*n+r?++n:i-=r,k=i/n|0,k++].replace(/./g,(c,d)=>((parseInt(c,16)*(n-i%n)+i%n*parseInt(a[k][d],16))/n|0).toString(16)):a[m]:a[0]}`;})

<textarea rows=10 cols=40 oninput="o.textContent='';h(this.value.split`\n`)">Type the text here and the colours on subsequent lines.
FF0000
00FF00
0000FF</textarea><div id=o>

Pyth, 126 байт

Обов’язкове середньоквадратичне середнє значення замість прямого середнього арифметичного.

L%"<span style=\"color:#%s\">%s</span>",smt.H+256s*255@d2ebhbMm+hG*-eGhGcdHH=Q^RL2Q+smsyMC,hdCgRlhdCedC,ctlQPzC,QtQy,ez?tlzeQh

Спробуйте в Інтернеті!

Вибірка зразка:

Java, 702 662 символи

Дві функції в гольф:

import java.awt.*;String f(Color C,char c){return"<span style=\"color:#"+Integer.toHexString(C.getRGB()).substring(2)+";\">"+c+"</span>";}String c(String t,String[]h){String r="";int l=h.length,e=t.length(),i=0,s=0,g=1,c=-1,p,q,u;double d,m=0,v;char[]T=t.toCharArray();Color C[]=new Color[l],H[],a,b;for(;i<l;)C[i]=Color.decode(h[i++]);if(l>e){H=java.util.Arrays.copyOfRange(C,0,e);H[e-1]=C[l-1];H[0]=C[0];C=H;l=e;}d=--e/(l-1.);for(;++c<e;){a=C[s];b=C[g];p=b.getRed()-a.getRed();q=b.getGreen()-a.getGreen();u=b.getBlue()-a.getBlue();v=m/d;r+=f(new Color(a.getRGB()+((int)(v*p)<<16|(int)(v*q)<<8|(int)(v*u))),T[c]);if(++m>d){m-=d;s=g++;}}return r+f(C[l-1],T[e]);}

Оскільки ніхто не може прочитати цього: тут обидві функції в неперевершеній версії класу:

import java.awt.*;

public class Q80554 {

    static String format(Color color, char character) {
        return "<span style=\"color:#" + Integer.toHexString(color.getRGB()).substring(2) + ";\">" + character + "</span>";
    }

    static String colorizeB(String text, String[] hexColors) {
        String result = "";
        int colorsLength = hexColors.length, textLength = text.length(), i, currentStartColorPos = 0, currentGoalColorPos = 1, currentCharPos = -1, diffColorRed, diffColorGreen, diffColorBlue;
        double difference, goneDifference = 0, relativeChange;
        char[] textArray = text.toCharArray();
        Color colors[] = new Color[colorsLength], changer[], currentStartColor, currentGoalColor;

        for (i = 0; i < colorsLength;)
            colors[i] = Color.decode(hexColors[i++]);

        if (colorsLength > textLength) {
            changer = Arrays.copyOfRange(colors, 0, textLength);
            changer[textLength - 1] = colors[colorsLength - 1];
            changer[0] = colors[0];

            colors = changer;
            colorsLength = textLength;
        }

        // fade
        difference = --textLength / (colorsLength - 1.); // space between colors    

        for (; ++currentCharPos < textLength;) {
            currentStartColor = colors[currentStartColorPos];
            currentGoalColor = colors[currentGoalColorPos];

            diffColorRed = currentGoalColor.getRed() - currentStartColor.getRed();
            diffColorGreen = currentGoalColor.getGreen() - currentStartColor.getGreen();
            diffColorBlue = currentGoalColor.getBlue() - currentStartColor.getBlue();

            relativeChange = goneDifference / difference;

            result += format(new Color(currentStartColor.getRGB() + ((int) (relativeChange * diffColorRed) << 16 | (int) (relativeChange * diffColorGreen) << 8 | (int) (relativeChange * diffColorBlue))), textArray[currentCharPos]);

            if (++goneDifference > difference) {
                goneDifference -= difference;
                currentStartColorPos = currentGoalColorPos++;                   
            }
        }

        // last character always has last color
        return result + format(colors[colorsLength - 1], textArray[textLength]);
    }
}

Тут ви маєте верхню межу для власного коду. Використання - зателефонувавши colorize(або c у версії для гольфу) та передайте текст та масив шістнадцяткових кольорових кодів. Функція поверне рядок з HTML-тегами, як це зробив ОП, тому вам потрібен певний спосіб вивести HTML.

Алгоритм простіше, як виглядає питання. Перший персонаж завжди отримує перший колір, останній завжди останній. Якщо у нас в тексті більше кольорів, ніж знаків, ми просто перебираємо текст і кольори та застосовуємо їх. Найцікавішою є частина із затуханням: я розпочав з того, щоб дізнатися, на якій відстані кольори є у тексті. Я в основному обчислюю різницю між червоним, зеленим та синім між двома заданими кольорами, а потім додаю частину цієї різниці до першого кольору, залежно від місця знака між кольорами. Якщо він залишає інтервал двох кольорів, ми починаємо з нового з наступних двох кольорів. Це повторюється для всіх, крім останнього символу, який, як ми знаємо, завжди є останнім кольором. Це дає дуже красиве вицвітання.

Це питання було дуже весело! Дякую!

Оновлення

Зараз я не розглядаю всі справи спеціально. Натомість я обрізаю кольори, якщо їх багато, і застосовую функцію збліднення до кожної струни. Якщо кольорів було більше, ніж тексту, то кольори будуть обрізані, а функція вицвітання буде працювати точно як просте відображення.