Wie kann man eine Farbe auf verschiedenen Hintergründen gleich aussehen lassen?

16

Hintergrund zur Farbwahrnehmung:

Aufgrund der Beschaffenheit des menschlichen Auges und der visuellen Verarbeitung durch das Gehirn besteht die optische Täuschung, dass die gleiche Farbe je nach Hintergrund unterschiedlich aussieht .

Es ist als Kontrasteffekt bekannt (siehe Abbildung unten). Mittlere Rechtecke sind identisch:

Bildbeschreibung hier eingebenQuelle: Wikimedia

Eine Illustration (und ein Bericht) der NASA macht den Effekt der Hintergrundfarbe noch deutlicher:

Bildbeschreibung hier eingeben

Bildbeschreibung hier eingebenQuelle: NASA Color Usage Research Lab

(Beachten Sie, dass die beiden obersten Farben im zweiten Bild gleich aussehen, sich jedoch vollständig unterscheiden.)


Was ist mit Webdesign?

Meine Frage betrifft das Webdesign, speziell in diesem Fall die Farbe von Linktexten auf verschiedenen Hintergründen.

Wie kann man für eine gegebene Textfarbe die Komplementärfarbe finden, um sie auf einem bestimmten Hintergrund gleich erscheinen zu lassen?


Schauen wir uns ein Beispiel für diese Frage an:

Betrachten Sie mein Beispiel unten mit gelbem Text #FFF000auf den folgenden Hintergründen:

  • weiß #FFFFFF,
  • schwarz #000000,
  • und grau #555555.


Vergleichen Sie Farben auf verschiedenen Hintergründen für Webdesigntext


Sieht wie erwartet überhaupt nicht gleich aus. (Hier können Sie die .PSD-Datei anzeigen und herunterladen. )

Wie können wir es auf allen drei gleich aussehen lassen? Natürlich muss der Text auf dem weißen Hintergrund ein dunkleres Gelb sein, und der Text auf dem grauen muss in Bezug auf Farbton und Farbton angepasst werden. (Der umgebende Text wird sich auch darauf auswirken - aber das ist wahrscheinlich schwerer zu erklären.)

Kann diese perfekte Farbe auf der Basis von Hex, RGB oder einem anderen System berechnet werden? Hier liegt der Kern dieser Frage, da sie viel effizienter wäre als die manuelle Approximation.

Baumr
quelle
Sie müssen Gelb verwenden. Beachten Sie, dass sie in Ihren Beispielen Farben verwendet haben, die denen ähneln, die sie anders aussehen lassen möchten.
Hanna
2
@ Johannes, was meinst du?
Baumr
In Ihrem ersten Beispiel handelte es sich bei den verwendeten Farben um Graustufen. In Ihrem zweiten Beispiel wurde Ihr Purpur durch die Verwendung eines sehr hellen Purpurs blauer dargestellt. Dann stoßen Sie in Ihrem gelben Beispiel auf Weiß-, Grau- und Schwarzgelb. Ich sage also, Sie müssen stattdessen Gelb verwenden, damit Ihr Gelb auf verschiedenen Hintergründen gleich aussieht.
Hanna
Es fällt mir schwer, das zu erklären, ich entschuldige mich.
Hanna

Antworten:

10

Es scheint , wie Sie für die analog suchen Komplementärfarben , aber in der Leichtigkeit Raum eher als Farbton . Soweit ich das beurteilen kann, kann es keine solche allgemeine Zuordnung geben.

Angenommen, Sie könnten den Effekt kompensieren, indem Sie eine lineare Korrelation zwischen Hintergrund und Vordergrund annehmen, sodass der Vordergrundtext beim Abdunkeln um den gleichen Betrag heller wird. Ich gehe davon aus, dass der Farbton unverändert bleibt. Es wird immer einen Mittelpunkt geben, an dem der Hintergrund und der Vordergrund dieselbe Farbe haben.

Betrachten Sie als Beispiel Schwarz auf Weiß. Die umgekehrte Helligkeit für dieselben Farbtöne ist weiß auf schwarz, aber wenn Sie versucht haben, einen Vordergrund für jeden Zwischenhintergrund desselben Farbtons zu finden, treffen Sie auf der Mitte Grau auf Grau und können überhaupt nichts sehen.

Aus dem gleichen Grund kann ich nicht erkennen, dass es eine einigermaßen einfache Zuordnung - auch eine verlustbehaftete - geben kann.

Leichtigkeit Rennen mit Monica
quelle
1
Um dies zu lösen, müssten wir ein Modell des (durchschnittlichen) menschlichen Auges
erstellen
1
@Baumr: Könnte eine gute Doktorarbeit sein :)
Lightness Races mit Monica