> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/farben-in-websites-und-funnels-konsistent-verwenden.md).

# Farben in Websites und Funnels konsistent verwenden

Nutze Standard-, Marken-, eigene und zentral verwaltete Farben in Websites und Funnels gezielt – mit klarer Unterscheidung, sicherer Prüfung und gut lesbaren Ergebnissen.

## Das Ergebnis

Der Farbwähler ist die Stelle im Seiten-Editor, an der du Hintergründe, Texte, Schaltflächen, Rahmen und einzelne Textstellen gestaltest. Er bündelt mehrere Farbgruppen in einer Ansicht. Genau diese Gruppen unterscheiden sich jedoch darin, ob eine spätere Änderung bestehende Seiten beeinflusst.

Wenn du diese Unterscheidung kennst, kannst du Farben verlässlich einsetzen: eine vorhandene Farbe auswählen, eine neue Farbe mit verständlichem Namen speichern, einzelne Wörter hervorheben oder eine zentrale Marke kontrolliert umstellen. Du musst dafür keinen Farbcode auswendig können – solltest aber wissen, wann ein Farbton nur für den aktuellen Entwurf gilt und wann er mehrere Inhalte gleichzeitig aktualisiert.

## Die Farbgruppen richtig unterscheiden

Der Farbwähler kann mehrere Gruppen zeigen. Wähle nicht einfach den ähnlichsten Farbton, sondern die passende Gruppe für deinen Zweck.

| Farbgruppe                  | Wofür sie gedacht ist                                               | Was bei späteren Änderungen passiert                                                                                                                   |
| --------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Standardfarben              | Schnelle Gestaltung eines einzelnen Entwurfs                        | Die Standardpalette kann sich mit neuen Editor-Versionen verändern. Nutze sie nicht als einzige Grundlage für eine feste Markenfarbe.                  |
| Markenfarben                | Farben aus deinem Markenbereich, die schnell zur Auswahl stehen     | Eine Anpassung gilt für neue Auswahlvorgänge. Bereits gespeicherte Farben auf bestehenden Elementen bleiben unverändert.                               |
| Eigene Farben im Farbwähler | Einen Farbton direkt beim Gestalten speichern und wiederfinden      | Ein Name hilft bei der Auswahl. Das Umbenennen oder Entfernen eines solchen Farbfelds ändert bereits gespeicherte Farben auf bestehenden Seiten nicht. |
| Zentrale eigene Farben      | Einen verbindlichen Farbton für mehrere Inhalte gemeinsam verwalten | Verwendete zentrale Farbfelder sind verbunden: Eine Änderung aktualisiert die Stellen, an denen genau dieses zentrale Farbfeld ausgewählt wurde.       |

> **Wichtig:** Gleicher Farbwert bedeutet nicht automatisch gleiche Verbindung. Nur ein Element, bei dem du das zentrale Farbfeld ausgewählt hast, folgt später einer zentralen Änderung. Ein manuell eingegebener oder aus einer anderen Gruppe gewählter, gleich aussehender Wert bleibt eigenständig.

## Wann du welche Gruppe verwendest

Verwende **zentrale eigene Farben** für Farben mit einem festen Zweck, die sich auf mehreren Seiten wiederholen: etwa die Hauptfarbe wichtiger Schaltflächen, ein wiederkehrender Hintergrund oder Text auf dunkler Fläche. So bleibt eine spätere Umstellung kontrollierbar.

Verwende **Markenfarben** oder eine **eigene Farbe im Farbwähler**, wenn du einen Farbton vor allem schnell auswählen möchtest, aber keine rückwirkende Anpassung bestehender Inhalte erwartest.

Standardfarben sind praktisch zum Entwerfen. Da die vorgegebenen Farbpaletten im Laufe der Zeit ergänzt oder verändert werden können, eignen sie sich nicht als verlässliche Referenz für eine feste Gestaltung.

## Bevor du Farben anlegst

Lege zuerst für jeden wichtigen Farbton einen klaren Zweck fest. Ein kleiner Satz aus drei bis fünf Farben reicht für den Start:

* **Hauptfarbe** für wichtige Schaltflächen;
* **Akzentfarbe** für Hinweise oder Hervorhebungen;
* **Hintergrund hell** für ruhige Inhaltsbereiche;
* **Text auf dunkel** für gut lesbare Texte auf dunklen Flächen.

Notiere zu jeder Farbe mindestens einen verständlichen Namen und, falls vorhanden, den HEX-Wert. Vermeide Dubletten wie „Blau neu“, „Blau final“ und „Blau 2“. Ähnliche Farbtöne lassen sich später viel leichter korrekt auswählen, wenn ihr Zweck bereits im Namen steht.

## Farbe direkt im Seiten-Editor auswählen

1. Öffne die gewünschte Website- oder Funnel-Seite im Editor.
2. Wähle den Bereich, das Element oder den Textblock aus, dessen Farbe du ändern möchtest.
3. Öffne das Farbfeld in den Stileinstellungen.
4. Bei Text kannst du stattdessen den Buchstaben **A** in der eingeblendeten Textleiste verwenden.
5. Wähle einen Farbton aus Standard-, Marken-, eigenen oder zentralen Farben.
6. Kontrolliere die Darstellung direkt auf der Arbeitsfläche und speichere die Seite.

Die Quellansichten zeigen den Farbwähler als kompaktes Fenster mit getrennten Farbgruppen und einer Schaltfläche zum Hinzufügen. So erkennst du nicht nur den Farbton, sondern auch seine Herkunft.

## Einzelne Wörter oder Zeichen hervorheben

Du kannst innerhalb eines Textes auch nur ein Wort oder sogar einzelne Zeichen einfärben. Das eignet sich für eine kurze Betonung in einer Überschrift – nicht jedoch für lange Textpassagen, deren Lesbarkeit dadurch leiden könnte.

1. Öffne den Text zur Bearbeitung.
2. Markiere nur das Wort oder die Zeichen, die hervorgehoben werden sollen.
3. Klicke in der eingeblendeten Textleiste auf **A**.
4. Wähle den gewünschten Farbton.
5. Prüfe, ob die Hervorhebung noch gut lesbar ist und der Rest des Textes ruhig bleibt.

Ein sicherer Test ist, die Seite nach dem Speichern in normaler Größe und auf einem kleinen Bildschirm zu betrachten. Wenn ein hervorgehobener Teil vom eigentlichen Inhalt ablenkt, reduziere die Anzahl der Farben oder verwende stattdessen eine stärkere Schrift.

## Neue Farbe direkt im Farbwähler anlegen

Wenn kein vorhandener Farbton passt, kannst du im Farbwähler eine eigene Farbe erstellen.

1. Öffne den Farbwähler am gewünschten Element.
2. Wähle **Hinzufügen**.
3. Lege den Farbton im Farbfeld fest oder wähle das passende Eingabeformat.
4. Gib einen beschreibenden Namen ein, zum Beispiel „Akzent warm“ statt nur „Orange“.
5. Speichere die Farbe.
6. Die neue Kachel erscheint in deiner Farbpalette und kann dort wieder ausgewählt werden.

Fahre mit dem Mauszeiger über eine eigene Farbkachel, wenn du einen ähnlichen Ton nicht sicher unterscheiden kannst. Die Oberfläche zeigt dann die gespeicherte Bezeichnung. Das ist besonders hilfreich, wenn mehrere Nuancen ähnlich aussehen.

## Farbwerte verstehen und sauber eingeben

Im Farbwähler kannst du zwischen mehreren Formaten wechseln:

* **HEX** ist ein sechsstelliger Wert wie `#1A73E8`. Er ist der verbreitete Farbwert für Webseiten.
* **RGB** beschreibt einen Farbton mit drei Zahlen für Rot, Grün und Blau, zum Beispiel `rgb(26,115,232)`.
* **Eigener Wert** kann einen vorbereiteten Platzhalter verwenden, etwa `{{ custom_values.hauptfarbe }}`.

Ein eigener Wert ist nur speicherbar, wenn der zugehörige Platzhalter in deinem Standort bereits existiert und zu einem gültigen Farbwert aufgelöst wird. Damit werden defekte Verweise verhindert. Ändert sich der hinterlegte Wert später, aktualisieren sich die Stellen, die genau diesen Platzhalter verwenden.

Wähle das Format, das zu deiner Ausgangslage passt. Liegt dir ein verbindlicher HEX-Wert vor, ist HEX am einfachsten zu prüfen. Nutzt ihr einen gepflegten Platzhalter, ist ein eigener Wert sinnvoll – aber nur, wenn seine Einrichtung und sein tatsächlicher Wert bereits kontrolliert sind.

## Doppelte Farben vermeiden

Versuchst du, einen Farbton zu speichern, der bereits in der Palette vorhanden ist, markiert der Farbwähler den doppelten Wert und fordert eine Anpassung. Das ist keine Fehlfunktion, sondern verhindert, dass sich eine Palette mit gleichen Farbtönen unter verschiedenen Namen füllt.

In diesem Fall hast du zwei saubere Optionen:

1. Verwende die bereits vorhandene Farbkachel.
2. Passe den Wert an, wenn du tatsächlich eine andere Nuance benötigst.

Suche zuerst nach einem ähnlichen Namen und kontrolliere bei Bedarf den Wert, bevor du eine neue Farbe anlegst.

## Zentrale eigene Farben für mehrere Inhalte verwalten

Zentrale eigene Farben sind die richtige Wahl, wenn eine Änderung an allen damit verbundenen Stellen sichtbar werden soll. Sie werden einmal in den globalen Einstellungen angelegt und erscheinen anschließend in unterstützten Farbwählern.

### Zentrale Farbe anlegen

1. Öffne **Marketing** > **Brand Boards**.
2. Wähle oben rechts **Globale Einstellungen**.
3. Öffne den Bereich **Eigene Farben**.
4. Wähle **Hinzufügen** > **Neu anlegen**.
5. Gib einen klaren Namen und einen HEX- oder RGB-Wert ein oder wähle den Farbton im Farbfeld.
6. Speichere die Farbe.

Erst nachdem mindestens eine zentrale eigene Farbe angelegt wurde, erscheint diese Gruppe im Farbwähler unterstützter Editoren.

### Zentrale Farbe anwenden

1. Öffne eine E-Mail, Website- oder Funnel-Seite, ein Formular, eine Umfrage oder einen Countdown-Timer.
2. Wähle ein Element mit Farbeinstellung aus, etwa Text, Schaltfläche, Hintergrund oder Rahmen.
3. Öffne den Farbwähler.
4. Klicke in der Gruppe **Zentrale Farben** auf das gewünschte Farbfeld.
5. Speichere den Inhalt und prüfe die Darstellung.

Über **Verwalten** im Farbwähler kannst du – wenn diese Schaltfläche verfügbar ist – direkt zu den globalen Einstellungen wechseln.

### Zentrale Farbe ändern oder löschen

Eine Änderung an einer zentralen Farbe wirkt sofort auf alle Designs, die genau dieses zentrale Farbfeld verwenden. Prüfe deshalb vor einer Änderung mindestens eine wichtige Website-Seite, einen Funnel, ein Formular und eine E-Mail.

Zum Bearbeiten oder Umbenennen öffnest du in den globalen Einstellungen das Stift-Symbol der Farbe. Das Papierkorb-Symbol entfernt eine zentrale Farbe aus den Farbwählern. Gehe damit besonders vorsichtig um: Je nachdem, wie der jeweilige Editor Farbfelder speichert, können Designs, die diese Farbe verwendet haben, auf die Entfernung reagieren.

## Bestehende Farbwerte in die zentrale Palette übernehmen

Sind Farbtöne bereits als vorbereitete Werte gepflegt, kannst du sie in die zentrale Palette kopieren.

1. Öffne **Marketing** > **Brand Boards** > **Globale Einstellungen** > **Eigene Farben**.
2. Wähle **Hinzufügen** > **Importieren**.
3. Suche in der Liste nach einem passenden Farbwert.
4. Wähle nur Einträge aus, die tatsächlich gültige Farben enthalten, zum Beispiel einen HEX-Wert.
5. Klicke auf **Importieren**.
6. Kontrolliere danach Namen und sichtbaren Farbton in der zentralen Übersicht.

Der Import erstellt eine Kopie für die zentrale Verwaltung. Eine spätere Änderung des ursprünglichen Werts verändert diese Kopie nicht automatisch.

## Symbolfarbe bei Schaltflächen getrennt gestalten

Bei einer Schaltfläche mit Symbol kannst du die Symbolfarbe unabhängig vom Text und Zusatztext festlegen. Das ist nützlich, wenn ein Symbol sichtbar bleiben soll, ohne die Lesbarkeit des Schaltflächentexts zu verändern.

1. Wähle die Schaltfläche im Seiten-Editor aus.
2. Öffne deren Bereich für Farben.
3. Suche die Einstellung **Symbolfarbe**.
4. Wähle dort einen Farbton über den Farbwähler.
5. Prüfe Symbol, Text und Hintergrund zusammen auf ausreichend starken Kontrast.

Ändere die Symbolfarbe nicht nur nach Geschmack. Sie muss auf dem Hintergrund klar erkennbar bleiben und darf Text oder Zusatztext nicht optisch überlagern.

## Farbänderungen sicher prüfen

Gehe bei einer zentralen Farbänderung immer in dieser Reihenfolge vor:

1. Notiere den bisherigen Wert und den neuen Wert.
2. Ermittle wichtige Stellen, an denen die zentrale Farbe verwendet wird.
3. Ändere nur dieses eine zentrale Farbfeld und speichere.
4. Öffne dieselben Inhalte erneut.
5. Prüfe Kontrast, Lesbarkeit und Sichtbarkeit wichtiger Schaltflächen auf großer und kleiner Ansicht.
6. Teste Formulare und Schaltflächen in einer Vorschau.
7. Erst wenn die Darstellung stimmt, ist die Umstellung abgeschlossen.

Bei Markenfarben gilt der umgekehrte Prüfpunkt: Die Änderung greift für künftige Auswahlvorgänge. Bereits gespeicherte Farben auf bestehenden Elementen bleiben unverändert. Wenn du ältere Inhalte angleichen möchtest, musst du diese gezielt öffnen und dort die gewünschte Farbe erneut auswählen.

## Praxisbeispiel

Ein Betrieb möchte eine einheitliche Farbe für alle Anfrage-Schaltflächen verwenden. Das Team legt in den globalen Einstellungen die zentrale Farbe **Hauptfarbe** an. Anschließend wählt es diese Farbe im Farbwähler der Website, des Anfrage-Funnels, des Formulars und einer Bestätigungs-E-Mail aus.

Später ändert sich der verbindliche Farbton. Das Team bearbeitet nur **Hauptfarbe**, notiert den neuen Wert und prüft anschließend genau diese vier Inhalte. Auf der Website kontrolliert es zusätzlich ein Symbol in einer Schaltfläche, weil dessen Farbe getrennt vom Text eingestellt sein kann. Erst wenn alle Varianten gut lesbar sind, ist die Umstellung fertig.

## Häufige Fragen und Fehler

### Die Gruppe zentraler Farben fehlt

Lege zuerst mindestens eine Farbe unter **Globale Einstellungen** > **Eigene Farben** an. Danach erscheint die Gruppe in unterstützten Farbwählern. Prüfe außerdem, ob du ein Element ausgewählt hast, das überhaupt eine Farbeinstellung besitzt.

### Beim Speichern erscheint ein Hinweis auf eine doppelte Farbe

Der eingegebene Wert existiert bereits in der Palette oder ein eigener Wert löst sich auf denselben Farbton auf. Verwende die vorhandene Kachel oder ändere den Wert bewusst.

### Ein eigener Farbwert lässt sich nicht speichern

Prüfe, ob der verwendete Platzhalter im Standort existiert und einen gültigen Farbwert enthält. Ein fehlender oder ungeeigneter Wert wird nicht gespeichert.

### Eine Änderung hat bestehende Seiten nicht aktualisiert

Prüfe, welche Farbgruppe ursprünglich verwendet wurde. Markenfarben und lokale eigene Farben werden nicht rückwirkend auf bereits gespeicherte Elemente übertragen. Nur die Anwendung eines zentralen eigenen Farbfelds verbindet diese Stelle mit dessen späteren Änderungen.

### Ich möchte eine zentrale Farbe löschen

Lösche sie nicht, bevor du die wichtigen verwendenden Inhalte geprüft hast. Die Entfernung nimmt das Farbfeld aus den Farbwählern; je nach Editor können bestehende Designs darauf reagieren. Ein sicherer Weg ist, zunächst eine Ersatzfarbe anzulegen, betroffene Inhalte zu prüfen und erst danach über eine Löschung zu entscheiden.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/farben-in-websites-und-funnels-konsistent-verwenden.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.