# Brauner Farbverlauf: Kaffee-, Karamell- und Erdtöne

[Canonical HTML page](https://gradiently.design/de/guide/brown-gradient)

Braun gilt als trist, doch fast jeder gute braune Verlauf steckt in einer Kaffeetasse oder einer Töpferei. So bleibt er warm, mit Codes für jede Stimmung.

## The short version

- Braun ist ein dunkles, wenig gesättigtes Orange, ein guter brauner Farbverlauf behält also durchgehend einen orangen oder roten Farbton.
- Braune Verläufe wirken trist, wenn sie Richtung Grau oder Grün driften; sie wirken satt, wenn sie warm bleiben.
- Kaffee-Verläufe gehen von fast schwarzem Espresso zu heller Crema, Karamell-Verläufe sind heller und goldener.
- Einen braunen Verlauf in OKLCH zu interpolieren hält die Mitte frisch, was bei langen Mischungen nützlich ist.
- Creme, Salbeigrün, Staubblau und Senf sind verlässliche Partner für Braun in Schrift und Akzenten.

Ein **brauner Farbverlauf** ist eigentlich ein dunkles, gedämpftes Orange von tief bis hell: Espresso in Crema, Schokolade in Karamell, Ton in Sand. Lässt du diesen warmen Farbton durch jeden Stopp laufen, wirkt Braun satt, gemütlich und handwerklich. Lässt du es Richtung Grau oder Grün rutschen, sieht es nach Matsch aus. Unten findest du Codes für Kaffee-, Karamell-, Schokoladen-, Erd- und Whiskybraun und die Kombinationen, die zu ihnen passen.

## Warum braune Verläufe schlammig werden

Im Regenbogen gibt es kein Braun. Was wir Braun nennen, ist Orange oder Rot mit gesenkter Helligkeit und gedämpfter Sättigung. Das hat eine praktische Folge: Verliert ein Stopp in deinem Verlauf seine Wärme, weil er zu viel Grau oder einen Hauch Grün hat, wirkt die ganze Mischung schmutzig. Halte jeden Stopp auf der warmen Seite und dunkle durch geringere Helligkeit ab, statt Schwarz hinzuzufügen. [Schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) zeigt den Effekt nebeneinander.

- Espresso: #1b0f0a
- Dunkle Röstung: #3b2216
- Kaffee: #6b3f26
- Toffee: #a85f24
- Karamell: #e0a15a
- Terrakotta: #c0603a
- Crema: #f3e3cc

Eine warme Braunfamilie. Jedes Farbfeld, auch das dunkelste, hat noch ein wenig Orange in sich.

Einen eigenen braunen Verlauf kannst du aus jedem Orange in einer Farbauswahl bauen, die Farbton, Sättigung und Helligkeit zeigt. Es sind vier Schritte:

1. **Einen warmen Farbton wählen** Wähle einen Farbton zwischen etwa 20 und 40 Grad: niedriger für rötliche Brauntöne wie Backstein und Terrakotta, höher für goldene wie Karamell.
2. **Die Sättigung dämpfen** Senke die Sättigung auf einen Wert zwischen 35 % und 65 %. Voll gesättigt bleibt es Orange; zu niedrig wird es grau.
3. **Drei Helligkeitsstopps setzen** Nimm denselben Farbton in drei Helligkeitsstufen, zum Beispiel 10 %, 30 % und 60 %. Diese Spreizung macht die Mischung sichtbar.
4. **Das helle Ende wärmer schieben** Verschiebe den hellsten Stopp ein paar Grad Richtung Gelb. Echtes Licht auf Holz, Kaffee oder Ton wirkt in den Lichtern wärmer.

## Kaffee Farbverlauf Codes

Kaffeebraun ist das nützlichste der Auswahl. Espresso ist fast schwarz und trägt helle Schrift mit echter Tiefe. Crema-Guss läuft vom hellen Schaum oben auf einer Tasse in den Kaffee darunter. Mokka liegt dazwischen und ergibt einen kräftigen, neutralen Hintergrund für Speisekarten und Preislisten.

- Espresso: `linear-gradient(160deg, #1b0f0a 0%, #3b2216 50%, #6b3f26 100%)`
- Crema-Guss: `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`
- Mokka: `linear-gradient(135deg, #2a1810 0%, #5a3522 45%, #9b6a4a 100%)`

Drei Kaffee-Verläufe. Crema-Guss braucht dunkle Schrift oben und helle unten, setze die Worte also nur in eine Zone.

Cafés und Röstereien finden eine komplette Identität auf Basis dieser Töne unter [Branding für Coffeeshops](https://gradiently.design/de/guide/coffee-shop-branding) und Ideen für Tüten und Etiketten unter [Verpackung für Kaffeeröstereien](https://gradiently.design/de/guide/coffee-roaster-packaging).

## Karamell und Schokolade Farbverlauf Codes

Karamell ist Braun in seiner goldensten und freundlichsten Form. Es glüht, ideal für Bäckereien, Honig, Herbstangebote und alles Süße. Schokolade ist das Gegenteil: tief, glänzend und genussvoll. Ein radialer Verlauf mit weichem Glanzlicht gibt Schokolade den Schimmer, den sie in echt hat.

- Karamell: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Toffee: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Zartbitterschokolade: `radial-gradient(circle at 30% 30%, #6b3a22 0%, #3a1d10 50%, #160905 100%)`
- Whisky im Glas: `radial-gradient(ellipse at 60% 30%, #f0b45c 0%, #b8661e 35%, #5a2a0c 70%, #1f0d04 100%)`

Süße, genussvolle Brauntöne. Whisky ist ein Karamell, von innen beleuchtet, der dramatischste Verlauf in diesem Artikel.

## Erd-, Ton- und Terrakotta-Verläufe

Erdbraun neigt zu Rot und wirkt handgemacht: Ton, Backstein, Leder, Walnuss. Es passt zu Keramik, Pflanzenläden, Outdoor-Ausrüstung und allem mit natürlicher oder mediterraner Anmutung. Besonders Terrakotta ist zum Liebling warmer, moderner Marken geworden, weil es zugleich erdig und frisch wirkt.

- Terrakotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Wüstenton: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Walnuss und Leder: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Erdbraun. Terrakotta ist das leuchtendste und braucht am wenigsten Hilfe durch Akzente.

Um sie zu einem ganzen Schema zu erweitern, sieh dir [Erdtöne](https://gradiently.design/de/guide/earth-tone-colors) und [Herbst-Farbpaletten](https://gradiently.design/de/guide/autumn-color-palettes) an. Für das hellere Ende der Familie, Sand und Hafer, setzen die Codes für den [beigen Farbverlauf](https://gradiently.design/de/guide/beige-gradient) bei Wüstenton an.

## Eine lange braune Mischung in CSS warm halten

Browser mischen Verläufe standardmäßig in sRGB, und eine lange Mischung von tiefem Braun zu hellem Karamell kann in eine leicht gräuliche Mitte durchhängen. Bittest du den Browser, in OKLCH zu interpolieren, bleiben Farbton und Buntheit von Ende zu Ende stabiler. Es wird in aktuellen Versionen der großen Browser unterstützt, und der Hex-Fallback deckt den Rest ab.

```css
.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}
```

Dieselbe Mischung von Espresso zu Karamell, zweimal geschrieben. Browser, die die zweite Zeile verstehen, nutzen sie; andere behalten die erste.

[CSS-Verläufe in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch) erklärt den Farbraum und wann sich die zusätzliche Zeile lohnt.

## Was zu einem braunen Farbverlauf passt

| Partner | Hex | Stimmung | Probiere es bei |
| --- | --- | --- | --- |
| Creme | `#f6efe4` | Klassisch, gemütlich | Café-Karten, Bäckerei-Posts |
| Salbeigrün | `#a3b18a` | Natürlich, ruhig | Pflanzenläden, Wellness, Tee |
| Staubblau | `#8aa1b4` | Frisch, unerwartet | Keramik, Denim, Wohnaccessoires |
| Senf | `#d6a23a` | Retro, warm | Schallplatten, Vintage, Herbstaktionen |
| Zartrosa | `#e8c4b8` | Weich, modern | Beauty, Kerzen, Papeterie |

Nutze den Partner für Schrift oder einen Akzent. Blau ist die mutigste Wahl, weil es Orange gegenüberliegt und Braun dadurch wärmer wirken lässt.

## Ein brauner Farbverlauf in einem echten Post

Braune Hintergründe tragen warme Alltagsneuigkeiten besonders gut: eine neue Röstung, ein saisonales Gebäck, ein Workshop. Cremefarbene Schrift am tiefen Ende ist die sichere Wahl, und ein Senf- oder Karamell-Akzent für ein Wort bringt etwas Energie. [Instagram-Ideen für Bäckereien](https://gradiently.design/de/guide/bakery-instagram-ideas) hat einen Monat an Posts, die zu diesen Tönen passen.

Ein Hochformat-Post mit tiefem kaffeebraunem Hintergrund und den Worten Neue Röstung, Dienstag in cremefarbener Schrift

Die Ankündigung einer Rösterei in einem kaffeefarbenen Mark. Cremefarbene Schrift sitzt auf dem dunkelsten Teil des Hintergrunds.

Wer wöchentlich postet, hat die Schwierigkeit, jeden Post im selben warmen Braun zu halten. Mit Gradiently wählst du einen warmen braunen Mark einmal, und jede Vorlage, Story und Karte trägt ihn, und Automatische Farbe wählt für jede Zeile cremefarbene oder Espresso-Schrift, damit in den dunkleren Ecken nichts verloren geht.

## FAQ

### Welche Farben ergeben einen braunen Farbverlauf?

Warme Brauntöne aus einer Familie, etwa Espresso #1b0f0a, Kaffee #6b3f26 und Karamell #e0a15a. Halte jeden Stopp auf der orangen oder roten Seite, damit die Mischung satt bleibt.

### Warum sieht mein brauner Farbverlauf matt aus?

Ein oder mehrere Stopps sind Richtung Grau oder Grün gedriftet. Dunkle Braun durch geringere Helligkeit ab, statt Schwarz hinzuzufügen, und halte den Farbton warm.

### Welche Textfarbe passt auf einen braunen Hintergrund?

Creme oder warmes Weiß auf dunklem Braun, Espresso oder Anthrazit auf hellem Karamell und Sand. Senf funktioniert für ein einzelnes Akzentwort.

### Was ist ein guter Kaffee Farbverlauf?

Probiere `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, der oben von Crema zu Kaffee unten läuft.