計算褪色

Question

給定兩種顏色和ñ步驟，如何計算n種顏色，包括兩種給定的顏色以創建淡入淡出效果？

如果可能的話，僞代碼是首選，但這可能會在Java中實現。

謝謝！

Answer 1

將每種顏色分爲RGB分量，然後計算所需的各個步驟。

oldRed = 120; 
newRed = 200; 
steps = 10; 
redStepAmount = (newRed - oldRed)/steps; 

currentRed = oldRed; 
for (i = 0; i < steps; i++) { 
    currentRed += redStepAmount; 
} 

明顯延伸綠色和藍色。

Answer 2

問題是你想要發生什麼變化？如果轉成HSV色彩空間，並給出

FF0000和00FF00

它會從紅色變爲黃色過渡到綠色。

但是，如果您將「黑色」或其他某種顏色定義爲混合的中點，則必須先將該顏色設爲ff0000-> 000000-> 00ff00或通過白色進行調色：ff0000 - > ffffff - > 00ff00。

但是，通過HSV進行轉換可能很有趣，因爲您必須使用一些trig來將圓形圖映射到矢量組件中。

Answer 3

最簡單的方法是在顏色組件之間進行線性插值（參見nickf的響應）。請注意，眼睛是非常非線性的，所以它不一定會讓你看到你正在做出一些步驟。一些色彩空間試圖解決這個問題（CIE也許？），所以你可能想先變換到另一個色彩空間，插值，然後轉換回RGB或任何你使用的。

Answer 4

有兩個很好的相關問題，你還應該查看：

• Generating gradients programatically?
• Conditional formatting — percentage to color conversion

請注意，你通常能夠更好地在HSV色彩空間做這個，而不是RGB - 它爲人眼產生更令人愉悅的色彩（較低的碰撞或負光學屬性）。

祝你好運！

- 亞當

Answer 5

如果你想有一個融合，看起來像大多數顏色選擇器GUI小東西，你真的要轉換爲HSL或HSV。從那裏，你可能在每個維度都有線性插值。

試圖做任何插值直接在RGB色彩空間是一個壞主意。它的方式太非線性了（在這種情況下，伽馬校正不會起作用）。

Answer 6

對於那些尋找的東西，他們可以複製和粘貼。爲RGB顏色製作了一個快速功能。返回接近rgbColor2的單個顏色，數量爲ratio。

function fadeToColor(rgbColor1, rgbColor2, ratio) { 
    var color1 = rgbColor1.substring(4, rgbColor1.length - 1).split(','), 
     color2 = rgbColor2.substring(4, rgbColor2.length - 1).split(','), 
     difference, 
     newColor = []; 

    for (var i = 0; i < color1.length; i++) { 
     difference = color2[i] - color1[i]; 
     newColor.push(Math.floor(parseInt(color1[i], 10) + difference * ratio)); 
    } 

    return 'rgb(' + newColor + ')'; 
} 

Answer 7

如何this answer

- (UIColor *)colorFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor percent:(float)percent 
{ 
    float dec = percent/100.f; 
    CGFloat fRed, fBlue, fGreen, fAlpha; 
    CGFloat tRed, tBlue, tGreen, tAlpha; 
    CGFloat red, green, blue, alpha; 

    if(CGColorGetNumberOfComponents(fromColor.CGColor) == 2) { 
     [fromColor getWhite:&fRed alpha:&fAlpha]; 
     fGreen = fRed; 
     fBlue = fRed; 
    } 
    else { 
     [fromColor getRed:&fRed green:&fGreen blue:&fBlue alpha:&fAlpha]; 
    } 
    if(CGColorGetNumberOfComponents(toColor.CGColor) == 2) { 
     [toColor getWhite:&tRed alpha:&tAlpha]; 
     tGreen = tRed; 
     tBlue = tRed; 
    } 
    else { 
     [toColor getRed:&tRed green:&tGreen blue:&tBlue alpha:&tAlpha]; 
    } 

    red = (dec * (tRed - fRed)) + fRed; 
    green = (dec * (tGreen - fGreen)) + fGreen; 
    blue = (dec * (tBlue - fBlue)) + fBlue; 
    alpha = (dec * (tAlpha - fAlpha)) + fAlpha; 

    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha]; 
}