Farbkonzept

Autor:innen

Zugehörigkeit

Cristina Münch

Universität Basel

Nico Görlich

Universität Basel

Moritz Mähr

Universität Basel

Moritz Twente

Universität Basel

Veröffentlichungsdatum

17. April 2023

Die Basis für die Konzeption einer Farbpalette für digitale Anwendungen stellt das Violett dar, das allen zehn Bänden der Stadt.Geschichte.Basel als Hintergrundfarbe des Buchcovers dient. Die visuelle Gestaltung der Online-Angebote setzt sich daher von den Printprodukten ab, bezieht sich dennoch farblich auf deren Design und die Corporate Identity von Stadt.Geschichte.Basel.

Die gewählten Farben müssen für Nutzer*innen mit visuellen Einschränkungen zugänglich sein (Inklusive Gestaltung).
Sie müssen online sowie im Druck für Grafiken und Karten eingesetzt werden können. Sie müssen daher sowohl im RGB-, als auch im CMYK-Farbraum existieren.
Es dürfen darüber hinaus keine urheberrechtlich geschützten Spezialfarben (Pantone o.ä.) zum Einsatz kommen.

Wegen der unterschiedlichen Anforderungen an Print- und Webinhalte wurden zwei verschiedene Farbpaletten definiert.

Farbpalette digital

Das Farbkonzept für die digital angebotenen Produkte basiert auf den jeweils eingesetzten Webtechnologien, d.h. auf vorgegebenen Gestaltungsprinzipien. Aus pragmatischen Gründen wurden diese in der Regel übernommen und nur geringfügig angepasst. So bleibt etwa die in Bootstrap angelegte Aufteilung in Primär-, Sekundär- und Tertiärfarben sowie weitere Farben für Statusmeldungen erhalten, mit Blick auf die semantisch einheitliche Auszeichnung von Buttons, Badges etc. sind jedoch Anpassungen erfolgt.

Portal

Die Farbdefinition für das Portal enthält sieben Farben, die über einen RGB-Wert identifizierbar sind. Darüber hinaus sind noch jeweils neun weitere farbliche Abstufungen vordefiniert. Die verschiedenen Farben können mit den entsprechenden CSS-Klassen für Texte, Hintergrundflächen sowie Flächen und Umrandungen von Bedienelementen angewendet werden.

Tabelle 1: Farbwerte für das Portal

Rolle	Farbe	HEX	RGB
primary	Violett	#3a1e3e	58 30 62
secondary	Gelb	#ffe880	255 232 128
tertiary	Hellblau	#86bbd8	134 187 216
success	Hellgrün	#dbfe87	219 254 135
warning	Orange	#f6ae2d	246 174 45
error	Hellrot	#f63e02	246 62 2
surface	Grau	#666666	102 102 102
text	Schwarz	#374151	55 65 81

Die Farbwerte für das Portal werden via PostCSS eingebunden.

Farbwerte-Konfiguration zum Kopieren für Tailwind/PostCSS

/* =~= src/app.postcss =~= */

:root {
    /* =~= Theme Properties =~= */
    --theme-font-family-base: 'Euclid Circular B', sans-serif;
    --theme-font-family-heading: 'Euclid Circular B', sans-serif;
    --theme-font-color-base: 0 0 0;
    --theme-font-color-dark: 255 255 255;
    --theme-rounded-base: 4px;
    --theme-rounded-container: 8px;
    --theme-border-base: 2px;

    /* =~= Theme On-X Colors =~= */
    --on-primary: 255 255 255;
    --on-secondary: 0 0 0;
    --on-tertiary: 0 0 0;
    --on-success: 0 0 0;
    --on-warning: 0 0 0;
    --on-error: 0 0 0;
    --on-surface: 255 255 255;

    /* =~= Theme Colors  =~= */
    /* primary | #3A1E3E */
    --color-primary-50: 225 221 226;
    --color-primary-100: 216 210 216;
    --color-primary-200: 206 199 207;
    --color-primary-300: 176 165 178;
    --color-primary-400: 117 98 120;
    --color-primary-500: 58 30 62;
    --color-primary-600: 52 27 56;
    --color-primary-700: 44 23 47;
    --color-primary-800: 35 18 37;
    --color-primary-900: 28 15 30;

    /* secondary | #FFE880 */
    --color-secondary-50: 255 252 236;
    --color-secondary-100: 255 250 230;
    --color-secondary-200: 255 249 223;
    --color-secondary-300: 255 246 204;
    --color-secondary-400: 255 239 166;
    --color-secondary-500: 255 232 128;
    --color-secondary-600: 230 209 115;
    --color-secondary-700: 191 174 96;
    --color-secondary-800: 153 139 77;
    --color-secondary-900: 125 114 63;

    /* tertiary | #86BBD8 */
    --color-tertiary-50: 237 245 249;
    --color-tertiary-100: 231 241 247;
    --color-tertiary-200: 225 238 245;
    --color-tertiary-300: 207 228 239;
    --color-tertiary-400: 170 207 228;
    --color-tertiary-500: 134 187 216;
    --color-tertiary-600: 121 168 194;
    --color-tertiary-700: 101 140 162;
    --color-tertiary-800: 80 112 130;
    --color-tertiary-900: 66 92 106;

    /* success | #DBFE87 */
    --color-success-50: 250 255 237;
    --color-success-100: 248 255 231;
    --color-success-200: 246 255 225;
    --color-success-300: 241 255 207;
    --color-success-400: 230 254 171;
    --color-success-500: 219 254 135;
    --color-success-600: 197 229 122;
    --color-success-700: 164 191 101;
    --color-success-800: 131 152 81;
    --color-success-900: 107 124 66;

    /* warning | #F6AE2D */
    --color-warning-50: 254 243 224;
    --color-warning-100: 253 239 213;
    --color-warning-200: 253 235 203;
    --color-warning-300: 251 223 171;
    --color-warning-400: 249 198 108;
    --color-warning-500: 246 174 45;
    --color-warning-600: 221 157 41;
    --color-warning-700: 185 131 34;
    --color-warning-800: 148 104 27;
    --color-warning-900: 121 85 22;

    /* error | #F63E02 */
    --color-error-50: 254 226 217;
    --color-error-100: 253 216 204;
    --color-error-200: 253 207 192;
    --color-error-300: 251 178 154;
    --color-error-400: 249 120 7;
    --color-error-500: 246 62 2;
    --color-error-600: 221 56 2;
    --color-error-700: 185 47 2;
    --color-error-800: 148 37 1;
    --color-error-900: 121 30 1;

    /* surface | #666666 */
    --color-surface-50: 232 232 232;
    --color-surface-100: 224 224 224;
    --color-surface-200: 217 217 217;
    --color-surface-300: 194 194 194;
    --color-surface-400: 148 148 148;
    --color-surface-500: 102 102 102;
    --color-surface-600: 92 92 92;
    --color-surface-700: 77 77 77;
    --color-surface-800: 61 61 61;
    --color-surface-900: 50 50 50;
}

Kontrastwerte

Die Farbpalette für das Portal wurde mit Kontrastcheckern überprüft, um eine barrierefreie Gestaltung zu gewährleisten. Die Erfüllung des WCAG-Standards ist zwar nicht in jeder Farbkombination gegeben (siehe Tabelle 2). Das spielt aber praktisch keine Rolle, da der überwältigende Teil der Anwendungen mit Abstufungen der Primärfarbe umgesetzt wird und die weiteren Farben nur in Ausnahmefällen zur Anwendung kommen.

Tabelle 2: Kontrast-Check für Text¹ vor farbigem Hintergrund

	text	primary	secondary	tertiary	success	warning	error
bg-primary	FAIL		AAA	AAA	AAA	AAA	FAIL
bg-secondary	AAA	AAA		FAIL	FAIL	FAIL	FAIL
bg-tertiary	AAA	AAA	FAIL		FAIL	FAIL	FAIL
bg-success	AAA	AAA	FAIL	FAIL		FAIL	FAIL
bg-warning	AAA	AAA	FAIL	FAIL	FAIL		FAIL
bg-error	AA	FAIL	FAIL	FAIL	FAIL	FAIL
bg-surface	AAA	AAA	FAIL	FAIL	FAIL	FAIL	FAIL

Forschungsdatenplattform

Die Forschungsdatenplattform basiert auf CollectionBuilder, das als Erweiterung von Bootstrap Sass die Definition von angepassten Farbwerten mit HEX-Werten (siehe Tabelle 3) erlaubt. Die verschiedenen Farben können mit den entsprechenden CSS-Klassen für Texte, Hintergrundflächen sowie Flächen und Umrandungen von Bedienelementen angewendet werden. Auf diese Weise ist es auch möglich, zusätzliche Farbklassen zu erstellen.

Tabelle 3: Farbwerte für CollectionBuilder

Rolle	Farbe	HEX	RGB
primary	Violett	#3a1e3e	58 30 62
secondary	Gelb	#ffe880	255 232 128
success	Hellgrün	#dbfe87	134 187 216
info	Hellblau	#86bbd8	219 254 135
warning	Orange	#f6ae2d	246 174 45
danger	Hellrot	#f63e02	246 62 2
light	Gelb	#ffe880	255 232 128
dark	Violett	#3a1e3e	58 30 62
text	Schwarz	#191919	25 25 25

Die definierte Farbpalette für CollectionBuilder wird über eine csv-Datei eingebunden.

Farbwerte-Konfiguration (CSV) zum Kopieren für CollectionBuilder

color_class,color
primary,#3a1e3e
secondary,#ffe880
success,#dbfe87
info,#86bbd8
warning,#f6ae2d
danger,#f63e02
light,#ffe880
dark,#3a1e3e

Kontrastwerte

Die Farbpalette der Forschungsdatenplattform wurde mit Kontrastcheckern überprüft, um eine barrierefreie Gestaltung zu gewährleisten. Die Erfüllung des WCAG-Standards ist zwar nicht in jeder Farbkombination gegeben (siehe Tabelle 4). Das spielt aber praktisch keine Rolle, da der überwältigende Teil der Anwendungen mit Primär- und Sekundärfarbe umgesetzt wird und die weiteren Farben nur in Ausnahmefällen zur Anwendung kommen.

Tabelle 4: Kontrast-Check für Text² vor farbigem Hintergrund

	text	primary	secondary	success	info	warning	danger
bg-primary	FAIL		AAA	AAA	AAA	AAA	FAIL
bg-secondary	AAA	AAA		FAIL	FAIL	FAIL	FAIL
bg-success	AAA	AAA	FAIL		FAIL	FAIL	FAIL
bg-info	AAA	AAA	FAIL	FAIL		FAIL	FAIL
bg-warning	AAA	AAA	FAIL	FAIL	FAIL		FAIL
bg-danger	FAIL	FAIL	FAIL	FAIL	FAIL	FAIL

Farbpalette Print

Für die zehn Bände der Stadt.Geschichte.Basel hat das Team für Forschungsdatenmanagement über 100 Grafiken – hauptsächlich Karten und Diagramme – bearbeitet bzw. erstellt. In Bezug auf die farbliche Gestaltung bestand neben den bereits genannten Anforderungen zusätzlich noch der Anspruch, eine über alle Bände hinweg erkennbar zusammenhängende Formensprache zu finden. Dies stellte sich jedoch u.a. aufgrund der Vielzahl an Abbildungstypen (Landkarten, Balkendiagramme, Netzwerkvisualisierungen, etc.), wegen disziplinenspezifisch unterschiedlicher Konventionen zum Einsatz wissenschaftlicher Visualisierungen oder wegen fachlich bedingter Differenzen in Genauigkeit und Vollständigkeit von Grundlagendaten als schwieriges Unterfangen dar.

Der ursprüngliche Ansatz, eine Farbpalette aus bereits vorhandenen Good-Practice-Beispielen für barrierefreie Farbgestaltung auszuwählen, konnte daher nicht direkt umgesetzt werden. Weiterhin hat sich nach der Bearbeitung der ersten Datensätze schnell gezeigt, dass sich die zu visualisierenden Daten untereinander auch strukturell zu stark voneinander unterschieden, um eine universell anwendbare Grundlage zu verwenden (z.B. Anforderungen an Visualisierung diskreter Daten gegenüber kontinuierlicher Daten).

Als Grundlage für die Gestaltung der wissenschaftlichen Abbildungen für die Printprodukte von Stadt.Geschichte.Basel wurde eine Farbpalette – in zwei Varianten, mit je 23 bzw. 14 Farben zzgl. einem Grauwert – ausgewählt. Das Discrete Rainbow Colour Scheme 19 von Paul Tol ist für Farbenblinde “reasonably clear” (Tol 2022), sofern die Farbwerte nicht interpoliert werden. Für die Grafikerstellung in R ist die Palette auch im Package khroma verfügbar (Frerebeau 2025).

Discrete Rainbow Colour Scheme 19 (mit 23+1 Farben)

Tabelle 5: Farbpalette für Printprodukte mit 23 Farben und Grau (nach Tol 2022)

Farbe	Nr.	CMYK	HEX	RGB
Off-White	1	8 6 0 2	#e8ecfb	232 236 251
Lila	2	4 10 0 11	#d9cce3	217 204 227
	4	0 15 0 20	#caaccb	202 172 203
	5	0 24 3 27	#ba8db4	186 141 180
	7	0 35 7 33	#aa6f9e	170 111 158
	8	0 48 11 40	#994f88	153 79 136
	9	0 66 16 47	#882e72	136 46 114
Blau	10	86 43 0 31	#1965b0	25 101 176
	11	65 35 0 25	#437dbf	67 125 191
	13	53 28 0 19	#6195cf	97 149 207
	14	45 21 0 13	#7bafde	123 175 222
Grün	15	56 0 43 30	#4eb265	78 178 101
	16	28 0 33 21	#90c987	144 201 135
	17	10 0 24 12	#cae0ab	202 224 171
Gelb	18	0 3 65 3	#f7f056	247 240 86
Orange	19	0 18 72 3	#f7cb45	247 203 69
	21	0 32 78 4	#f4a736	244 167 54
	23	0 46 84 7	#ee8026	238 128 38
Rot	25	0 63 90 10	#e65518	230 85 24
	26	0 98 95 14	#dc050c	220 5 12
	27	0 86 92 35	#a5170e	165 23 14
	28	0 78 88 55	#72190e	114 25 14
	29	0 68 85 74	#42150a	66 21 10
Grau	30	0 0 0 53	#777777	119 119 119

Farbwerte-Konfiguration (CSV mit 23+1 Farben) zum Kopieren für Print-Anwendungen

Nummer,CMYK,HEX,RGB
1,"8 6 0 2",#e8ecfb,"232 236 251"
2,"4 10 0 11",#d9cce3,"217 204 227"
4,"0 15 0 20",#caaccb,"202 172 203"
5,"0 24 3 27",#ba8db4,"186 141 180"
7,"0 35 7 33",#aa6f9e,"170 111 158"
8,"0 48 11 40",#994f88,"153 79 136"
9,"0 66 16 47",#882e72,"136 46 114"
10,"86 43 0 31",#1965b0,"25 101 176"
11,"65 35 0 25",#437dbf,"67 125 191"
13,"53 28 0 19",#6195cf,"97 149 207"
14,"45 21 0 13",#7bafde,"123 175 222"
15,"56 0 43 30",#4eb265,"78 178 101"
16,"28 0 33 21",#90c987,"144 201 135"
17,"10 0 24 12",#cae0ab,"202 224 171"
18,"0 3 65 3",#f7f056,"247 240 86"
19,"0 18 72 3",#f7cb45,"247 203 69"
21,"0 32 78 4",#f4a736,"244 167 54"
23,"0 46 84 7",#ee8026,"238 128 38"
25,"0 63 90 10",#e65518,"230 85 24"
26,"0 98 95 14",#dc050c,"220 5 12"
27,"0 86 92 35",#a5170e,"165 23 14"
28,"0 78 88 55",#72190e,"114 25 14"
29,"0 68 85 74",#42150a,"66 21 10"
30,"0 0 0 53",#777777,"119 119 119"

Discrete Rainbow Colour Scheme 19 (mit 14+1 Farben)

Tabelle 6: Farbpalette für Printprodukte mit 14 Farben und Grau (nach Tol 2022)

Farbe	Nr.	CMYK	HEX	RGB
Lila	3	3 13 0 16	#d1bbd7	209 198 215
	6	0 32 6 32	#ae76a3	174 118 163
	9	0 66 16 47	#882e72	136 46 114
Blau	10	86 43 0 31	#1965b0	25 101 176
	12	59 31 0 22	#5289c7	82 137 199
	14	45 21 0 13	#7bafde	123 175 222
Grün	15	56 0 43 30	#4eb265	78 178 101
	16	28 0 33 21	#90c987	144 201 135
	17	10 0 24 12	#cae0ab	202 224 171
Gelb	18	0 3 65 3	#f7f056	247 240 86
Orange	20	0 22 74 4	#f6c141	246 193 65
	22	0 39 81 5	#f1932d	241 147 45
Rot	24	0 59 88 9	#e8601c	232 96 28
	26	0 98 95 14	#dc050c	220 5 12
Grau	30	0 0 0 53	#777777	119 119 119

Farbwerte-Konfiguration (CSV mit 14+1 Farben) zum Kopieren für Print-Anwendungen

Nummer,CMYK,HEX,RGB
3,"3 13 0 16",#d1bbd7,"209 198 215"
6,"0 32 6 32",#ae76a3,"174 118 163"
9,"0 66 16 47",#882e72,"136 46 114"
10,"86 43 0 31",#1965b0,"25 101 176"
12,"59 31 0 22",#5289c7,"82 137 199"
14,"45 21 0 13",#7bafde,"123 175 222"
15,"56 0 43 30",#4eb265,"78 178 101"
16,"28 0 33 21",#90c987,"144 201 135"
17,"10 0 24 12",#cae0ab,"202 224 171"
18,"0 3 65 3",#f7f056,"247 240 86"
20,"0 22 74 4",#f6c141,"246 193 65"
22,"0 39 81 5",#f1932d,"241 147 45"
24,"0 59 88 9",#e8601c,"232 96 28"
26,"0 98 95 14",#dc050c,"220 5 12"
30,"0 0 0 53",#777777,"119 119 119"

Anwendung

Dieses Farbschema ist in beiden Varianten für die Verwendung in Print-Produkten geeignet und erfüllt die Anforderungen an eine für Farbenblinde erkennbare Farbpalette. Für Abbildungen, in denen gewisse Farbtöne z.B. aufgrund ästhetischer Ansprüche oder inhaltlicher Assoziationen unerwünscht sind, können einzelne Farbwerte ausgelassen werden. Für diese Fälle empfiehlt Tol (2022) spezifische Subsets (Abbildung 1) der Farbpalette zu verwenden. Auf diese Weise kann eine für Farbenblinde geeignete, druckfähige Farbpalette mit bis zu 23 Farbwerten generiert werden.

Abbildung 1: Varianten der Farbpalette je nach Anzahl benötigter Farbstufen (nach Tol 2022)

Zurück nach oben

Literatur

Frerebeau, Nicolas. 2025. «Paul Tol’s Colour Schemes». khroma. https://packages.tesselle.org/khroma/articles/tol.html.

Tol, Paul. 2022. «Sequential Colour Schemes». SRON. https://sronpersonalpages.nl/~pault/#sec:sequential.

Fussnoten

Die Ergebnisse der Checks betreffen die die Kontrast-Grenzwerte bei der Verwendung von Fliesstext in üblichen Schriftgrössen. Für grössere Schrift und Bedienelemente sowie Grafiken gelten andere Werte.↩︎
Die Ergebnisse der Checks betreffen die die Kontrast-Grenzwerte bei der Verwendung von Fliesstext in üblichen Schriftgrössen. Für grössere Schrift und Bedienelemente sowie Grafiken gelten andere Werte.↩︎