# Bruin kleurverloop: koffie, karamel en aardetinten

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

Bruin staat bekend als saai, maar bijna elk goed bruin kleurverloop zit verstopt in een koffiekopje of een pottenbakkerij. Zo houd je het warm, met codes voor elke sfeer.

## The short version

- Bruin is een donker, weinig verzadigd oranje, dus een goed bruin kleurverloop houdt een oranje of rode tint van begin tot eind vast.
- Bruine verlopen ogen saai als ze naar grijs of groen afdrijven; ze ogen rijk als ze warm blijven.
- Koffieverlopen gaan van bijna zwarte espresso naar bleke crema, terwijl karamelverlopen lichter en gouden zijn.
- Een bruin kleurverloop interpoleren in OKLCH voorkomt dat het midden dof wordt, wat handig is bij lange overgangen.
- Crème, saliegroen, stoffig blauw en mosterd zijn betrouwbare partners voor bruin in letters en accenten.

Een **bruin kleurverloop** is eigenlijk een donker, gedempt oranje dat van diep naar licht overloopt: espresso in crema, chocolade in karamel, klei in zand. Laat die warme tint door elke stop lopen en bruin ziet er rijk, gezellig en ambachtelijk uit. Laat het naar grijs of groen glijden en het lijkt op modder. Hieronder staan codes voor koffie-, karamel-, chocolade-, aarde- en whiskybruin, en de combinaties die erbij passen.

## Waarom bruine verlopen modderig worden

Er zit geen bruin in de regenboog. Wat we bruin noemen is oranje of rood met de helderheid omlaag en de verzadiging gedempt. Dat heeft een praktisch gevolg: als een stop in je kleurverloop zijn warmte verliest, door te veel grijs of een zweem groen, leest de hele overgang als vuil. Houd elke stop aan de warme kant en maak donkerder door de helderheid te verlagen in plaats van zwart toe te voegen. [Modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) laat het effect naast elkaar zien.

- Espresso: #1b0f0a
- Donkere roast: #3b2216
- Koffie: #6b3f26
- Toffee: #a85f24
- Karamel: #e0a15a
- Terracotta: #c0603a
- Crema: #f3e3cc

Een warme bruine familie. Elk staal, zelfs het donkerste, heeft nog een beetje oranje in zich.

Je kunt een eigen bruin kleurverloop bouwen vanuit elk oranje in een kleurenkiezer die tint, verzadiging en helderheid toont. Het kost vier stappen:

1. **Kies een warme tint** Kies een tint tussen ongeveer 20 en 40 graden: lager voor roodachtige bruintinten zoals baksteen en terracotta, hoger voor gouden tinten zoals karamel.
2. **Demp de verzadiging** Breng de verzadiging omlaag naar ergens tussen 35% en 65%. Volledig verzadigd blijft het oranje; te laag wordt het grijs.
3. **Stel drie helderheidsstops in** Gebruik dezelfde tint op drie helderheidsniveaus, bijvoorbeeld 10%, 30% en 60%. Die spreiding maakt de overgang zichtbaar.
4. **Maak het lichte uiteinde iets warmer** Schuif de lichtste stop een paar graden richting geel. Echt licht op hout, koffie of klei ziet er in de highlights warmer uit.

## Codes voor een koffieverloop

Koffiebruin is het nuttigste van de set. Espresso is bijna zwart en draagt lichte letters met echte diepte. De crema-schenking loopt van het bleke schuim bovenin een kop naar de koffie eronder. Mokka zit daartussenin en maakt een sterke, neutrale achtergrond voor menu’s en prijslijsten.

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

Drie koffieverlopen. De crema-schenking vraagt donkere letters bovenin en lichte onderin, dus zet de woorden in één zone.

Cafés en branders vinden een complete identiteit op basis van deze tinten bij [branding voor een koffiebar](https://gradiently.design/nl/guide/coffee-shop-branding), en ideeën voor zakken en etiketten bij [verpakking voor koffiebranders](https://gradiently.design/nl/guide/coffee-roaster-packaging).

## Codes voor karamel- en chocoladeverlopen

Karamel is bruin op zijn gouddste en vriendelijkst. Het gloeit, wat het ideaal maakt voor bakkerijen, honing, herfstacties en alles wat zoet is. Chocolade is het tegenovergestelde: diep, glanzend en verleidelijk. Een radiaal kleurverloop met een zachte highlight geeft chocolade de glans die het in het echt heeft.

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

Zoete, verleidelijke bruintinten. Whisky is karamel van binnenuit verlicht, het dramatischste kleurverloop in dit artikel.

## Kleurverlopen in aarde, klei en terracotta

Aardebruin helt naar rood en voelt handgemaakt: klei, baksteen, leer, walnoot. Het past bij keramiek, plantenwinkels, outdoorspullen en alles met een natuurlijke of mediterrane sfeer. Vooral terracotta is een favoriet geworden voor warme, moderne merken, omdat het tegelijk aards en fris leest.

- Terracotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Woestijnklei: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Walnoot en leer: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Aardebruintinten. Terracotta is het felst en heeft de minste hulp van accenten nodig.

Wil je hier een volledig kleurenschema van maken, zie dan [aardetinten](https://gradiently.design/nl/guide/earth-tone-colors) en [herfstkleurenpaletten](https://gradiently.design/nl/guide/autumn-color-palettes). Voor het lichtere uiteinde van de familie, zand en haver, pakken de codes van het [beige kleurverloop](https://gradiently.design/nl/guide/beige-gradient) het over van woestijnklei.

## Een lange bruine overgang warm houden in CSS

Browserverlopen mengen standaard in sRGB, en een lange overgang van diep bruin naar bleek karamel kan wegzakken in een enigszins grijzig midden. De browser vragen om in OKLCH te interpoleren houdt tint en chroma van begin tot eind stabieler. Het wordt ondersteund in actuele versies van de grote browsers, en de hexterugval dekt de rest.

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

Dezelfde overgang van espresso naar karamel, twee keer geschreven. Browsers die de tweede regel begrijpen gebruiken die; andere houden de eerste.

[CSS-verlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch) legt de kleurruimte uit en wanneer de extra regel de moeite waard is.

## Wat past bij een bruin kleurverloop

| Partner | Hex | Sfeer | Probeer het op |
| --- | --- | --- | --- |
| Crème | `#f6efe4` | Klassiek, gezellig | Cafémenu’s, bakkerijposts |
| Saliegroen | `#a3b18a` | Natuurlijk, rustig | Plantenwinkels, wellness, thee |
| Stoffig blauw | `#8aa1b4` | Fris, onverwacht | Keramiek, denim, woonaccessoires |
| Mosterd | `#d6a23a` | Retro, warm | Platen, vintage, herfstacties |
| Blush | `#e8c4b8` | Zacht, modern | Beauty, kaarsen, schrijfwaren |

Gebruik de partner voor letters of één accent. Blauw is de gedurfdste keuze omdat het tegenover oranje ligt, waardoor bruin warmer lijkt.

## Een bruin kleurverloop in een echte post

Bruine achtergronden dragen warm, alledaags nieuws bijzonder goed: een nieuwe roast, een seizoensbak, een workshop. Crèmekleurige letters op het diepe uiteinde zijn de veilige keuze, en een mosterd- of karamelaccent op één woord voegt wat energie toe. [Instagramideeën voor een bakkerij](https://gradiently.design/nl/guide/bakery-instagram-ideas) heeft een maand aan posts die bij deze tinten passen.

Een staande post met een diepe koffiebruine achtergrond en de woorden Nieuwe roast, dinsdag in crèmekleurige letters

De aankondiging van een brander in een koffiekleurige Mark. Crèmekleurige letters staan op het donkerste deel van de achtergrond.

Als je wekelijks post, is het moeilijkste elke post in hetzelfde warme bruin te houden. Met Gradiently kies je één keer een warme bruine Mark en elk sjabloon, elke story en elk menu draagt hem, en Auto-inkt kiest voor elke regel crème of espresso als letterkleur zodat niets verloren gaat in de donkerdere hoeken.

## FAQ

### Welke kleuren maken een bruin kleurverloop?

Warme bruintinten uit één familie, zoals espresso #1b0f0a, koffie #6b3f26 en karamel #e0a15a. Houd elke stop aan de oranje of rode kant zodat de overgang rijk blijft.

### Waarom ziet mijn bruine kleurverloop er saai uit?

Een of meer stops zijn naar grijs of groen afgedreven. Maak bruin donkerder door de helderheid te verlagen in plaats van zwart toe te voegen, en houd de tint warm.

### Welke tekstkleur komt op een bruine achtergrond?

Crème of warm wit op donkerbruin, en espresso of antraciet op licht karamel en zand. Mosterd werkt voor één accentwoord.

### Wat is een goed koffiekleurverloop?

Probeer `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, dat van crema bovenin naar koffie onderin loopt.