Erzeugen einer Reihe von Farben zwischen zwei Farben

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?

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?

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.

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.

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.

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.

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.

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.