---
titel: Farben
quelle: https://brand.meinklarbuch.de/farben
stand: 2026-09-24
---

# Farben

Die Palette trägt die Marke durch drei Flächenfarben – **Wald**, **Flieder**, **Creme** – und einen Signalton, **Minze**, der Wichtiges markiert. **Koralle** und **Amber** gibt es nur als Status.

## Verhältnis

| Einsatz | Anteil |
|---|---|
| Creme / Karte / Weiß | ca. 60 % |
| Wald | ca. 25 % |
| Flieder | ca. 10 % |
| Minze | ca. 5 % |

Marketing (Website, Folien, Druck) steht auf **Creme**. Die App ist heller: **App-Grund** mit weißen Karten und einer Wald-Karte als Anker (siehe Produkt-UI).

## Palette

| Farbe | Token | Hex | RGB | Text darauf (Kontrast) | Einsatz |
|---|---|---|---|---|---|
| Wald | `farbe.wald` | #183D2F | 24, 61, 47 | Creme 11,2:1 | Markenfarbe. Dunkle Flächen (Titel- und Schlussfolien, Navigation), Headlines und Primär-Buttons auf creme. Text darauf: creme. |
| Wald hover | `farbe.wald-hover` | #24573F | 36, 87, 63 | Creme 7,8:1 | Hover- und Pressed-Zustand für Wald-Flächen; Balken zweiter Ordnung in Diagrammen. |
| Minze | `farbe.minze` | #BDEACB | 189, 234, 203 | Tinte 11,9:1 | Klar-Markierung auf creme und karte, positive Status-Hintergründe, Akzent auf wald (9:1). Text darauf: wald oder tinte. Dekorativ – die Information trägt immer der Text. |
| Minze hell | `farbe.minze-hell` | #D2F7DC | 210, 247, 220 | Tinte 13,6:1 | Klar-Markierung und aktive Optionen auf flieder – heller als minze, damit die Markierung auf Flieder sichtbar bleibt. Text darauf: wald (10,3:1). |
| Minze kräftig | `farbe.minze-kraeftig` | #6CC690 | 108, 198, 144 | Tinte 7,6:1 | Buchrücken des Logos und grafische Akzente auf hellen Gründen (1,9:1 zu creme, 5,8:1 zu wald). Kein Text. |
| Guthaben | `farbe.guthaben` | #2E7D52 | 46, 125, 82 | Creme 4,7:1 | Positive Beträge und Guthaben als Text auf creme oder karte (4,7:1). |
| Flieder | `farbe.flieder` | #D8CCF6 | 216, 204, 246 | Tinte 10,5:1 | Zweite Markenfläche: Kennzahlen-Panels, Illustrationsgründe, eine Fokusfolie pro Deck. Text darauf: tinte (10,5:1), wald (7,9:1) oder tinte-2 (6,1:1). Markierungen darauf in minze-hell. |
| Flieder hell | `farbe.flieder-hell` | #EEE9FC | 238, 233, 252 | Tinte 13,3:1 | Ruhige Hinterlegung von Diagrammflächen und Info-Boxen. |
| Creme | `farbe.creme` | #FBF7EE | 251, 247, 238 | Tinte 14,8:1 | Seitengrund für Web, Produkt und Content-Folien. |
| Karte | `farbe.karte` | #FFFDF8 | 255, 253, 248 | Tinte 15,6:1 | Karten und Eingabeflächen auf creme. |
| Tinte | `farbe.tinte` | #14261E | 20, 38, 30 | Creme 14,8:1 | Fließtext und Zahlen auf creme, karte, minze und flieder. |
| Tinte 2 | `farbe.tinte-2` | #3C4B44 | 60, 75, 68 | Creme 8,6:1 | Sekundärer Text auf creme, karte und flieder (8,6:1 / 6,1:1). |
| Grau | `farbe.grau` | #5F6B65 | 95, 107, 101 | Creme 5,2:1 | Bildunterschriften, Quellen, Metadaten auf creme und karte (5,2:1), nicht kleiner als 13 px. Auf flieder nur ab 24 px (3,7:1). |
| Linie | `farbe.linie` | #E5DFD1 | 229, 223, 209 | Tinte 11,9:1 | Haarlinien, Kartenrahmen, Tabellenlinien. |
| Koralle | `farbe.koralle` | #C4492E | 196, 73, 46 | Creme 4,5:1 | Nur für Nachzahlungen, Fehler und kritische Fristen – als Text auf creme oder karte (4,5:1); auf flieder nur ab 24 px fett oder als koralle-hell-Badge. Nie als Deko. |
| Koralle hell | `farbe.koralle-hell` | #FBE3DC | 251, 227, 220 | Tinte 12,9:1 | Hintergrund für kritische Status-Badges; Text darauf: koralle oder tinte. |
| Amber | `farbe.amber` | #E4A93B | 228, 169, 59 | Tinte 7,6:1 | Hinweise und offene Rückfragen als Punkt oder Fläche; Text darauf: tinte. |
| Amber hell | `farbe.amber-hell` | #FCEFD4 | 252, 239, 212 | Tinte 13,9:1 | Hintergrund für Hinweis-Badges; Text darauf: tinte. |
| App-Grund | `farbe.app-grund` | #F4F4F0 | 244, 244, 240 | Tinte 14,4:1 | Hintergrund der Anwendungen (Web und App) – heller als creme, damit weiße Karten schweben. |
| App-Karte | `farbe.app-karte` | #FFFFFF | 255, 255, 255 | Tinte 15,8:1 | Karten und Flächen in der Anwendung auf app-grund. |
| App-Linie | `farbe.app-linie` | #ECEAE4 | 236, 234, 228 | Tinte 13,2:1 | Trenner in Listen, Rahmen von Eingabefeldern und Pill-Buttons in der Anwendung. |
| App-Grau | `farbe.app-grau` | #66706B | 102, 112, 107 | Creme 4,8:1 | Labels und Metadaten in der Anwendung auf app-karte (4,9:1). |

## Regeln

- **Text:** Tinte auf hellen Flächen, Creme auf Wald. Auf Minze und Flieder immer Tinte oder Wald.
- **Minze ist nie Textfarbe**, sondern Fläche: Klar-Markierung, aktiver Zustand, positiver Status.
- **Koralle nur für Nachzahlung, Fehler, kritische Fristen** – als helles Badge (Koralle hell) mit Text in Tinte. Nie als Dekoration, nie als Fließtext.
- **Amber nur für offene Punkte** – als helles Badge (Amber hell).
- **Nie:** Verläufe, Flieder und Minze als große Flächen direkt nebeneinander ohne Creme-Abstand, neue Farben ohne Eintrag in den Tokens.

## Kontraste

Alle Textkombinationen erfüllen mindestens WCAG AA (4,5:1 für Text, 3:1 ab 24 px).

| Vordergrund | auf Creme | auf Flieder | auf Minze | auf Wald |
|---|---|---|---|---|
| Tinte | 14,8:1 ✓ | 10,5:1 ✓ | 11,9:1 ✓ | – |
| Wald | 11,2:1 ✓ | 7,9:1 ✓ | 9,0:1 ✓ | – |
| Tinte 2 | 8,6:1 ✓ | 6,1:1 ✓ | 6,9:1 ✓ | – |
| Grau | 5,2:1 ✓ | 3,7:1 nur ≥ 24 px | 4,2:1 nur ≥ 24 px | – |
| Koralle | 4,5:1 ✓ | 3,2:1 nur ≥ 24 px | 3,6:1 nur ≥ 24 px | – |
| Creme | – | – | – | 11,2:1 ✓ |
| Minze | – | – | – | 9,0:1 ✓ |

- Auf Flieder kein Grau und keine Koralle unter 24 px – negative Beträge dort als Koralle-hell-Badge oder auf einer Karte.
- Die Klar-Markierung ist Dekoration: Minze auf Creme, auf Flieder immer **Minze hell**. Die Information trägt der Text darauf (≥ 9:1).

## Datenvisualisierung

- Ist-Werte in **Wald**, der aktuelle Monat in **Minze kräftig**, Prognose in **Minze** und gestrichelt, Vergleich/Vorjahr in **Flieder**.
- **Guthaben** für positive, **Koralle** nur für negative Abweichungen und Nachzahlungen.
- Diagrammgrund Flieder hell oder Karte; Achsen in Grau.