> ## Documentation Index
> Fetch the complete documentation index at: https://docs.osiro.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Farben

> Die Farbgestaltung Ihres Funnels bzw. Ihrer Landing Page festlegen.

<Note>Dieser Design-Bereich ist identisch für Funnel Editor und Landing Page Editor.</Note>

## Eigene Konfiguration

Im Design-Bereich legen Sie das Farbschema für den gesamten Funnel bzw. die gesamte Landing Page fest. Statt jedes Element einzeln einzufärben, definieren Sie zentrale Themenfarben, die automatisch überall verwendet werden.

<img src="https://mintcdn.com/osiro/gPz4yEyxvffcAliw/images/convert/design/colors.png?fit=max&auto=format&n=gPz4yEyxvffcAliw&q=85&s=a88f601009053c3471facb4a6a69d7db" width="2940" height="1846" data-path="images/convert/design/colors.png" />

<Tip>Ein hier erstelltes Farbschema können Sie anschließend im [Styleguide](/convert/design/styleguide) unter einem eigenen Namen speichern, um es auch in anderen Funnels oder Landing Pages wiederzuverwenden.</Tip>

***

## Themenfarben

Die vier Themenfarben sind in Levels unterteilt und bestimmen, wo eine Farbe innerhalb der Oberfläche zum Einsatz kommt – Level 1 wird beispielsweise hauptsächlich für Buttons und ähnliche Aktionselemente verwendet.

Änderungen wirken sich sofort auf alle Steps und Blöcke bzw. alle Bereiche und Elemente aus.

***

## Elementfarben und Oberfläche

Des Weiteren haben Sie die Möglichkeit, zentrale Farben für die Elemente sowie für die Oberfläche festzulegen.

**Elementfarben:**

| Einstellung          | Verwendung                                                     |
| -------------------- | -------------------------------------------------------------- |
| **Background**       | Hintergrundfarbe von Elementen wie Auswahlfeldern und Eingaben |
| **Stroke**           | Randfarbe von Elementen wie Auswahlfeldern und Eingaben        |
| **Input Background** | Hintergrundfarbe von Eingabefeldern                            |
| **Input Stroke**     | Randfarbe von Eingabefeldern                                   |

**Oberfläche:**

| Einstellung           | Verwendung                          |
| --------------------- | ----------------------------------- |
| **Haupt-Hintergrund** | Hintergrundfarbe der gesamten Seite |
| **Box-Hintergrund**   | Hintergrundfarbe des Box-Containers |

***

## Überschrift

Für die Farbe der Überschriften haben Sie 3 verschiedene Optionen:

| Option                 | Bedeutung                                                                     |
| ---------------------- | ----------------------------------------------------------------------------- |
| **Automatisch**        | Der automatische Modus setzt die Farbe basierend auf dem Hintergrundkontrast. |
| **Primär erzwingen**   | Die Farbe der Überschrift passt sich Ihrer Primärfarbe an                     |
| **Sekundär erzwingen** | Die Farbe der Überschrift passt sich Ihrer Sekundärfarbe an                   |

***

## Häufige Fragen

<AccordionGroup>
  <Accordion title="Gibt es Standard-Voreinstellungen für die Farben?">
    Ja, beim Erstellen eines neuen Funnels oder einer neuen Landing Page wird automatisch ein Standard-Farbsystem angewendet, das Sie jederzeit anpassen können.
  </Accordion>

  <Accordion title="Kann ich einzelne Blöcke bzw. Elemente von der globalen Farbe abweichend gestalten?">
    Ja, jeder Block bzw. jedes Element kann separat angepasst werden – entweder mit einer der Themenfarben (Level 1–4), einer Abstufung davon oder einer komplett benutzerdefinierten Farbe.
  </Accordion>

  <Accordion title="Muss ich die Überschriftenfarbe manuell anpassen, wenn ich die Hintergrundfarbe ändere?">
    Nein, im automatischen Modus passt sich die Überschriftenfarbe selbstständig an den Kontrast des Hintergrunds an.
  </Accordion>
</AccordionGroup>