Asphyx: Die Seite wurde neu angelegt: „''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 angepas…“

2026-07-13T11:49:35Z

Die Seite wurde neu angelegt: „''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 angepas…“

Neue Seite

''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: [[:Kategorie:AAM Editor Hosting|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:

<ul>
<li>Primärfarbe</li>
<li>Sekundärfarbe</li>
<li>Textfarbe</li>
<li>gedimmte Textfarbe</li>
<li>Hintergrundfarbe</li>
<li>weiche Hintergrundfarbe</li>
<li>Akzentfarbe</li>
<li>Rahmen- und Linienfarbe</li>
</ul>

== Globale Farbwerte ==

=== Primärfarbe ===

Die Primärfarbe wird für zentrale Hervorhebungen verwendet, beispielsweise:

<ul>
<li>Schaltflächen</li>
<li>Links</li>
<li>aktive Elemente</li>
<li>Symbole</li>
<li>markierte Inhalte</li>
</ul>

=== 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:

<ul>
<li>Untertitel</li>
<li>Zusatzinformationen</li>
<li>Beschreibungen</li>
<li>Datumsangaben</li>
<li>Hinweistexte</li>
</ul>

=== Hintergrundfarbe ===

Die Hintergrundfarbe bestimmt den grundlegenden Seitenhintergrund.

=== Weiche Hintergrundfarbe ===

Die weiche Hintergrundfarbe dient als leicht abweichende Fläche für:

<ul>
<li>Karten</li>
<li>Panels</li>
<li>abgesetzte Sektionen</li>
<li>Formularbereiche</li>
<li>zusätzliche Inhaltsflächen</li>
</ul>

=== 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:

<ul>
<li>Rahmen</li>
<li>Trennlinien</li>
<li>Kartenumrandungen</li>
<li>Eingabefeldern</li>
<li>dezenten Strukturelementen</li>
</ul>

== Farbe ändern ==

<ol>
<li>Im Farben-Tab das Farbfeld neben dem gewünschten Eintrag anklicken.</li>
<li>Im Farbwähler eine Farbe auswählen oder einen Hexadezimalwert eingeben.</li>
<li>Die Auswahl bestätigen.</li>
<li>Die Darstellung in der Vorschau kontrollieren.</li>
</ol>

Beispiel für einen Hexadezimalwert:

<pre>
#D4AF37
</pre>

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 [[AAM Editor – Speichern und Exportieren|Speichern und Exportieren]].

== Themes und eigene Farben ==

Über [[AAM Editor – Themes verwenden|Themes]] kann eine vollständige Farbpalette übernommen werden.

Eine sinnvolle Arbeitsweise ist:

<ol>
<li>Ein passendes Theme auswählen.</li>
<li>Die grundlegende Wirkung in der Vorschau kontrollieren.</li>
<li>Einzelne Farben im Farben-Tab anpassen.</li>
<li>Kontrast und Lesbarkeit prüfen.</li>
<li>Projekt speichern und exportieren.</li>
</ol>

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:

<pre>
Globale Website: heller Hintergrund
Produktsektion: dunkler Hintergrund
Textsektion: globale Farben
Hinweisbereich: eigene Akzentfarbe
</pre>

Weitere Informationen enthält [[AAM Editor – Sektionsfarben verwenden|Sektionsfarben verwenden]].

== Kontrast und Lesbarkeit ==

Text und Hintergrund sollten deutlich voneinander unterscheidbar sein.

Besonders zu prüfen sind:

<ul>
<li>Fließtext auf Hintergrundflächen</li>
<li>Schaltflächentext auf Primärfarben</li>
<li>gedimmte Texte</li>
<li>Links und aktive Elemente</li>
<li>Text über Hintergrundbildern</li>
<li>Formularfelder und Platzhaltertexte</li>
</ul>

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:

<ul>
<li>einer Hintergrundfarbe</li>
<li>einer Textfarbe</li>
<li>einer Primärfarbe</li>
<li>einer Sekundär- oder Akzentfarbe</li>
<li>einer gedimmten Textfarbe</li>
<li>einer dezenten Rahmenfarbe</li>
</ul>

Zu viele voneinander unabhängige Farben lassen eine Website schnell unruhig wirken.

== Farben für helle Websites ==

Bei einer hellen Gestaltung eignen sich typischerweise:

<ul>
<li>helle Hintergrundflächen</li>
<li>dunkle Textfarben</li>
<li>dezente Rahmenfarben</li>
<li>kräftige Primär- und Akzentfarben</li>
</ul>

Gedimmte Texte müssen trotz hellgrauer Darstellung noch ausreichend lesbar bleiben.

== Farben für dunkle Websites ==

Bei einer dunklen Gestaltung eignen sich typischerweise:

<ul>
<li>dunkle Hintergrundflächen</li>
<li>helle Textfarben</li>
<li>leicht aufgehellte Sekundärflächen</li>
<li>klare Akzentfarben</li>
<li>dezente, aber sichtbare Rahmen</li>
</ul>

Reines Weiß auf reinem Schwarz kann sehr hart wirken. Leicht gebrochene Weiß- und Schwarztöne sind häufig angenehmer lesbar.

== Empfehlungen ==

<ul>
<li>Zunächst ein Theme als Ausgangspunkt wählen.</li>
<li>Mit wenigen Hauptfarben arbeiten.</li>
<li>Textkontrast auf allen Hintergrundflächen prüfen.</li>
<li>Akzentfarben gezielt und sparsam einsetzen.</li>
<li>Sektionsfarben nur für bewusst abweichende Bereiche verwenden.</li>
<li>Darstellung auf Desktop und Mobilgerät kontrollieren.</li>
<li>Nach Farbänderungen Schaltflächen, Links und Formulare prüfen.</li>
<li>Vor größeren Änderungen den bisherigen Stand speichern.</li>
</ul>

== Weiterführende Seiten ==

<ul>
<li>[[AAM Editor – Themes verwenden|Themes verwenden]]</li>
<li>[[AAM Editor – Sektionsfarben verwenden|Sektionsfarben verwenden]]</li>
<li>[[AAM Editor – Kartenhintergründe gestalten|Kartenhintergründe gestalten]]</li>
<li>[[AAM Editor – Hintergrundbilder verwalten|Hintergrundbilder verwalten]]</li>
<li>[[AAM Editor – Speichern und Exportieren|Speichern und Exportieren]]</li>
</ul>

[[Kategorie:AAM Editor – Gestaltung und Medien|Farben einstellen]]

AAM Editor – Farben einstellen - Versionsgeschichte