Es ist sehr schwierig, gute Farben für Infografiken zu wählen. Wir werden versuchen, dieses Problem zu lösen.
Nachdem Sie diesen Artikel gelesen haben, werden Sie sich sicherer in Ihrer Farbauswahl fühlen. Und wenn Sie überhaupt keinen Sinn für Farbe haben, dann sind dies nur Empfehlungen für gute Kombinationen. Lassen Sie uns über häufige Farbfehler sprechen, die uns überall umgeben, und wie wir sie vermeiden können.
Dieser Artikel hilft Ihnen nicht dabei, gute Farbverläufe oder Schattierungen zu finden. Es wurde entwickelt, um schöne, gestochen scharfe Farben für verschiedene Kategorien von Informationen (z. B. Kontinente, Branchen, Vogelarten) in Liniendiagrammen, Kreisdiagrammen, Balkendiagrammen usw. bereitzustellen .
FiveThirtyEight, , Pudding, New York Times, The Economist Akkurat
Ich werde viel über Sättigung, Helligkeit und Farbton sprechen. Dies sind HSB-Farbräume (Farbton, Sättigung, Helligkeit) oder HSV-Farbräume (Farbton, Sättigung, Wert):
- Der Farbton reicht von 0 ° bis 360 °, dies ist Ihr typisches Farbrad: ⬤ ⬤ ⬤
- Die Sättigung reicht von 0% (grau) bis 100% (Superfood bunt !!): ⬤ ⬤ ⬤
- Die Helligkeit / der Wert ändert sich von 0% (schwarz) auf 100% (tatsächliche Farbe): ⬤ ⬤ ⬤
Zum Konvertieren von Farben HEX (z.B. # CC0000) oder RGB (z
rgb(207, 176, 58)) zu HSB / HSV, mit einem Werkzeug wie colorizer.org .
Der Verwandte von HSB / HSV ist der HCL- Farbraum . Es gibt die gleichen Parameter (Farbton, Chroma = Sättigung, Helligkeit), aber näher an "wie wir Farben wirklich sehen". Unser Datawrapper-Service verwendet den HCL-Farbraum im Farbwähler:
Da in Adobe Photoshop oder colorizer.org keine HCL vorhanden ist, bezieht sich jede Erwähnung von Grad (z. B. 0 °) oder Prozent hier auf den HSB / HSV-Farbraum.
Okay, lass uns anfangen.
Erweitern Sie Ihr Verständnis von Farben
Sie denken vielleicht: „Für ein Diagramm benötige ich fünf Farben. Also benutze ich grün, gelb, blau und rot. Und ... hmm ... vielleicht orange? Oder lila! "
Wenn Sie seit dem Malen Ihres Malbuchs als Kind nicht mehr an Farben gedacht haben, ist dieser Gedanke sinnvoll. Deshalb schreibe ich diesen Artikel, um Ihnen zu sagen, dass es tatsächlich mehr Blumen gibt.
Schauen Sie sich dieses Diagramm an und vergleichen Sie es mit den Hauptfarben C ⬤ ⬤ ⬤ ⬤ ⬤ :
Katzen oder Hunde? Autor: Nadia Bremer
Die Farben auf der Karte sind völlig unterschiedlich. Nadia verwendet Rot ⬤ , was sich von normalem Rot ⬤ unterscheidet . Grün ⬤ - ist es ... kannst du es überhaupt grün nennen ?
Bevor Sie die Regeln einführen, möchte ich Sie ein wenig erschrecken: Es können buchstäblich Tausende von Farben verwendet werden. Es gibt gelblich rot ⬤ , bläulich rot ⬤ und alles dazwischen. Es gibt Grau ⬤ , aber es gibt auch kühles Grau ⬤ und warmes Grau ⬤ . Und dann ist da noch die Farbe Blau. So viel Blau! Wie dieses ⬤ , dieses ⬤ , dieses ⬤ , dieses ⬤ und dieses ⬤ . Und wir haben noch nicht über Orange und Gelb gesprochen.
Du hast vielOptionen. Dies bedeutet, dass Sie in einem kleinen Bereich des Farbkreises bleiben können und noch viele Optionen übrig sind.
Tanze nicht um das Farbrad herum
Sie müssen keine Farben aus dem gesamten Farbkreis übernehmen, z. B. ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ . Das Diagramm sieht professioneller und damit zuverlässiger aus, wenn nur wenige Farben und angrenzende Töne verwendet werden.
An dieser Stelle ist es sinnvoll, das Farbrad zu betrachten. Hierfür eignet sich Adobe Color oder Color Calculator .
Farbrechner zur Auswahl harmonischer Kombinationen
Viele dieser Werkzeuge bieten harmonische Farbkombinationen. Einer von ihnen heißt "Quadrat" oder "Notizbuch". Benutze es nicht . Es werden zu viele Töne erzeugt, die vermieden werden sollten.
Im Video verwende ich das Paletton- Farbwerkzeug , beginnend mit einer Notebook-Kombination und dann abnehmend. Beachten Sie, wie schöner die Farbkombinationen sind.
Wenn der Abstand klein genug ist, verwenden Sie meistens Komplementär- oder Komplementärfarben. Und das ist eine gute Wahl! Viele komplementäre Farbpaare arbeiten hervorragend zusammen. Verwenden Sie im Zweifelsfall immer Komplementärfarben und deren Nachbarn .
Machen wir es also - diesmal mit Adobe Color:
Unsere zusätzlichen Farben in Adobe Color
Unsere Farben sind im Farbkreis entgegengesetzt und ergänzen sich daher deutlich. Hurra! Sie sind aber auch unbrauchbar: Die beiden orangefarbenen sind sich zu ähnlich. Und alles sieht so ... hell aus.
Hier müssen Sie die Sättigung und Helligkeit ändern.
Verwenden Sie Sättigung und Helligkeit, damit die Töne funktionieren
Sättigung und Helligkeit sind genauso wichtig wie Farbton. Tatsächlich können Sie neue Farben erstellen, indem Sie einfach die Sättigung und Helligkeit ändern. Hier sind zwei Farbpaare mit demselben Ton, nur mit unterschiedlicher Sättigung und Helligkeit: ⬤ ⬤ / ⬤ ⬤ (wenn Sie den Ton ein wenig ändern, sind die Ergebnisse sogar noch besser: ⬤ ⬤ / ⬤ ⬤ ). Kehren wir
zu unserer Farbkombination zurück: ⬤ ⬤ ⬤ ⬤ . Nach dem Spielen mit Sättigung und Helligkeit sieht es so aus: Passendere
Komplementärfarben in Adobe Color
I entsättigten Hellcyan light und Hellorange ⬤und machte alle Farben dunkler außer dem hellen Orange. Verdammt, damit kannst du schon arbeiten!
Wenn Ihre Farbkombination also unvollständig erscheint, müssen Sie nicht sofort einen weiteren Ton hinzufügen. Ändern Sie zuerst die Sättigung und Helligkeit - und sehen Sie, was passiert. Folgendes habe
ich mit all diesen Farbpaletten gemacht: ⬤ ⬤ ⬤ ⬤ und ⬤ ⬤ ⬤ ⬤ ⬤ und ⬤ ⬤ ⬤ ⬤ . Alle ergänzen sich ungefähr und alle haben unterschiedliche Sättigung und Helligkeit.
Verwenden Sie warme Farben und Blau
Infografik-Designer lieben besonders eine andere Kombination: Gelb / Orange / Rot und Blau . Schauen Sie sich zum Beispiel das Portfolio der South China Morning Post oder dieses von The Economist (PDF) an : Sie verwenden diese Farben viel häufiger als Lila oder Grün.
Drei Seiten der South China Morning Post
Der Grund dafür ist, dass diese warmen Farben plus Blau für die Unterscheidung von Kategorien sehr vielseitig sind. Gelb, Orange und Rot sehen sehr gut zusammen aus, aber die Leute nehmen sie immer noch als unterschiedliche Farben wahr : ⬤ ⬤ ⬤ ist genau das, was wir für Kategoriefarben wollen. Und Blau ist flexibler als jeder andere Ton: viel Blau, egal wie dunkel ⬤oder leicht, ⬤ reich ⬤ oder nicht gesättigt ⬤ , sieht gut aus, beruhigend und professionell.
Und sie sind verfügbar: Farbenblinde Menschen können leicht zwischen Blau und Orange / Rot unterscheiden.
Verwenden Sie daher im Zweifelsfall Orange / Rot mit Blau.
Wenn Sie Grün verwenden, machen Sie es gelb oder blau
Vibrierende Grün ist ein Sechstel auf dem Farbkreis, von etwa 90 ° ⬤ bis 150 ° ⬤ , mit einem Peak bei 120 ° ⬤ . Mit diesen Farben finden Sie jedoch keine gute Infografik. Warum?
Erstens ist Grün selbst nur sehr dunkel. Und das Aufhellen des Grüns wird zu unangenehmem Neon ⬤ . Um einen guten Ton zu erhalten, müssen Sie das Grün viel aufhellen und entsättigen - mehr als bei anderen Farben. Genau das macht die Washington Post mit ihrem Grün - hier:
„Wie Trump Obamas Vermächtnis zurückdrängt “. Die Washington Post
ist 142 ° grün, aber nur zu 14% gesättigt. Gleicher Farbton bei gleicher Helligkeit bei 100% Sättigung: ⬤ . So.
Und denken Sie an farbenblinde Menschen: Reines Grün in Kombination mit Rot, Orange oder Braun ist für sie schwer zu unterscheiden.
Wenn Sie also Grün verwenden, machen Sie es ein wenig gelb oder ein wenig blau. Sie können dies in den Beispielen am Anfang des Artikels sehen: Alle Grüns außer ⬤ haben einen Ton von mehr als 160 ° ( dh sie sind blauer) ⬤ ⬤ less oder weniger als 60 ° ( dh mehr gelb) ⬤ ⬤ . In diesem Projekt, das wir bereits gesehen haben, verwendet Nadia sowohl gelbgrün als auch blaugrün:
Katzen oder Hunde? Autor: Nadia Bremer
Sieht so aus, als könnten Sie sie in Infografiken in zwei verschiedenen Farben verwenden: eine Win-Win-Situation!
Vermeiden Sie reine Farben
Die „reinen“ Töne befinden sich im Farbkreis genau 60 °, 120 °, 180 °, 240 °, 300 ° oder 360 ° / 0 °:
Hier ein Beispiel: In HSV / HSB beträgt der Farbtonwert dieses hellen Blaus ⬤ 180 °, der Wert Die Sättigung beträgt 67% und der Helligkeitswert 91%. Sie können auch die RGB-Werte Ihrer Farbe anzeigen: Wenn mindestens zwei Werte übereinstimmen, ist die Farbe "rein". Zum Beispiel unsere ⬤ ist
rgb(77, 232, 232).
Um die Farben natürlicher und für das Auge angenehmer zu gestalten, können Sie entweder die Sättigung der reinen Farben ändern oder sie dunkler machen. Wenn Sie helle, gesättigte Farben wünschen, wählen Sie Mischfarben , die mindestens 5-10 ° von den sauberen Farben entfernt sind.
Im obigen Bild haben Rot und Orange, Blau und Grün die gleiche Sättigung und Helligkeit. Der einzige Unterschied ist in Ton: red ⬤ (0 °), blau ⬤ (240 °) und Grün ⬤ (120 °) erscheinen saftiger als Orange ⬤ (40 °), mittelblau ⬤ (211 °) und bläuliches Grün ⬤ (170 °).
Vermeiden Sie helle, gesättigte Farben
Die lebendigen Farben werden die Aufmerksamkeit der Leser auf sich ziehen. Aber diese Leser werden es Ihnen nicht danken. Die meisten Menschen spannen sich ein wenig an, wenn sie Farben wie diese sehen: „Sehr gesättigte, lebendige Farben wären NICHT für ernsthafte, vertrauensvolle oder ruhige [Kommunikation] geeignet“, erklären Bartram, Patra und Stone in ihrem Artikel Affective Color in Infographics ( PDF ) aus dem Jahr 2017. ...
Wenn sich die Farben einer Sättigung von 100% und einer Helligkeit von 100% nähern, sind sie höchstwahrscheinlich zu hell. Dies gilt definitiv für Volltonfarben wie ⬤ ⬤ ⬤ ⬤ .
"Aber ich habe schon einmal eine so verrückte Farbe gesehen, und sie sehen gut aus" - Sie sagen und werden Projekte wie diese nennen:
Artikel New York Times über Wiedergabelisten
ArtikelBloomberg Bankruptcy Pudding Celebrity
Article
Wenn man die Farben in diesen Beispielen mit ⬤ ⬤ ⬤ ⬤ vergleicht , sind sie weniger gesättigt oder dunkler. 100% gesättigt und 100% leuchtend grüner ⬤ wird weniger in der New York Times gesättigten ⬤ und auch weniger gesättigt und dunkler Blo in BloombergArtikel und in Pudding Artikeln ⬤ .
Sie behalten den lustigen, aufmerksamkeitsstarken Effekt heller Farben bei, sind aber auch augenschonender.
Es funktioniert alles, weil Pudding, die New York Times und Bloomberg großartige Designer haben.Vermeiden Sie im Zweifelsfall 100% Sättigung bei 100% Helligkeit .
Kombinieren Sie Farben mit unterschiedlicher Helligkeit
Manchmal stoße ich auf Infografiken, insbesondere auf Flächendiagramme, bei denen benachbarte Elemente dieselbe Helligkeit haben. Sie können dies leicht überprüfen: Konvertieren Sie einfach Ihre Farben in Schwarzweiß (z. B. mit unserem Tool ). Wenn jeder die gleiche graue Farbe hat, ist die Helligkeit gleich.
Zum Beispiel ⬤ ⬤ ⬤ in der äußersten linken Diagramm sieht aus wie ⬤ ⬤ ⬤ in Graustufen.
Um solch einen unangenehmen Umfang zu vermeiden, gibt es zwei Möglichkeiten:
- « »: , , , : ⬤⬤⬤. : ⬤⬤⬤
- , ,
Ich empfehle die erste Option (Sie können auch einen weißen Rand einfügen, wenn Sie möchten): Die Farben werden dynamischer und der Farbenblinde wird Ihnen dankbar sein. In der Tat wird sich jeder bei Ihnen bedanken, unabhängig von seiner Farbunterscheidung.
In der Realität können Sie Farben für Kategorien richtig einstellen, indem Sie Farben aus folgenden Verläufen auswählen:
Viridis-Farbschemata
Alle diese Verläufe wechseln von hell nach dunkel, sodass die Farben unterschiedliche Helligkeiten haben: have ⬤ ⬤ ⬤ ⬤ oder ⬤ ⬤ ⬤ ⬤ ⬤ . Wenn Ihnen dieser Ansatz gefällt, probieren Sie diesen Farbpalettengenerator aus .
Machen Sie die Farben gleichermaßen "bunt"
In Ihren Infografiken möchten Sie häufig Farben hervorheben. Es gibt verschiedene Möglichkeiten, dies zu erreichen. Farben zeichnen sich durch folgende Eigenschaften aus:
- weil sie viel dunkler sind ⬤ ⬤
- weil sie viel leichter sind ⬤ ⬤
- weil sie intensiver sind ⬤ ⬤
- weil sie sauberer sind ⬤ ⬤
Normalerweise möchten Sie jedoch nur eine oder zwei Farben hervorheben. Der größte Teil des Restes sollte mehr oder weniger gleichmäßig sichtbar sein .
Wenn Sie Farben mit unterschiedlicher Helligkeit verwenden (unterschiedlich in Graustufen), müssen Sie diese ausgleichen. Versuchen Sie, helle Farben zu entsättigen. Fügen Sie der Dunkelheit mehr Sättigung hinzu .
Oder wählen Sie einen weniger reinen Farbton: Im obigen Bild sind Grün blue und Blau ⬤ sehr rein, daher habe ich sie abgedunkelt (so sehen sie bei 100% Helligkeit aus: ⬤ ⬤ ).
Dann wollte ich Rot hinzufügen ... aber das leuchtende Rot ist zu intensiv als reiner Farbton (von 0 °) ⬤ ⬤ ⬤ . Ich hatte also zwei Möglichkeiten:
- verdunkeln Sie es einfach: ⬤ ⬤ ⬤ .
- Bewegen Sie den Farbton (und nur den Farbton) um 30 °, um ihn orangefarbener zu machen ⬤ ⬤ ⬤ .
Ich habe den zweiten gewählt, um ihn etwas freundlicher zu gestalten. Aber beide Optionen funktionieren.
Vermeiden Sie zu geringen Kontrast zum Hintergrund
Eine überraschend große Anzahl von Infografiken verwendet Pastellfarben auf hellem Hintergrund. Sie sind oft nicht sehr gesättigt und schrecklich leicht.
Dies führt zu Problemen: Wenn Sie mit kleinen Bereichen, Linien und Punkten arbeiten, sind helle und entsättigte Farben schwer zu unterscheiden. Aber selbst wenn die Lesbarkeit kein Problem darstellt - zum Beispiel für große Gebiete - sollte Ihre Infografik einen guten Kontrast zum Hintergrund bilden, um sicher zu sagen: "Hey, ich bin hier und habe etwas zu sagen." Folgendes
tun, wenn die Farben zu entsättigt und zu hell sind ⬤ ⬤ ⬤ :
- Erhöhen Sie die Sättigung: ⬤ ⬤ ⬤
- Machen Sie sie dunkler: ⬤ ⬤ ⬤
- Oder machen Sie beides, um die besten Ergebnisse zu erzielen : ⬤ ⬤ ⬤
Dies ist natürlich auch Geschmackssache. Wenn Sie jedoch der Meinung sind, dass die Farben zu pastellfarben sind, versuchen Sie einfach, sie satter und dunkler zu machen. Mal sehen, was passiert. Und wenn es gut geht, lass es so.
Vermeiden Sie zu viel Kontrast zum Hintergrund
Das Gegenteil ist auch der Fall: Machen Sie die Farben nicht zu dunkel und gesättigt vor einem hellen Hintergrund. Versuchen Sie im Zweifelsfall, die Farben aufzuhellen, die Sättigung zu beseitigen und zu sehen, was passiert.
Wählen Sie einen ausreichend entsättigten Hintergrund
Sobald Sie die Farben herausgefunden haben, scheint ein bunter Hintergrund eine gute Idee zu sein. Dieser Hintergrund hat jedoch zwei große Nachteile: Erstens lenkt er leicht von den Daten ab. Zweitens schränkt es den potenziellen Farbumfang extrem ein und ist daher schwierig zu bearbeiten. Je gesättigter der Hintergrund ist, desto komplexer ist er. Daher ist es besser, entsättigte Farben zu wählen. Hier einige Grundregeln für den HSB / HSV-Farbraum:
- Wenn Sie einen hellen Hintergrund wünschen, halten Sie sich von Farben mit weniger als 95% Helligkeit und mehr als 7% Sättigung fern.
- Wenn Sie einen dunklen Hintergrund wünschen, halten Sie die Sättigung unter 20%. Auch geht nicht völlig schwarz - halten Sie die Helligkeit zwischen 10% und 25%.
Kopieren Sie einfach die Farben oder versuchen Sie, sie zu verstehen
Es ist schwer, selbst gute Farben zu fühlen und zu wählen. Es ist also vollkommen in Ordnung, nur schöne Kombinationen zu kopieren. Im Ernst, es ist nichts Schändliches daran zu stehlen. Ich habe einen ganzen Artikel darüber geschrieben, wo man sich von Farben inspirieren lässt: Filme, Künstler, Farbpaletten anderer Leute usw. (und andere Infografiken sind eine großartige Quelle).
Wenn Sie intuitiv verstehen möchten, welche Farben gut miteinander funktionieren, versuchen Sie Folgendes: Analysieren Sie sie. Hier sind einige Möglichkeiten , es zu tun:
Foto Baum niko Fotos auf Unsplash
- , , , . , , Photoshop image-color.com. .
- Adobe Capture, , « »: (, !)
- : . ? ? , ?
- . . ?
Wenn Sie das nächste Mal eine Infografik erstellen und mit den Farben nicht zufrieden sind, analysieren Sie sie im HSV / HSB-Farbraum , z. B. mithilfe von colorizer.org :
- Wie gesättigt sind Farben - wie viel besser oder schlechter werden sie, wenn die Sättigung um einige (oder viele) Prozentpunkte erhöht oder verringert wird?
- Was bedeutet Ton ? Was passiert, wenn Sie den Ton nur um wenige Grad ändern?
- Unterscheiden sich die Farben in der Helligkeit ?
Mit der Zeit werden Sie von der Stufe "Das ist großartig, aber ich weiß nicht warum" zur Stufe "Das ist aus einem bestimmten Grund großartig" wechseln. Und Sie werden in der Lage sein, immer mehr dieser Regeln zu brechen - und trotzdem großartige Farbkombinationen zu erstellen.