Алгоритм плавного цветового перехода

простая линейная интерполяция значений R,G,B сделает это.

trumpetlicks показал что изображение, которое вы использовали, не является чистой линейной интерполяцией. Но я думаю, что интерполяция дает вам эффект, который вы ищете. Ниже я показываю изображение с линейной интерполяцией сверху и Ваше исходное изображение внизу.

и вот код (Python), который его создал:

for y in range(height/2):
    for x in range(width):
        p = x / float(width - 1)
        r = int((1.0-p) * r1 + p * r2 + 0.5)
        g = int((1.0-p) * g1 + p * g2 + 0.5)
        b = int((1.0-p) * b1 + p * b2 + 0.5)
        pix[x,y] = (r,g,b)

цветовое пространство HSV не очень хорошее цветовое пространство для плавных переходов. Это потому что h значение, оттенок, просто используется для произвольного определения различных цветов вокруг "цветового колеса". Это означает, что если вы идете между двумя цветами далеко друг от друга на колесе, вам придется окунуться в кучу других цветов. Совсем не гладко.

было бы гораздо разумнее использовать RGB (или CMYK). Эти "компонентные" цветовые пространства лучше определены для плавных переходов потому что они представляют, сколько каждого "компонента" требуется цвету.

линейный переход (см. ответ @trumpetlicks) для каждого значения компонента R, G и B должен выглядеть "довольно хорошо". Что-то большее, чем "довольно хорошо", потребует от фактического человека настройки значений, потому что есть различия и асимметрии в том, как наши глаза воспринимают значения цвета в разных цветовых группах, которые не представлены ни в RBG, ни в CMYK (или в любом стандарте).

изображение Википедии используя алгоритм, который использует Photoshop. К сожалению, этот алгоритм не является общедоступным.

Я исследовал это, чтобы построить , которая принимает изображение в оттенках серого в качестве входных и colorises его искусственно в соответствии с цветовой палитрой:

■■■■ вход в градации серого ■ ■ ■ выход ■■■■■■■■■■■■■■■

как и многие другие решения, алгоритм использует линейная интерполяция чтобы сделать переход между цветами. С пример,smooth_color_transition() следует вызывать со следующими аргументами:

QImage input("gradient.jpg");

QVector<QColor> colors;
colors.push_back(QColor(242, 177, 103)); // orange
colors.push_back(QColor(124, 162, 248)); // blue-ish

QImage output = smooth_color_transition(input, colors);    
output.save("output.jpg");

сравнение исходное изображение VS выход из алгоритма можно увидеть ниже:

(выход)

(оригинал)

визуальные артефакты, которые можно наблюдать на выходе, уже присутствуют на входе (оттенки серого). Этот входное изображение получило эти артефакты, когда оно было изменено до 189x51.

вот еще один пример, который был создан с более сложной цветовой палитры:

■■■■ вход в градации серого ■ ■ ■ выход ■■■■■■■■■■■■■■■

мне кажется, было бы проще создать градиент, используя значения RGB. Сначала вы должны рассчитать изменение цвета для каждого значения на основе ширины градиента. Для значений R, G и B необходимо выполнить следующий псевдокод.

if (redValue1 == redValue2) {
    redDifference = 0
} else {
    redDifference = absoluteValue(redValue1 - redValue2) / widthOfGradient
}

if (redValue1 > redValue2) {
    redDifference *= -1
}

затем вы можете отобразить каждый пиксель с этими значениями следующим образом:

for (int i = 0; i < widthOfGradient; i++) {
    int r = round(redValue1 + (i * redDifference))
    // ...repeat for green and blue

    drawLine(i, r, g, b)
}

Я знаю, что вы указали, что используете C++, но я создал JSFiddle, демонстрирующий эту работу с вашим первым градиентом как пример: http://jsfiddle.net/eumf7/