Warum ist dieser Farbverlauf so viel attraktiver als andere?

24

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:

Ursprüngliche Site-Anmeldung Ursprünglicher Hauptknotenpunkt der Site

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:

Anderer Steigungsversuch Anderer Steigungsversuch Anderer Steigungsversuch

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!

Hayden McAfee
quelle
2
Dies ist eine rein subjektive, meinungsbasierte Frage. Nur weil Sie das Gefühl haben, dass einige Farbverläufe besser sind, bedeutet dies nicht, dass es andere tun.
Scott
6
Ich bin mit Scott einverstanden und werde so weit gehen, zu antworten: "Warum sehen sie gut aus?" mit "Wer sagt, dass sie gut aussehen?" Aber das ist subjektiv. Mein objektiver Kommentar lautet: Ich garantiere Ihnen, dass Sie die Farben im Kontext des gesamten Bildschirms, der den hellgrünen Fensterrand enthält, bewerten. Diese Farbe allein beeinträchtigt Sie in Bezug auf bestimmte Farboptionen im Ansichtsfenster.
Horatio
Sehr gute Punkte sowohl auf dem Browser-Skin als auch auf der blauen Farbe. Ich würde stimmen, wenn ich den Repräsentanten hätte! Ich werde diese im Vollbildmodus betrachten, um diese Verzerrung zu vermeiden.
Hayden McAfee
Was mir heute aufgefallen ist. Alle diese Farbverläufe sind mit unterschiedlichen Variationen von LAB-Paaren beim Drehen entlang A möglich. Wenn Sie mit Photoshop arbeiten, klicken Sie in der Farbauswahl arechts auf das Optionsfeld und spielen Sie mit dem vertikalen Schieberegler auf der Palette. Die meisten (alle?) Der hier angegebenen Kombinationen befinden sich bei den verschiedenen Werten der AAchse. Ich bin mir nicht sicher, ob dies einen wissenschaftlichen Hintergrund hat, aber es war nur eine Beobachtung.
Qix

Antworten:

34

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

Farbkreis gesättigter Farbtöne

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.

AmeliaBR
quelle
Ich habe den Farbtonversatz für die beiden Originalfarben berechnet und einen Wert von 96 erhalten (von 360 möglichen Farbtonwerten). Also etwa eine Vierteldrehung um das Farbrad. Ich fing an, andere Farbwerte mit dem gleichen Unterschied zu finden, und trotzdem fühlten sich die Werte seltsamer an, wenn auch natürlicher. Vergib mir, dass ich mit Farben und dergleichen nicht vertraut bin, aber kannst du dir einen bestimmten Grund dafür vorstellen? Vielleicht sind sie nur Farben einer anderen Stimmung. i.imgur.com/utU1Oex.png
Hayden McAfee
In diesem Fall habe ich das Gefühl, dass es weniger um den Farbverlauf als um die endgültige Farbe geht. Das helle Grün ist ziemlich unangenehm. Vergleichen Sie es mit der Version im @ cockypup-Test, die ein viel weicheres (weniger gesättigtes / helles) Grün aufweist. Es ist viel schwieriger, die Stimmungen von Farben zu quantifizieren, aber im Allgemeinen sind weniger gesättigte oder sekundäre Farben etwas ruhiger als leuchtende Rot- und Grüntöne. Es wird sehr subjektiv, aber es gibt viele Ressourcen, viele mit Beispielen für gute Farbkombinationen.
AmeliaBR
4
Hier ist noch etwas zu beachten: Kontrast. Gelb ist die hellste Farbe mit maximalem Kontrast zu Schwarz. In Ihrem ersten Beispiel ist Gelb nur die Spitze Ihres Farbverlaufs. Es ragt nicht heraus. Es fühlt sich fast wie ein Highlight an der Spitze an. Es hilft, das Auge vom unteren zum oberen Rand des Farbverlaufs zu bewegen. In Ihrem dritten Beispiel ist Gelb die Hauptfarbe des Verlaufs. Der Körper des Farbverlaufs ragt heraus. Die Spitze des Gradienten, die kulturell als Maximalwert gelesen wird, fühlt sich weniger wichtig an als der Körper. Das Auge kämpft zwischen hoch und runter. Dies könnte dazu führen, dass es weniger natürlich aussieht.
cockypup
29

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.

Bildbeschreibung hier eingeben

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.

Bildbeschreibung hier eingeben

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.

Bildbeschreibung hier eingeben

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.

cockypup
quelle
Fantastische Resonanz! Vielen Dank für die klare Erklärung; Meine Antwort scheint wirklich die Kombination dieser Antworten zu sein.
Hayden McAfee
Dies ist eine unglaubliche Antwort. Ich bin mir sicher, dass dies in Kombination mit Haydens Reaktion zu fantastischen Ergebnissen führen kann.
Qix
2
Beachten Sie, dass dies durch das Display-Gamma etwas kompliziert ist. Um einen genauen Lumineszenzwert für eine RGB-Anzeigefarbe zu erhalten, sollten Sie zuerst eine Gammakorrektur anwenden , um die R / G / B-Werte in einen linearen Farbraum zu konvertieren, bevor Sie sie mit Ihrer Formel mitteln. Für ein typisches Anzeige-Gamma von 2,2 lautet die korrekte Formel somit L = (0,2126 R ^ 2,2 + 0,7152 G ^ 2,2 + 0,0722 B ^ 2,2) ^ (1 / 2,2).
Ilmari Karonen
4

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.

user3437670
quelle
1) Dunkelgrün bis hellgelb. Wie ein getöntes Graustufenbild. 2) Rot v / s Spring Green / Cyan. Orange v / s Azure. Indigo / Violett gegen Gelb. Einer der beiden sollte für zusätzlichen Kontrast weniger gesättigt sein als der andere. 3) Beachten Sie, dass das Rot dunkler und gesättigter ist als die grün-gelbe Kombination, die auch einen Farbverlauf von dunkelgrün nach hell limonengelb aufweist.
Locoluis
3

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.

Bildbeschreibung hier eingeben

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.

cockypup
quelle
Ich verstehe, das ist ein guter Weg, sich dem anzunähern. Vielleicht sollte ich ein paar farbtheoretische Kurse belegen, um eine bessere Vorstellung davon zu bekommen, wie bestimmte Farben im Allgemeinen wahrgenommen werden!
Hayden McAfee