Erzeugen einer Reihe von Farben zwischen zwei Farben

15

Ist es möglich, bei einer gegebenen Startfarbe und einer gegebenen Endfarbe einen Bereich von Farben zwischen ihnen algorithmisch zu erzeugen? Wie kann ich zum Beispiel die Zwischenschattierungen erzeugen, wenn die hellen und dunklen Schattierungen von Blau / Grau am Anfang und Ende des Bilds unten angegeben sind?

Bildbeschreibung hier eingeben

Eine mögliche Lösung, über die ich nachdenke, besteht darin, einen Verlauf aus den beiden Farben zu erstellen und die Farbe dann an äquidistanten Punkten entlang dieses Verlaufs abzutasten. Ist das wahrscheinlich der beste Ansatz?

Ben Packard
quelle
2
Schauen Sie sich das an: graphicdesign.stackexchange.com/questions/75417/… Könnte es sich dann um ein Duplikat handeln?
Rafael
Ein weiterer guter Artikel zum Thema: vis4.net/blog/posts/avoid-equidistant-hsv-colors
Dorn
Dies ist sehr nahe daran, ein Duplikat dieser Stapelüberlauf-Frage zu sein
Dawood sagt, Monica am

Antworten:

13

Dies wird als Farbinterpolation bezeichnet . Es ist, was Steigungen unter der Haube tun. Sie können dies mit einer Vielzahl von Mitteln und Methoden tun. Wie genau die Ergebnisse interpoliert werden, hängt von der Methode ab.

Ich mache dies normalerweise für Webprojekte, die JavaScript verwenden, damit ich die Farben dynamisch ändern kann, wie in diesem Musik-Visualizer . Eine JavaScript-Implementierung mit einer sehr einfachen Methode zur linearen Interpolation mithilfe von RGB, die aus dem obigen Beispiel hervorgeht, sieht wie folgt aus:

Live-Demo

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

Welches wie folgt verwendet wird und ein Array der interpolierten Farben zurückgibt:

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

Sie können auch PhotoShop-Erweiterungen (und wahrscheinlich auch andere Programme) für die Farbinterpolation finden. Möglicherweise möchten Sie jedoch überprüfen, ob die Interpolationsmethode mit der gewünschten Methode übereinstimmt, da Sie für die Interpolation eine beliebige Funktion verwenden können.

Zach Saucier
quelle
2
Zach ... du bist so ein Freak ... dass Musik-Visualizer verdammt cool ist!
Rafael
@Rafael Ich habe ein paar andere gemacht, die dir auch gefallen könnten :)
Zach Saucier
Vielen Dank. Color Interpolationwar das, was ich brauchte. Ich habe hier einige Swift-Implementierungen gefunden - stackoverflow.com/questions/22868182/uico…
Ben Packard
2
Der obige Link ist defekt, aber der Beitrag kann hier für zukünftige Leser gefunden werden: UIColor Übergang basierend auf Fortschrittswert
Zach Saucier
23

Schauen Sie sich diese Antwort an. Wie kann man eine bestimmte Farbe etwas dunkler oder heller machen?

Wo Sie einfach die getrennten Werte jeder RGB-Komponente nehmen und die Werte teilen.

Wir haben jedoch ein Problem: Es gibt nicht nur einen Weg, um einen Farbübergang zu erzielen.

Bildbeschreibung hier eingeben

Der erste Ansatz gibt Ihnen die kürzeste Route (1), aber wahrscheinlich ist diese Route nicht die, die Sie benötigen.

Dies wird auch durch das Farbmodell oder die Logik beeinflusst. Im Lab * -Farbmodell sind beispielsweise Rot und Grün Komplementärfarben, sodass die kurze Route auf diesem Modell durch ein neutrales Grau verläuft (3).

Wenn Sie nur Farbtöne benötigen, ist die andere Antwort eine geeignete.

Rafael
quelle
5
Ich mag die Grafik mit den verschiedenen Interpolationsmethoden
Zach Saucier
Ich denke, das bedeutet, dass es eine Möglichkeit geben muss, die Pfadstrategie zu kodifizieren.
Bao Thien Ngo
10

Verwenden Sie eine Illustrator-Mischung in RGB oder CMYK:

  • erstellen 2 Formen jeweils mit dem Anfang und Ende Farbe (eine graue und eine schwarze in diesem Beispiel, aber wählen , was Sie brauchen)
  • gehe zu Object → Blend → Blend Optionsund tippe ein, wie viele Specified stepsdu dazwischen brauchst (20 in meinem Beispiel unten)
  • Markieren Sie Ihre beiden Objekte und wählen Sie Object → Blend → Make. Dadurch wird die Überblendung generiert , die Sie dann über in einzelne Objekte transformieren können Object → Expand. Dann können Sie jedes Zwischenobjekt mit einem eigenen Farbcode sehen.

mischen

Lucian
quelle
5

Dies ist eine Ergänzung zu den anderen Antworten.

Wenn Sie Farben in sRGB interpolieren, müssen Sie berücksichtigen, dass die RGB-Werte nicht linear in der Lichtintensität sind, sondern linear in der vom Menschen wahrgenommenen Lichtintensität. Dies erleichtert das Speichern von Werten, für verschiedene Farbvorgänge muss jedoch in den linearen Farbraum gewechselt werden.

Die menschliche Wahrnehmung der Lichtintensität erfolgt nach einem Potenzgesetz, also mit

linear = sRGB^2.2
sRGB = linear^(1/2.2)

kann verwendet werden, um zwischen den beiden zu transformieren. Dies verwendet einen Gammawert von 2,2, was dem Wert für sRGB entspricht. Weitere Informationen hierzu finden Sie in diesem Wikipedia-Artikel.

Eine detaillierte Analyse dieses Problems und Beispiele für falsche Implementierungen finden Sie hier . Eines davon ist ein Farbverlauf mit linearer und sRGB-Interpolation.

henje
quelle
Das ist eine Methode zum Interpolieren von sRGB-Werten, aber was eine Person tun sollte , hängt von dem gewünschten Effekt ab
Zach Saucier
Das ist richtig, aber Interpolation im linearen Raum ist das, was mit Licht im wirklichen Leben passiert. Es ist also am natürlichsten, dies zu tun.
Henje
1
@ZachSaucier die Anzahl der Menschen getan Interpolation oder in sRGB aus spezifisch ist Absicht Mischen ach so winzig im Vergleich zu der Anzahl , wie oft es Menschen (entweder von Unwissenheit oder Faulheit getan haben aus denken , sie sind es in RGB tun, oder (zu Recht oder nicht) zu denken, dass der Unterschied unwichtig ist).
Hobbs
1

Der Verlauf von Photoshop (oder gleichwertig "Überblenden" in Ai) wird bereits als eine Möglichkeit vorgestellt, einen linearen Farbübergang zwischen den Start- und Endfarben zu erzielen. Wie erhalten wir etwas Nichtlineares (einen gekrümmten Übergangspfad), ohne einen Skriptcode zu programmieren?

Eine Lösung besteht darin, den Verlaufsübergangspfad durch Anpassen von Ebenen oder Mischmodi oder durch beides zu ändern. Dies erzeugt wirklich eine kontinuierliche Transformation von der Startfarbe zur Endfarbe, wenn die modifizierenden Ebenen eine Ebenenmaske haben, die kontinuierlich ist und die Zuneigung am Anfang und am Ende = Null macht.

Hier ist eine recht komplexe Wendung. Die Ebene "Target alone" hat den Farbverlauf und die Ebene "Modifier" erzeugt eine kontinuierliche Farbverschiebung durch den Mischmodus "Color". Damit alles verdreht wird, ist der Modifier selbst ein Farbverlauf.

Mehr Verdrehung wird durch eine Einstellungsebene "Kurven" erzeugt, die Kontrast hinzufügen. Es hat die gleiche Ebenenmaske wie der Modifikator, aber das ist nicht obligatorisch. Jede Maske ist in Ordnung, wenn sie am Anfang und am Ende durchgehend und schwarz ist.

Es gibt einige nicht kontinuierliche Mischmodi und Kurven, die einen abrupten Sprung verursachen. Eines davon ist "Hue". Eine andere Möglichkeit, den Effekt zu verderben, ist "keine Änderung", ein sichtbarer konstanter Farbbereich, der durch Abschneiden auf alle Nullen oder alle 255 entsteht. Ich habe weder getestet noch berechnet, wie viel es in der Praxis hilft, den 48-Bit / Pixel-RGB-Modus zu verwenden. Vielleicht gar nicht, denn wir haben immer noch nur 24 Bit / Pixel auf dem Bildschirm.

Überleitung

user287001
quelle