Farben

Der vollständige Umfang unserer Farbpalette wird in Grafiken und Illustrationen verwendet und erkundet einzigartige und moderne Kombinationen sowie monochromatische Kontraste. Sie kann verwendet werden, um ein bestimmtes Thema oder einen Schwerpunkt hervorzuheben.

Die F5-Palette verwendet sieben primäre Markenfarben plus Schwarz und Weiß, jeweils mit vier Tint-/Schattierungsvarianten für insgesamt 45 Farben. Diese Seite ist die einzige verlässliche Quelle für die Zuordnung von Markenfarben zu Starlight-CSS-Custom-Properties während der Theme-Entwicklung.

Primärfarben

#e4002b

F5 Red—f5-red

#f29a36

Tangerine—f5-tangerine

#0e41aa

River—f5-river

#ab2782

Raspberry—f5-raspberry

#009639

Jade—f5-jade

#62228b

Eggplant—f5-eggplant

#0072b0

Bay—f5-bay

#ffffff

White—f5-white

#000000

Black—f5-black

Name	HEX	RGB	CMYK	LESS	PMS	CSS-Variable
F5 Red	`#e4002b`	228, 0, 43	0, 100, 81, 11	`monza`	185	`--f5-red`
Tangerine	`#f29a36`	242, 154, 54	0, 36, 78, 5	`carrot-orange`	1375	`--f5-tangerine`
River	`#0e41aa`	14, 65, 170	92, 62, 0, 33	`tory-blue`	293	`--f5-river`
Raspberry	`#ab2782`	171, 39, 130	0, 77, 24, 33	—	241	`--f5-raspberry`
Jade	`#009639`	0, 150, 57	100, 0, 62, 41	`fun-green`	355	`--f5-jade`
Eggplant	`#62228b`	98, 34, 139	29, 76, 0, 45	`honey-flower`	2617	`--f5-eggplant`
Bay	`#0072b0`	0, 114, 176	100, 35, 0, 31	—	7461	`--f5-bay`
White	`#ffffff`	255, 255, 255	0, 0, 0, 0	`alabaster`	—	`--f5-white`
Black	`#000000`	0, 0, 0	60, 50, 40, 100	`black`	Black	`--f5-black`

Hinweis zu LESS-Namen: Im Brand Center wird Raspberry als tory-blue und Bay als honey-flower angezeigt – dies sind Kopier-Einfüge-Fehler aus den Einträgen für River und Eggplant. Sie sind oben mit — markiert, um die Weitergabe falscher Werte zu vermeiden.

Sekundärfarben (Tints & Schattierungen)

Jede Primärfarbe hat vier Varianten, geordnet von der hellsten (Stufe 1) bis zur dunkelsten (Stufe 4).

Das Brand Center weist Sekundärfarben LESS-Variablennamen zu. Cloud-Red- und Tangerine-Varianten haben einzigartige, aussagekräftige Namen. Alle anderen Farbgruppen zeigen dieselben Platzhalternamen (wewak, froly, carmine, venetian-red) – dies sind Template-Standardwerte der Markenplattform, die unten der Vollständigkeit halber aufgeführt sind, jedoch nicht als kanonische Bezeichner verwendet werden sollten.

F5 Red

#e4002b

F5 Red (Basis)—f5-red

#f7b2bf

Stufe 1—f5-red-1

#f06680

Stufe 2—f5-red-2

#a70020

Stufe 3—f5-red-3

#720016

Stufe 4—f5-red-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#f7b2bf`	247, 178, 191	0, 28, 23, 3	`wewak`
2	`#f06680`	240, 102, 128	0, 57, 47, 6	`froly`
3	`#a70020`	167, 0, 32	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#720016`	114, 0, 22	0, 100, 81, 55	`venetian-red`

Tangerine

#f29a36

Tangerine (Basis)—f5-tangerine

#ffe4c4

Stufe 1—f5-tangerine-1

#ffbd61

Stufe 2—f5-tangerine-2

#a35700

Stufe 3—f5-tangerine-3

#7a4100

Stufe 4—f5-tangerine-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#ffe4c4`	255, 228, 196	0, 11, 23, 0	`tequila`
2	`#ffbd61`	255, 189, 97	0, 26, 62, 0	`koromiko`
3	`#a35700`	163, 87, 0	0, 47, 100, 36	`chelsea-gem`
4 (dunkelste)	`#7a4100`	122, 65, 0	0, 47, 100, 52	`cinnamon`

River

#0e41aa

River (Basis)—f5-river

#b7c6e5

Stufe 1—f5-river-1

#6e8dcc

Stufe 2—f5-river-2

#0b3180

Stufe 3—f5-river-3

#072155

Stufe 4—f5-river-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#b7c6e5`	183, 198, 229	0, 28, 23, 3	`wewak`
2	`#6e8dcc`	110, 141, 204	0, 58, 47, 6	`froly`
3	`#0b3180`	11, 49, 128	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#072155`	7, 33, 85	0, 100, 81, 55	`venetian-red`

Raspberry

#ab2782

Raspberry (Basis)—f5-raspberry

#e6bed9

Stufe 1—f5-raspberry-1

#cd7db4

Stufe 2—f5-raspberry-2

#801d62

Stufe 3—f5-raspberry-3

#561441

Stufe 4—f5-raspberry-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#e6bed9`	230, 190, 217	0, 28, 23, 3	`wewak`
2	`#cd7db4`	205, 125, 180	0, 58, 47, 6	`froly`
3	`#801d62`	128, 29, 98	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#561441`	86, 20, 65	0, 100, 81, 55	`venetian-red`

Jade

#009639

Jade (Basis)—f5-jade

#b2dfc4

Stufe 1—f5-jade-1

#66c088

Stufe 2—f5-jade-2

#00712b

Stufe 3—f5-jade-3

#004b1d

Stufe 4—f5-jade-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#b2dfc4`	178, 223, 196	0, 28, 23, 3	`wewak`
2	`#66c088`	102, 192, 136	0, 58, 47, 6	`froly`
3	`#00712b`	0, 113, 43	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#004b1d`	0, 75, 29	0, 100, 81, 55	`venetian-red`

Eggplant

#62228b

Eggplant (Basis)—f5-eggplant

#cdabe3

Stufe 1—f5-eggplant-1

#9c59c9

Stufe 2—f5-eggplant-2

#822cb8

Stufe 3—f5-eggplant-3

#41175d

Stufe 4—f5-eggplant-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#cdabe3`	205, 171, 227	0, 28, 23, 3	`wewak`
2	`#9c59c9`	156, 89, 201	0, 58, 47, 6	`froly`
3	`#822cb8`	130, 44, 184	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#41175d`	65, 23, 93	0, 100, 81, 55	`venetian-red`

Bay

#0072b0

Bay (Basis)—f5-bay

#b2d7eb

Stufe 1—f5-bay-1

#66afd7

Stufe 2—f5-bay-2

#005c8d

Stufe 3—f5-bay-3

#003d5f

Stufe 4—f5-bay-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#b2d7eb`	178, 215, 235	0, 28, 23, 3	`wewak`
2	`#66afd7`	102, 175, 215	0, 58, 47, 6	`froly`
3	`#005c8d`	0, 92, 141	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#003d5f`	0, 61, 95	0, 100, 81, 55	`venetian-red`

Weiß (Neutraltöne)

#ffffff

White (Basis)—f5-white

#faf9f7

Stufe 1—f5-white-1

#f5f5f5

Stufe 2—f5-white-2

#e6e6e6

Stufe 3—f5-white-3

#cccccc

Stufe 4—f5-white-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#faf9f7`	250, 249, 247	0, 28, 23, 3	`wewak`
2	`#f5f5f5`	245, 245, 245	0, 58, 47, 6	`froly`
3	`#e6e6e6`	230, 230, 230	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#cccccc`	204, 204, 204	0, 100, 81, 55	`venetian-red`

Schwarz (Grautöne)

#000000

Black (Basis)—f5-black

#999999

Stufe 1—f5-black-1

#666666

Stufe 2—f5-black-2

#343434

Stufe 3—f5-black-3

#222222

Stufe 4—f5-black-4

Stufe	HEX	RGB	CMYK	LESS
1 (hellste)	`#999999`	153, 153, 153	0, 28, 23, 3	`wewak`
2	`#666666`	102, 102, 102	0, 58, 47, 6	`froly`
3	`#343434`	52, 52, 52	0, 100, 81, 35	`carmine`
4 (dunkelste)	`#222222`	34, 34, 34	0, 100, 81, 55	`venetian-red`

Zuordnung zu Starlight-CSS-Custom-Properties

Starlight stellt --sl-color-*-Variablen für das Theming bereit. Nachfolgend ist die Zuordnung der F5-Palette zu den semantischen Farbslots von Starlight aufgeführt, implementiert in styles/custom.css.

Funktionsweise des Starlight-Themings: In Starlight ist der Dunkelmodus der standardmäßige :root-Standard – es gibt keinen data-theme="dark"-Selektor. Der Hellmodus verwendet :root[data-theme='light']. Die Grauskalenvariablen sind semantisch, nicht helligkeitsgeordnet: gray-1 ist immer „primärer Text” und gray-6/gray-7 sind immer „dezente Hintergründe”, unabhängig vom Modus. Ihre tatsächlichen Helligkeitswerte wechseln zwischen den Modi. Ebenso ist accent-high immer die hochsichtbare Akzentfarbe für Text und accent-low immer der dezente Akzenthintergrund – ihre Helligkeit kehrt sich zwischen den Modi um.

/* Dunkelmodus — Starlight-Standard (:root) */
:root {
  --sl-color-white: #ffffff;      /* Überschriftentext (hellste) */
  --sl-color-gray-1: #f5f5f5;    /* Primärer Text — White Stufe 2 */
  --sl-color-gray-2: #cccccc;    /* Fließtext — White Stufe 4 */
  --sl-color-gray-3: #999999;    /* Gedimmter/gedämpfter Text — Black Stufe 1 */
  --sl-color-gray-4: #666666;    /* Rahmen — Black Stufe 2 */
  --sl-color-gray-5: #343434;    /* Inline-Code-Hintergrund — Black Stufe 3 */
  --sl-color-gray-6: #222222;    /* Seitenleisten-Hintergrund — Black Stufe 4 */
  --sl-color-black: #000000;     /* Seitenhintergrund */
  --sl-color-accent-low: #720016;   /* Dezenter Akzenthintergrund — F5 Red Stufe 4 */
  --sl-color-accent: #f06680;       /* Links, aktiv — F5 Red Stufe 2 */
  --sl-color-accent-high: #f7b2bf;  /* Akzenttext — F5 Red Stufe 1 */
}

/* Hellmodus — invertierte Grauschicht und Akzenthelligkeit */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Überschriftentext (dunkelste) — Black Stufe 4 */
  --sl-color-gray-1: #222222;    /* Primärer Text — Black Stufe 4 */
  --sl-color-gray-2: #343434;    /* Fließtext — Black Stufe 3 */
  --sl-color-gray-3: #666666;    /* Gedimmter Text — Black Stufe 2 */
  --sl-color-gray-4: #999999;    /* Rahmen — Black Stufe 1 */
  --sl-color-gray-5: #cccccc;    /* Helle Rahmen — White Stufe 4 */
  --sl-color-gray-6: #f5f5f5;    /* Seitenleisten-Hintergrund — White Stufe 2 */
  --sl-color-gray-7: #faf9f7;    /* Nav-Hintergrund — White Stufe 1 */
  --sl-color-black: #ffffff;     /* Seitenhintergrund */
  --sl-color-accent-low: #f7b2bf;   /* Dezenter Akzenthintergrund — F5 Red Stufe 1 (invertiert) */
  --sl-color-accent: #e4002b;       /* Links, aktiv — F5 Red */
  --sl-color-accent-high: #720016;  /* Akzenttext — F5 Red Stufe 4 (invertiert) */
}

Visuelle Token-Vorschau

Schalten Sie den Theme-Umschalter um, um zu sehen, wie sich diese semantischen Tokens zwischen Dunkel- und Hellmodus ändern.

Grauskalen-Tokens

white

Überschriftentext—sl-color-white

gray-1

Primärer Text—sl-color-gray-1

gray-2

Fließtext—sl-color-gray-2

gray-3

Gedimmter Text—sl-color-gray-3

gray-4

Rahmen—sl-color-gray-4

gray-5

Inline-Code-Hintergrund—sl-color-gray-5

gray-6

Seitenleisten-Hintergrund—sl-color-gray-6

black

Seitenhintergrund—sl-color-black

Akzent-Tokens

accent-low

Dezenter Akzenthintergrund—sl-color-accent-low

accent

Links, aktiv—sl-color-accent

accent-high

Akzenttext—sl-color-accent-high

Badge-Tokens

default

Standard-Badge—sl-color-bg-badge-default

note

Hinweis-Badge—sl-color-bg-badge-note

danger

Gefahr-Badge—sl-color-bg-badge-danger

success

Erfolg-Badge—sl-color-bg-badge-success

caution

Vorsicht-Badge—sl-color-bg-badge-caution

tip

Tipp-Badge—sl-color-bg-badge-tip

Kontrastprüfung (WCAG AA)

Dunkelmodus (Text auf #000000 Seitenhintergrund):

Fließtext #cccccc → 16,3:1 (AAA)
Gedimmter Text #999999 → 10:1 (AAA)
Akzentlink #f06680 → 5,6:1 (AA)

Hellmodus (Text auf #ffffff Seitenhintergrund):

Fließtext #343434 → 11,6:1 (AAA)
Gedimmter Text #666666 → 5,7:1 (AA)
Akzentlink #e4002b → 4,6:1 (AA)

Semantische Farbempfehlungen

Starlight-Variable	F5-Farbe	Verwendungszweck
`--sl-color-accent`	F5 Red `#e4002b`	Links, Schaltflächen, aktive Zustände
`--sl-color-text-accent`	F5 Red Stufe 2 `#f06680`	Hover-Zustände im Dunkelmodus
`--sl-color-bg-accent`	F5 Red Stufe 4 `#720016`	Akzenthintergründe
Benutzerdefiniert: `--sl-color-info`	Bay `#0072b0`	Informations-Callouts
Benutzerdefiniert: `--sl-color-success`	Jade `#009639`	Erfolgsmeldungen
Benutzerdefiniert: `--sl-color-warning`	Tangerine `#f29a36`	Warnungs-Callouts
Benutzerdefiniert: `--sl-color-danger`	F5 Red `#e4002b`	Fehler-/Gefahr-Callouts

Farbkontrast

Um sicherzustellen, dass alle Personen auf unsere Kommunikation zugreifen und diese verstehen können, verwenden Sie Hintergrund- und Textfarbkombinationen, die den Barrierefreiheitsstandards entsprechen. Wählen Sie Farbpaare mit einem Mindestkontrahverhältnis von 3:1 für großen Text und 4,5:1 für normalen Text.

Alle Farbpaarungen müssen die WCAG-AA-Kontrastanforderungen erfüllen:

Normaler Text (< 18 pt / 14 pt fett): Mindest-Kontrastverhältnis 4,5:1
Großer Text (≥ 18 pt / 14 pt fett): Mindest-Kontrastverhältnis 3:1
UI-Komponenten und grafische Objekte: Mindest-Kontrastverhältnis 3:1

Empfohlene sichere Farbpaarungen

Vordergrund	Hintergrund	Kontrastverhältnis	Besteht
White `#ffffff`	F5 Red `#e4002b`	4,6:1	AA
White `#ffffff`	River `#0e41aa`	6,4:1	AA / AAA
White `#ffffff`	Bay `#0072b0`	4,6:1	AA
White `#ffffff`	Jade `#009639`	4,2:1	AA (großer Text)
White `#ffffff`	Eggplant `#62228b`	6,5:1	AA / AAA
White `#ffffff`	Raspberry `#ab2782`	4,7:1	AA
Black `#000000`	Tangerine `#f29a36`	7,8:1	AA / AAA
Black `#000000`	F5 Red Stufe 1 `#f7b2bf`	10,1:1	AA / AAA
Black `#222222`	White Stufe 1 `#faf9f7`	15,8:1	AA / AAA

Tipp: Überprüfen Sie Kontrastverhältnisse immer mit einem Werkzeug wie dem WebAIM Contrast Checker, wenn Sie neue Farbkombinationen erstellen.

Verwendungsrichtlinien

Farbfamilie	Rolle	Verwendung
F5 Red	Markenidentität, primäre CTAs	Hero-Bereiche, primäre Schaltflächen, Markenzeichen, Fehlerzustände
River	Informativ, vertrauenswürdig	Navigationslinks, Informationsbanner, Datenvisualisierungen
Bay	Informativ, sekundär	Sekundäre Links, Info-Callouts, Code-Block-Akzente
Jade	Erfolg, positiv	Erfolgsmeldungen, Bestätigungszustände, Fortschrittsanzeigen
Tangerine	Warnung, Aufmerksamkeit	Warnungs-Callouts, Zustände, die Aufmerksamkeit erfordern, Hervorhebungsmarkierungen
Raspberry	Akzent, dekorativ	Tags, Badges, sekundäre Akzente, Kategoriemarkierungen
Eggplant	Akzent, Premium	Feature-Hervorhebungen, Premium-Indikatoren, dekorative Akzente
White / Neutrals	Hintergründe, Oberflächen	Seitenhintergründe, Kartenoberflächen, Trennlinien, dezente Rahmen
Black / Grays	Text, Struktur	Fließtext, Überschriften, Rahmen, Schattenebenen

Theme-Überprüfungen

.swatch-Rahmen verwendet --sl-color-gray-5
.swatch-label-Hintergrund verwendet --sl-color-gray-6
Alle --f5-*-Farbfelder zeigen ihre tatsächliche Farbe an (CSS-Custom-Properties werden aus custom.css aufgelöst)
Farbfelder sind sowohl im Hell- als auch im Dunkelmodus sichtbar
Badge-Token-Farbfelder aktualisieren sich beim Umschalten des Themes