Warum ist dieser Farbverlauf so viel attraktiver als andere?

Ich habe an einer Site, die ich gerade entwickle, mit einigen Farbverläufen herumgespielt und mich wirklich für die Psychologie oder andere Bedeutung interessiert, die dahinter steckt, warum bestimmte Farben attraktiver erscheinen als andere.

Hier ist die Website im Moment:

Die Farbverläufe dort sehen für das Design ganz natürlich aus. Aber wenn ich anfange zu mischen und zu kombinieren, bekomme ich Folgendes:

Ich kann anscheinend keinen anderen anständigen Gradienten finden, der "natürlich" aussieht. Ich frage mich, was die Psychologie dahinter steckt, wie wir diese Farbmischungen wahrnehmen. Gibt es eine Art Regel, um Farben zu finden, die in einem Farbverlauf gut zusammenpassen? Ich kann mir vorstellen, dass es von dem Gefühl abhängt, nach dem Sie suchen. Ich schätze jeden Input!

Der Hauptunterschied zwischen dem ersten Beispiel und Ihren Experimenten besteht darin, dass das Original eine nicht annähernd so drastische Änderung des Farbtons abdeckt.

Der Wechsel von Goldgelb zu Magenta / Pink dauert etwa 1/6 Umdrehung am Farbkreis. Im Gegensatz dazu sind Ihre Experimente (orange-rot bis blau-violett, blau-violett bis gelb-grün und cyan bis blau-violett) alle mehr als eine Vierteldrehung.

So viel Veränderung wird nicht als einzelne Verschiebung einer Farbe, sondern als Fortschreiten durch mehrere Farben wahrgenommen. Da sich Ihr Verlauf in Ihren Kopfzeilen eher verdichtet hat, stellt dies eine erhebliche Veränderung dar und erklärt möglicherweise, warum es sich für Sie nicht "natürlich" anfühlt.

Wenn Sie eine andere Farbe für Ihre Hauptfarbblöcke "Ziel" haben möchten, wählen Sie eine benachbarte Farbe für den Beginn des Verlaufs. Wählen Sie beispielsweise für Blau-Violett als Endpunkt ein tiefes Blau oder ein Magenta als Startpunkt. Beginnen Sie für Gelbgrün als Endpunkt mit Hellgrün oder Rot.

Natürlich werden Sie immer noch unterschiedliche "Stimmungen" erhalten, abhängig von der Stimmung der beteiligten Farben - das Blau-Violett ist eine viel kühlere, ruhigere Farbe als das Rosa im Original. Aber zumindest sollten die Farbverläufe etwas weicher aussehen.

Da Sie fragen "Warum werden sie unterschiedlich wahrgenommen?", Ist hier eine weitere (sehr geekige) Sache zu beachten: die wahrgenommene Lumineszenz einer RGB-Farbe. Das ist schwer anzuwenden, also nimm meine Antwort fast nur als Trivia:)

Der Lumineszenzwert einer Farbe von gibt an, wie "beleuchtet" Sie diese wahrnehmen. Wenn die Farbe eine Glühbirne wäre, würde eine Farbe mit geringer Lumineszenz als schwach (40 W-Birne) wahrgenommen, während eine Farbe mit hoher Lumineszenz als sehr hell (100 W-Birne) wahrgenommen würde.

RGB-Farben werden in der Tat mit kleinen "Glühbirnen" angezeigt. Die Bildschirme bestehen aus winzigen "Glühbirnen", drei für jedes Pixel: R (ed), G (reen) und B (lue). Die spezifischen R-, G- und B-Werte einer Farbe geben an, wie hell jede kleine Glühbirne beleuchtet werden sollte, um die Illusion dieser Farbe zu erzeugen. Zum Beispiel wird die Farbe Orange RGB (255, 100, 0) erzeugt, indem die rote Glühbirne auf ihre maximale Stärke gedreht wird (255), die grüne Glühbirne halb dunkel gemacht wird (100) und die blaue Glühbirne ausgeschaltet wird (0).

Hier ist eine Illustration, die einige Farben zeigt und wie "hell" jede der RGB-Komponenten gemacht werden sollte, um die Illusion der Farbe zu erzeugen. Die kleinen Punkte unter jeder Farbe geben an, wie schwach oder hell die Komponente ist.

Wie Sie in der Abbildung sehen können, drehen Sie zum Beispiel die drei Komponenten auf das Maximum (255), um Weiß zu erzeugen. Diese Kombination der 3 winzigen "Glühbirnen" wird vom Auge als weiß wahrgenommen (was erklärt, warum ein großer Exkurs wäre). Zum Erstellen von Schwarz schalten Sie alle aus. Das ist einfach: kein Licht, keine Farbe.

Die Lumineszenz jeder Farbe wird berechnet, indem "wie hell" jede der 3 Komponenten addiert wird. Weiß wäre die Farbe mit der höchsten Lumineszenz, da die 3 Komponenten auf ihren Maximalwert gedreht werden. Schwarz, wäre der mit dem niedrigsten. Gelb hat die höchste Lumineszenz als Grün, da für Gelb maximal 2 Komponenten benötigt werden, für Grün jedoch nur eine. Mehr oder weniger könnte man das sagen

L = R + G + B

Es ist allerdings etwas komplizierter. Wenn Sie sich die Abbildung ansehen, werden Sie feststellen, dass die grüne Komponente heller erscheint. Tatsächlich wird es vom Auge als das hellste wahrgenommen. Blau hingegen wird als sehr dunkel empfunden. Die genaue Formel zur Berechnung der Lumineszenz berücksichtigt dies.

L = 0,2126 R + 0,7152 G + 0,0722 B

Hier ist noch einmal die Abbildung mit der berechneten Lumineszenz für jede Farbe.

Sie werden feststellen, dass Gelb, wie Ihr Auge sagen könnte, leuchtender ist als Orange, Orange jedoch mehr oder weniger leuchtend wie Magenta.

Jetzt habe ich die Farben von zwei Ihrer ursprünglichen Paletten genommen und deren Lumineszenz berechnet.

In dem ersten Fall, den Sie mögen, werden Sie bemerken, dass die Lumineszenz der ersten Farbe unten niedriger ist (125) als die der zweiten Farbe oben (200). Der Gradient wird dann als Zunahme der Leuchtkraft wahrgenommen, als würde er aufleuchten.

Im zweiten Fall gibt es keinen großen Unterschied, sodass der Gradient nur als Änderung des Farbtons wahrgenommen wird.

Im dritten Fall hat die untere Farbe eine höhere Lumineszenz als die obere, so dass der Gradient als Abnahme der Leuchtkraft wahrgenommen wird, als ob es sich um eine Dimmung handeln würde.

Dies würde erklären, warum das Ergebnis auch dann unterschiedlich wahrgenommen wird, wenn Sie 2 Farbtöne auswählen, die im Farbkreis relativ gleich weit voneinander entfernt sind wie die von Ihnen gewünschten.

Von http://www.colormatters.com/color-and-design/basic-color-theory

1 - Ein Farbschema basierend auf analogen Farben

Analoge Farben sind alle drei Farben, die in einem 12-teiligen Farbkreis nebeneinander liegen, z. B. Gelbgrün, Gelb und Gelb-Orange. In der Regel überwiegt eine der drei Farben.

2 - Ein Farbschema, das auf Komplementärfarben basiert

Komplementärfarben sind zwei Farben, die sich direkt gegenüberliegen, wie Rot und Grün und Rot-Lila und Gelb-Grün. In der obigen Abbildung gibt es verschiedene Variationen von Gelbgrün in den Blättern und verschiedene Variationen von Rotviolett in der Orchidee. Diese gegensätzlichen Farben sorgen für maximalen Kontrast und maximale Stabilität.

3 - Ein Farbschema, das auf der Natur basiert

Die Natur ist ein perfekter Ausgangspunkt für Farbharmonien. In der obigen Abbildung ergeben Rot, Gelb und Grün ein harmonisches Design, unabhängig davon, ob diese Kombination in eine technische Formel für Farbharmonie passt.

Füge nur AmeliaBRs Antwort hinzu (sollte ein Kommentar sein, aber ich möchte ein Bild posten). Eine Möglichkeit, Ihren Farbton zu "verschieben", aber den relativen Abstand zwischen Start- und Endfarbe beizubehalten, könnte das Farbton-Werkzeug von Photoshop sein.

Nehmen Sie das erste Bild (das mit dem gewünschten Farbverlauf) und öffnen Sie es in Photoshop. Öffnen Sie dann das Werkzeug Farbton / Sättigung ( Image->Adjustment->Hue SaturationoderCtr+U ) und spielen Sie mit dem ersten Schieberegler (Farbton). Dies verschiebt den Farbton des gesamten Bildes, behält jedoch das gleiche Verhältnis zwischen allen vorhandenen Farbtönen bei (insbesondere dem Start- und Endfarbton Ihrer Verläufe). Da die Rückseite Ihrer Benutzeroberfläche schwarz (oder neutral grau) ist, hat die Farbtonverschiebung keine Auswirkungen darauf.

Wenn Sie eine Kombination finden, die Ihnen gefällt, akzeptieren Sie einfach OKdie Farbton- / Sättigungsänderungen (Klicken ) und wählen Sie mit der Pipette (Drücken I) die Start- und Endfarbe des Verlaufs aus.

In diesem Beispiel habe ich den Farbton -155 verschoben und der Farbverlauf wechselt nun von Aquamarine Green zu Blue, einem kühlen, beruhigenden Farbverlauf mit nautischen Echos.

Allerdings hat die Farbwahrnehmung eine sehr persönliche Komponente. Was Sie für eine andere Person als "natürlich" empfinden, kann als Abweichung empfunden werden.