Farbe und Textur¶
Farbe¶
Farbe ist ein starker Gestaltungsmechanismus zur Schaffung einer visuellen Hierarchie. Sie kann signalisieren, welches die wichtigsten Elemente in einer Datenvisualisierung sind. Ein gängiges Muster ist die Verwendung
auffälliger Farben zur Hervorhebung und Kennzeichnung der Daten oder Kategorien, die für die Aussage des Diagramms von größter Bedeutung sind
dezenterer Farben für sekundäre Daten oder Kategorien
von Schwarz für die wichtigsten Textelemente, wie den Titel der Visualisierung
von Grau
für weniger wichtige Daten, die nur für den Kontext hinzugefügt werden
für unterstützende Diagrammelemente, wie Achsenbeschriftungen und Gitterlinien
Siehe auch
Mit Farbe kann auch eine visuelle Hierarchie hergestellt werden. Dies wird z. B. in Material Design 3 verwendet, wobei die Höhe als der Abstand zwischen den Komponenten entlang der z-Achse in dichteunabhängigen Pixeln (dps) gemessen wird:
Farbpaletten¶
Die Farbpalette für Datenvisualisierungen ist eine ausgewählte Teilmenge der cusy-Design-Farbpalette. Sie wurde entwickelt, um die Zugänglichkeit und Harmonie innerhalb einer Seite zu verbessern.
Siehe auch
Kategorien¶
Kategoriale (oder qualitative) Paletten eignen sich am besten, wenn sie diskrete Daten unterscheiden sollen, die keine inhärente Korrelation aufweisen.
Kategoriale Farbpaletten werden hauptsächlich in folgenden Graphen und Visualisierungsarten eingesetzt:
Balkendiagramme:
Zur Unterscheidung verschiedener Kategorien oder Gruppen
Jede Kategorie erhält eine eigene Farbe
Kreisdiagramme (Tortendiagramme):
Zur Darstellung von Anteilen verschiedener Kategorien
Jeder Sektor repräsentiert eine Kategorie mit einer eindeutigen Farbe
Gruppierte Säulendiagramme:
Zur Veranschaulichung mehrerer Kategorien innerhalb von Hauptgruppen
Jede Unterkategorie wird durch eine eigene Farbe dargestellt
Die Farben dieser Palette sollten nacheinander genau wie unten beschrieben angewendet werden. Die Sequenz wird sorgfältig kuratiert, um den Kontrast zwischen benachbarten Farben zu maximieren und die visuelle Unterscheidung zu erleichtern. Dabei sollte die cusy-Palette nur für Daten und Darstellungen verwendet werden, die den Werten von cusy entsprechen.
Sets¶
Farbdifferenzen nach CIEDE2000¶
Name |
Red |
Orange |
Green |
Teal |
Cyan |
Blue |
Purple |
Magenta |
|
Hex |
de2817 |
cd8402 |
4ca72b |
008578 |
129fd4 |
0663b5 |
753bbd |
bd0f77 |
|
Red |
de2817 |
– |
29.06 |
68.60 |
58.21 |
58.28 |
47.85 |
43.07 |
29.35 |
Orange |
cd8402 |
29.06 |
– |
39.02 |
43.27 |
52.30 |
55.42 |
62.33 |
53.76 |
Green |
4ca72b |
68.60 |
39.02 |
– |
25.77 |
50.96 |
59.96 |
60.98 |
83.43 |
Teal |
008578 |
58.21 |
43.27 |
25.77 |
– |
25.24 |
32.48 |
44.86 |
60.24 |
Cyan |
129fd4 |
58.28 |
52.30 |
50.96 |
25.24 |
– |
24.93 |
48.09 |
64.06 |
Blue |
0663b5 |
47.85 |
55.42 |
59.96 |
32.48 |
24.93 |
– |
26.08 |
39.62 |
Purple |
753bbd |
43.07 |
62.33 |
60.98 |
44.86 |
48.09 |
26.08 |
– |
21.01 |
Magenta |
bd0f77 |
29.35 |
53.76 |
83.43 |
60.24 |
64.06 |
39.62 |
21.01 |
– |
Textur¶
Um größtmögliche Zugänglichkeit zu erreichen und Farbenblinde zu unterstützen empfehlen wir die Verwendung von mehreren Faktoren.
Siehe auch
Wir verwenden folgende Formen:
In flächigen Diagrammen, wie Balken- und Kreisdiagrammen, können die Formen zu annähernd flächendeckenden Texturen angeordnet werden:
Sequenzen¶
Einfarbig¶
Monochromatische Paletten eignen sich gut für Beziehungs- und Trend-Diagramme. Hier empfehlen wir für Zugänglichkeit die Anpassung der Größe, bzw. Strichstärke der Formen.
Warm-Kalt¶
Die Rot-Cyan-Palette lässt sich leicht mit unterschiedlichen Temperaturen assoziieren. Verwendet daher diese Palette für Daten, die warm-kalt-Übergänge darstellen sollen.
Verläufe ohne Farbassoziationen¶
SVG-Muster-Generator¶
Ampel¶
Die Ampel-Metapher kann verwendet werden, um den Status wiederzugeben. In der Regel steht Rot für Stop oder Gefahr, Orange/Gelb für Vorsicht oder Übergang und Grün für Losgehen oder Erfolg.
