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

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 zeigt den Effekt nebeneinander.

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. 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. 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. 3

   Drei Helligkeitsstopps setzen

   Nimm denselben Farbton in drei Helligkeitsstufen, zum Beispiel 10 %, 30 % und 60 %. Diese Spreizung macht die Mischung sichtbar.

4. 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.

Cafés und Röstereien finden eine komplette Identität auf Basis dieser Töne unter Branding für Coffeeshops und Ideen für Tüten und Etiketten unter Verpackung für Kaffeeröstereien.

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.

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.

Um sie zu einem ganzen Schema zu erweitern, sieh dir Erdtöne und Herbst-Farbpaletten an. Für das hellere Ende der Familie, Sand und Hafer, setzen die Codes für den beigen Farbverlauf 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.

.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%);
}

CSS-Verläufe in OKLCH erklärt den Farbraum und wann sich die zusätzliche Zeile lohnt.

Was zu einem braunen Farbverlauf passt

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 hat einen Monat an Posts, die zu diesen Tönen passen.

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.