Farben (Markendesign 2021)
Bei dem Einsatz im Alltag durch Redakteure und Autoren wird für ausgewiesene Textarten, wie beispielsweise Links oder akzentuierte Überschriften, die Basisfarbe als Schriftfarbe auf weißem Hintergrund verwendet.
Andere Farbvarianten, die im Webdesign zusätzlich benötigt werden (bspw. für Schattenwürfe, hellere oder dunklere Ebene mit Links und Menüs), spielen im normalen Gebrauch im Textbereich digitaler Dokumente keine Rolle. Die folgenden Angaben richten sich daher hauptsächlich an Webdesigner und Webentwickler, welche die Umsetzung der entsprechenden Werte in Redaktions- und Content-Management-Systemen vornehmen.
Andere Farbvarianten, die im Webdesign zusätzlich benötigt werden (bspw. für Schattenwürfe, hellere oder dunklere Ebene mit Links und Menüs), spielen im normalen Gebrauch im Textbereich digitaler Dokumente keine Rolle. Die folgenden Angaben richten sich daher hauptsächlich an Webdesigner und Webentwickler, welche die Umsetzung der entsprechenden Werte in Redaktions- und Content-Management-Systemen vornehmen.
Spezielle Farbvarianten für den Einsatz in dem FAU Webdesign
Neben der Schriftfarbe ist es auch notwendig, Farbvarianten für verschiedene Einsatzzwecke im FAU Webdesign vorzuhalten. Diese Farben werden unter anderem benötigt für:
- Buttons in normaler und in fokussierter Form oder bei einem Mouse Over
- Flächen
- Menüebenen mit Farbabstufungen für hierarchisch untergeordnete Bereiche
- Links, Zitatkennzeichen und weitere Bedienelemente
Zur Aufrechterhaltung der für das Web notwendigen Kontrastabstände bestehen die Farben jeweils aus einer Hintergrund- und einer Vordergrundfarbe: Bei einem eher hellen Hintergrund muss die Schriftfarbe Schwarz sein, bei einer dunklen Hintergrundfarbe muss die Schriftfarbe weiß sein.
| FAU | Phil | RW | Med | Nat | TF | |
|---|---|---|---|---|---|---|
| Helle Flächen Theme-Property: --color-primary-ci-hell2
|
Textfarbe: #000, Hintergrund: #CED9E7 | Textfarbe: #000, Hintergrund: #F4E8CB | Textfarbe: #000, Hintergrund: #F2DED1 | Textfarbe: #000, Hintergrund: #B9D9EC | Textfarbe: #000, Hintergrund: #CFE0D8 | Textfarbe: #000, Hintergrund: #D3DDE6 |
| Vitale Flächen Theme-Property: --color-primary-ci-hell
|
Textfarbe: #fff, Hintergrund: #04316A | Textfarbe: #000, Hintergrund: #FDB735 | Textfarbe: #fff, Hintergrund: #C50F3C | Textfarbe: #000, Hintergrund: #18B4F1 | Textfarbe: #000, Hintergrund: #7BB725 | Textfarbe: #000, Hintergrund: #8C9FB1 |
| Aktive Elemente Theme-Property: --color-primary-dunkler
|
Textfarbe: #fff, Hintergrund: #004A9F | Textfarbe: #000, Hintergrund: #e87722 | Textfarbe: #fff, Hintergrund: #971B2F | Textfarbe: #fff, Hintergrund: #005287 | Textfarbe: #fff, Hintergrund: #266141 | Textfarbe: #fff, Hintergrund: #2F586E |
| Buttons u.a. Theme-Property: --color-primary-dunkelste
|
Textfarbe: #fff, Hintergrund: #041E42 | Textfarbe: #fff, Hintergrund: #963B2F | Textfarbe: #fff, Hintergrund: #662938 | Textfarbe: #fff, Hintergrund: #003E61 | Textfarbe: #fff, Hintergrund: #14462D | Textfarbe: #fff, Hintergrund: #204251 |
Für Offline und Druck
Für Offlinemedien und Druck wurden Farben gewählt, die ein “frisches” und vitales Bild ergeben. Die Farben erscheinen auf Fahnen und Plakaten entsprechend.
Genauere Erläuterungen und Hintergründe finden sich in der offiziellen Styleguide der FAU.
| FAU | Phil | RW | Med | Nat | TF | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Blau | Dunkelblau | Gelb | Orange | Rot | Dunkelrot | Blau | Dunkelblau | Grün | Dunkelgrün | Metallic | Dunkelmetallic | |
| Farbe | ||||||||||||
| Pantone | 294 | 282 | 1235 | 158 | 186 | 7427 | 299 | 2384 | 361 | 7731 | 2206 | 7689 |
Die Übersetzung der Pantone-Angaben in HEX-Werte ergeben die oben angezeigten Farben. Diese sind jedoch bei einer Umrechnung in RGB- bzw HEX-Werte überwiegend nicht Standardkonform gemäß der EU Norm 301 549, bzw. der WCAG 2.1 AA und AAA. Daher können sie so nicht für Digitale Werke, Webanwendungen und Apps und auch nicht innerhalb von Dokumenten aus Büroanwendungen verwendet werden.