AAM Editor – Farben einstellen
Im Farben-Tab werden die globalen Farben der Website festgelegt. Änderungen erscheinen unmittelbar in der Vorschau und gelten für alle Sektionen, die keine eigenen Farbwerte verwenden.
Zur Übersicht: AAM Editor Hosting
Farben-Tab
Der Farben-Tab verwaltet benannte globale Farbwerte. Sektionen und Bedienelemente greifen auf diese Werte zurück, sodass das Erscheinungsbild der gesamten Website zentral angepasst werden kann.
Typische Farbwerte sind:
- Primärfarbe
- Sekundärfarbe
- Textfarbe
- gedimmte Textfarbe
- Hintergrundfarbe
- weiche Hintergrundfarbe
- Akzentfarbe
- Rahmen- und Linienfarbe
Globale Farbwerte
Primärfarbe
Die Primärfarbe wird für zentrale Hervorhebungen verwendet, beispielsweise:
- Schaltflächen
- Links
- aktive Elemente
- Symbole
- markierte Inhalte
Sekundärfarbe
Die Sekundärfarbe ergänzt die Primärfarbe und kann für zusätzliche Schaltflächen, Flächen oder Hervorhebungen verwendet werden.
Textfarbe
Die Textfarbe bestimmt die Standardfarbe für Überschriften und Fließtext.
Sie sollte einen ausreichenden Kontrast zum Hintergrund besitzen.
Gedimmte Textfarbe
Die gedimmte Textfarbe wird für weniger hervorgehobene Inhalte verwendet, beispielsweise:
- Untertitel
- Zusatzinformationen
- Beschreibungen
- Datumsangaben
- Hinweistexte
Hintergrundfarbe
Die Hintergrundfarbe bestimmt den grundlegenden Seitenhintergrund.
Weiche Hintergrundfarbe
Die weiche Hintergrundfarbe dient als leicht abweichende Fläche für:
- Karten
- Panels
- abgesetzte Sektionen
- Formularbereiche
- zusätzliche Inhaltsflächen
Akzentfarbe
Die Akzentfarbe wird für besondere Hervorhebungen verwendet. Abhängig vom Theme kann sie beispielsweise als Gold-, Signal- oder Markenfarbe eingesetzt werden.
Rahmen- und Linienfarbe
Dieser Wert bestimmt die Farbe von:
- Rahmen
- Trennlinien
- Kartenumrandungen
- Eingabefeldern
- dezenten Strukturelementen
Farbe ändern
- Im Farben-Tab das Farbfeld neben dem gewünschten Eintrag anklicken.
- Im Farbwähler eine Farbe auswählen oder einen Hexadezimalwert eingeben.
- Die Auswahl bestätigen.
- Die Darstellung in der Vorschau kontrollieren.
Beispiel für einen Hexadezimalwert:
#D4AF37
Die Änderung wird unmittelbar auf alle Elemente angewendet, die den entsprechenden globalen Farbwert verwenden.
Live-Vorschau
Farbänderungen erscheinen sofort in der Website-Vorschau.
Ein Speichern oder erneutes Laden der Seite ist für die Vorschau nicht erforderlich. Die Änderungen müssen jedoch gespeichert und exportiert werden, bevor sie auf der veröffentlichten Website erscheinen.
Weitere Informationen enthält Speichern und Exportieren.
Themes und eigene Farben
Über Themes kann eine vollständige Farbpalette übernommen werden.
Eine sinnvolle Arbeitsweise ist:
- Ein passendes Theme auswählen.
- Die grundlegende Wirkung in der Vorschau kontrollieren.
- Einzelne Farben im Farben-Tab anpassen.
- Kontrast und Lesbarkeit prüfen.
- Projekt speichern und exportieren.
Wird nach einer manuellen Anpassung ein anderes Theme gewählt, können die globalen Farben erneut überschrieben werden.
Farben einzelner Sektionen
Einzelne Sektionen können eigene Farbwerte besitzen.
Diese überschreiben innerhalb der jeweiligen Sektion die globalen Farben. Nicht gesetzte Werte werden weiterhin vom globalen Theme übernommen.
Beispiel:
Globale Website: heller Hintergrund Produktsektion: dunkler Hintergrund Textsektion: globale Farben Hinweisbereich: eigene Akzentfarbe
Weitere Informationen enthält Sektionsfarben verwenden.
Kontrast und Lesbarkeit
Text und Hintergrund sollten deutlich voneinander unterscheidbar sein.
Besonders zu prüfen sind:
- Fließtext auf Hintergrundflächen
- Schaltflächentext auf Primärfarben
- gedimmte Texte
- Links und aktive Elemente
- Text über Hintergrundbildern
- Formularfelder und Platzhaltertexte
Sehr ähnliche Vorder- und Hintergrundfarben können Inhalte schwer lesbar machen.
Einheitliches Farbsystem
Für ein konsistentes Erscheinungsbild sollte die Zahl der Hauptfarben begrenzt bleiben.
Eine typische Palette besteht aus:
- einer Hintergrundfarbe
- einer Textfarbe
- einer Primärfarbe
- einer Sekundär- oder Akzentfarbe
- einer gedimmten Textfarbe
- einer dezenten Rahmenfarbe
Zu viele voneinander unabhängige Farben lassen eine Website schnell unruhig wirken.
Farben für helle Websites
Bei einer hellen Gestaltung eignen sich typischerweise:
- helle Hintergrundflächen
- dunkle Textfarben
- dezente Rahmenfarben
- kräftige Primär- und Akzentfarben
Gedimmte Texte müssen trotz hellgrauer Darstellung noch ausreichend lesbar bleiben.
Farben für dunkle Websites
Bei einer dunklen Gestaltung eignen sich typischerweise:
- dunkle Hintergrundflächen
- helle Textfarben
- leicht aufgehellte Sekundärflächen
- klare Akzentfarben
- dezente, aber sichtbare Rahmen
Reines Weiß auf reinem Schwarz kann sehr hart wirken. Leicht gebrochene Weiß- und Schwarztöne sind häufig angenehmer lesbar.
Empfehlungen
- Zunächst ein Theme als Ausgangspunkt wählen.
- Mit wenigen Hauptfarben arbeiten.
- Textkontrast auf allen Hintergrundflächen prüfen.
- Akzentfarben gezielt und sparsam einsetzen.
- Sektionsfarben nur für bewusst abweichende Bereiche verwenden.
- Darstellung auf Desktop und Mobilgerät kontrollieren.
- Nach Farbänderungen Schaltflächen, Links und Formulare prüfen.
- Vor größeren Änderungen den bisherigen Stand speichern.