# Brun gradient: kaffe, karamel og jordfarver med koder

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

Brun har ry for at se kedelig ud, men næsten hver eneste gode brune gradient gemmer sig i en kaffekop eller et keramikværksted. Sådan holder du den varm, med koder til hvert stemningsleje.

## The short version

- Brun er en mørk orange med lav mætning, så en god brun gradient bevarer en orange eller rød kulør hele vejen igennem.
- Brune gradienter ser kedelige ud, når de driver mod gråt eller grønt, og rige ud, når de forbliver varme.
- Kaffegradienter går fra næsten sort espresso til en lys crema, mens karamelgradienter ligger lysere og mere gyldne.
- Interpolerer du en brun gradient i OKLCH, undgår du, at midten bliver mat, hvilket er nyttigt til lange blandinger.
- Creme, salviegrøn, støvet blå og sennep er pålidelige partnere til brun i skrift og accenter.

En **brun gradient** er i virkeligheden en mørk, dæmpet orange, der blandes fra dyb til lys: espresso til crema, chokolade til karamel, ler til sand. Lad den varme kulør løbe gennem hvert stop, så ser brun rig, hyggelig og håndlavet ud. Lad den glide mod gråt eller grønt, og den ligner mudder. Herunder finder du koder til kaffe-, karamel-, chokolade-, jord- og whiskybrune toner og de farver, der passer til dem.

## Derfor bliver brune gradienter mudrede

Der er ingen brun i regnbuen. Det, vi kalder brun, er orange eller rød med lysstyrken skruet ned og mætningen dæmpet. Det har en praktisk konsekvens: Mister et stop i din gradient sin varme, fordi der er for meget gråt eller et strejf af grønt, virker hele blandingen beskidt. Hold hvert stop på den varme side, og gør farven mørkere ved at sænke lysstyrken i stedet for at tilsætte sort. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) viser effekten side om side.

- Espresso: #1b0f0a
- Mørkristet: #3b2216
- Kaffe: #6b3f26
- Toffee: #a85f24
- Karamel: #e0a15a
- Terrakotta: #c0603a
- Crema: #f3e3cc

En varm brun familie. Hver eneste farveprøve, selv den mørkeste, har stadig lidt orange i sig.

Du kan bygge din egen brune gradient ud fra en hvilken som helst orange i en farvevælger, der viser kulør, mætning og lysstyrke. Det tager fire greb:

1. **Vælg en varm kulør** Vælg en kulør mellem cirka 20 og 40 grader: lavere til rødlige brune toner som mursten og terrakotta, højere til gyldne som karamel.
2. **Dæmp mætningen** Sæt mætningen ned til et sted mellem 35 % og 65 %. Fuldt mættet forbliver den orange, og for lav bliver den grå.
3. **Sæt tre lysstyrkestop** Brug samme kulør i tre lysstyrker, for eksempel 10 %, 30 % og 60 %. Den spredning er det, der gør blandingen synlig.
4. **Gør den lyse ende lidt varmere** Skub det lyseste stop et par grader mod gult. Ægte lys på træ, kaffe eller ler ser varmere ud i højlysene.

## Koder til kaffegradienter

Kaffebrune toner er de mest brugbare i sættet. Espresso er næsten sort og bærer lys skrift med reel dybde. Crema pour løber fra det lyse skum øverst i en kop ned i kaffen under. Mokka ligger imellem og giver en stærk, neutral baggrund til menukort og prislister.

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

Tre kaffegradienter. Crema pour kræver mørk skrift øverst og lys skrift nederst, så placér ordene i kun én zone.

Caféer og kaffebrænderier finder en hel identitet bygget på disse toner i [branding af en kaffebar](https://gradiently.design/da/guide/coffee-shop-branding) og idéer til poser og etiketter i [emballage til kaffebrænderier](https://gradiently.design/da/guide/coffee-roaster-packaging).

## Koder til karamel- og chokoladegradienter

Karamel er brun på sit mest gyldne og venlige. Den gløder, hvilket gør den ideel til bagerier, honning, efterårstilbud og alt sødt. Chokolade er det modsatte: dyb, blank og forkælende. En radial gradient med et blødt højlys giver chokolade den glans, den har i virkeligheden.

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

Søde og forkælende brune toner. Whisky er karamel, der er tændt indefra, den mest dramatiske gradient i denne artikel.

## Gradienter i jord, ler og terrakotta

Jordbrune toner læner sig mod rødt og føles håndlavede: ler, mursten, læder, valnød. De passer til keramik, plantebutikker, outdoorudstyr og alt med et naturligt eller middelhavsagtigt præg. Især terrakotta er blevet en favorit hos varme, moderne brands, fordi den både virker jordnær og frisk.

- Terrakotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Ørkenler: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Valnød og læder: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Jordbrune toner. Terrakotta er den klareste og har mindst brug for hjælp fra accenter.

Vil du udvide dem til et helt farveskema, så se [jordfarver](https://gradiently.design/da/guide/earth-tone-colors) og [efterårsfarvepaletter](https://gradiently.design/da/guide/autumn-color-palettes). Til den lysere ende af familien, sand og havre, tager koderne i [beige gradient](https://gradiently.design/da/guide/beige-gradient) over, hvor ørkenler slipper.

## Sådan holder du en lang brun blanding varm i CSS

Browsere blander gradienter i sRGB som standard, og en lang blanding fra en dyb brun til en lys karamel kan sunke ned i en lettere grålig midte. Beder du browseren interpolere i OKLCH, holdes kulør og farvemætning mere stabile fra ende til anden. Det understøttes i aktuelle versioner af de store browsere, og hex-reserven dækker resten.

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

Den samme blanding fra espresso til karamel, skrevet to gange. Browsere, der forstår den anden linje, bruger den, og de øvrige beholder den første.

[CSS-gradienter i OKLCH](https://gradiently.design/da/guide/css-gradient-oklch) forklarer farverummet, og hvornår den ekstra linje er umagen værd.

## Hvad du kan parre med en brun gradient

| Partner | Hex | Stemning | Prøv den på |
| --- | --- | --- | --- |
| Creme | `#f6efe4` | Klassisk, hyggelig | Caféens menukort, bagerslag |
| Salviegrøn | `#a3b18a` | Naturlig, rolig | Plantebutikker, wellness, te |
| Støvet blå | `#8aa1b4` | Frisk, uventet | Keramik, denim, boligtilbehør |
| Sennep | `#d6a23a` | Retro, varm | Plader, vintage, efterårsudsalg |
| Rouge | `#e8c4b8` | Blød, moderne | Skønhed, duftlys, papirvarer |

Brug partneren til skrift eller én accent. Blå er det dristigste valg, fordi den ligger overfor orange og dermed får brun til at se varmere ud.

## En brun gradient i et rigtigt opslag

Brune baggrunde bærer varme hverdagsnyheder særligt godt: en ny ristning, en sæsonbagt kage, en workshop. Cremefarvet skrift på den dybe ende er det sikre valg, og en sennep- eller karamelaccent på ét ord giver lidt energi. [Idéer til bageriets Instagram](https://gradiently.design/da/guide/bakery-instagram-ideas) har en måneds opslag, der passer til disse toner.

Et opslag i højformat med en dyb kaffebrun baggrund og ordene Ny ristning, tirsdag i cremefarvet skrift

Et kaffebrænderis nyhed i en kaffefarvet Mark. Cremefarvet skrift ligger på den mørkeste del af baggrunden.

Hvis du poster ugentligt, er det svære at holde hvert opslag i den samme varme brune tone. Med Gradiently vælger du en varm brun Mark én gang, og alle skabeloner, stories og menukort bærer den, mens Automatisk tekstfarve vælger creme eller espresso som skriftfarve linje for linje, så intet går tabt i de mørkere hjørner.

## FAQ

### Hvilke farver udgør en brun gradient?

Varme brune toner fra samme familie, som espresso #1b0f0a, kaffe #6b3f26 og karamel #e0a15a. Hold hvert stop på den orange eller røde side, så blandingen forbliver rig.

### Hvorfor ser min brune gradient kedelig ud?

Ét eller flere stop er drevet mod gråt eller grønt. Gør brune toner mørkere ved at sænke lysstyrken i stedet for at tilsætte sort, og hold kuløren varm.

### Hvilken farve skrift skal der på en brun baggrund?

Creme eller varm hvid på mørke brune toner, og espresso eller trækul på lys karamel og sand. Sennep fungerer som accent på ét enkelt ord.

### Hvad er en god kaffefarvet gradient?

Prøv `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, som løber fra crema øverst til kaffe nederst.