Berechne ein Farbverblassen

Question

Gegeben zwei Farben und n Schritte, wie kann man n Farben einschließlich der zwei gegebenen Farben berechnen, die einen Verblassungseffekt verursachen?

Wenn möglich, wird Pseudo-Code bevorzugt, aber dies wird wahrscheinlich in Java implementiert.

Danke!

Answer 1

Teilen Sie jede Farbe in ihre RGB-Komponenten auf und berechnen Sie dann die einzelnen erforderlichen Schritte.

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

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

Offensichtlich erweitern, dass für grün und blau.

Answer 2

Die Frage ist, welche Transformation möchten Sie auftreten? Wenn Sie den HSV-Farbraum umsetzen in und

FF0000 gegeben und 00FF00

Es wird grün bis gelb von Rot übergehen.

Wenn Sie jedoch "schwarz" oder einen anderen Farbton als Mittelpunkt der Mischung definieren, müssen Sie zuerst auf diese Farbe schattieren: ff0000-> 000000-> 00ff00 oder weiß: ff0000 -> ffffff - > 00ff00.

Das Umwandeln über HSV kann jedoch Spaß machen, weil Sie ein bisschen trig verwenden müssen, um die kreisförmige Karte den Vektorkomponenten zuzuordnen.

Answer 3

Am einfachsten ist eine lineare Interpolation zwischen den Farbkomponenten (siehe Antwort von Nickf). Seien Sie sich bewusst, dass das Auge stark nichtlinear ist, so dass es nicht unbedingt aussieht, dass Sie gerade Schritte machen. Einige Farbräume versuchen, dies zu beheben (CIE vielleicht?), Also möchten Sie vielleicht zuerst in einen anderen Farbraum transformieren, interpolieren und dann zurück in RGB oder was auch immer Sie verwenden.

Answer 4

Es gibt zwei gute ähnliche Fragen, die Sie auch überprüfen sollen:

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

Bitte beachten Sie, dass Sie in dem HSV-Farbraum sind oft besser dran, dies zu tun, anstatt RGB - erzeugt für das menschliche Auge angenehmere Farben (geringere Kollisionswahrscheinlichkeit oder negative optische Eigenschaften).

Viel Glück!

-Adam

Answer 5

Wenn Sie eine Mischung, die etwas wollen, wie die meisten Farbauswahl GUI-Widgets aussieht, wollen Sie wirklich HSL oder HSV zu übersetzen. Von da an ist es wahrscheinlich in jeder Dimension linear interpoliert.

Versuchen alle Interpolationen direkt im RGB-Farbraum ist eine schlechte Idee. Es ist viel zu nichtlinear (und nein, Gammakorrektur wird in diesem Fall nicht helfen).

Answer 6

Für diejenigen, die etwas suchen, können sie kopieren und einfügen. Hat eine schnelle Funktion für RGB-Farben gemacht. Gibt eine einzelne Farbe zurück, die ratio näher an rgbColor2 ist.

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

Wie wäre es 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]; 
}