# Brun gradient: koder for kaffe, karamell og jord

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

Brunt har ry for å se kjedelig ut, men nesten hver god brun gradient skjuler seg i en kaffekopp eller et keramikkverksted. Slik holder du den varm, med koder for hver stemning.

## The short version

- Brunt er en mørk oransje med lav metning, så en god brun gradient holder en oransje eller rød fargetone hele veien.
- Brune gradienter ser kjedelige ut når de glir mot grått eller grønt; de ser fyldige ut når de holder seg varme.
- Kaffegradienter går fra nesten svart espresso til en blek crema, mens karamellgradienter ligger lysere og mer gyllent.
- Interpolering av en brun gradient i OKLCH hindrer at midten blir matt, noe som er nyttig i lange overganger.
- Krem, salviegrønn, støvblå og sennep er pålitelige partnere for brunt i tekst og aksenter.

En **brun gradient** er egentlig en mørk, dempet oransje som går fra dyp til lys: espresso til crema, sjokolade til karamell, leire til sand. Hold den varme fargetonen gjennom hvert stopp, så ser brunt fyldig, lunt og håndlaget ut. Lar du den gli mot grått eller grønt, ser den ut som gjørme. Under finner du koder for kaffe, karamell, sjokolade, jord og whisky, og fargene som passer til dem.

## Hvorfor brune gradienter blir grumsete

Det finnes ikke brunt i regnbuen. Det vi kaller brunt, er oransje eller rødt med lysheten skrudd ned og metningen dempet. Det har en praktisk konsekvens: mister ett stopp i gradienten varmen, fordi det har for mye grått eller et snev av grønt, leses hele overgangen som skitten. Hold hvert stopp på den varme siden, og gjør fargen mørkere ved å senke lysheten i stedet for å tilsette svart. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) viser effekten side om side.

- Espresso: #1b0f0a
- Mørkbrent: #3b2216
- Kaffe: #6b3f26
- Fløtekaramell: #a85f24
- Karamell: #e0a15a
- Terrakotta: #c0603a
- Crema: #f3e3cc

En varm brun familie. Hver fargeprøve, selv den mørkeste, har fortsatt litt oransje i seg.

Du kan bygge din egen brune gradient fra hvilken som helst oransje i en fargevelger som viser fargetone, metning og lyshet. Det tar fire grep:

1. **Velg en varm fargetone** Velg en fargetone mellom omtrent 20 og 40 grader: lavere for rødlige brunfarger som tegl og terrakotta, høyere for gylne som karamell.
2. **Demp metningen** Senk metningen til et sted mellom 35 % og 65 %. Med full metning forblir den oransje; for lavt blir den grå.
3. **Sett tre lyshetsstopp** Bruk samme fargetone i tre lyshetsnivåer, for eksempel 10 %, 30 % og 60 %. Det spennet er det som gjør overgangen synlig.
4. **Gjør den lyse enden litt varmere** Flytt det lyseste stoppet noen grader mot gult. Ekte lys på tre, kaffe eller leire ser varmere ut i høylysene.

## Koder for kaffegradienter

Kaffebrune toner er de mest nyttige i settet. Espresso er nesten svart og bærer lys tekst med ekte dybde. Cremaskjenk går fra det bleke skummet øverst i koppen til kaffen under. Mokka ligger midt imellom og gir en kraftig, nøytral bakgrunn til menyer og prislister.

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

Tre kaffegradienter. Cremaskjenk trenger mørk tekst øverst og lys tekst nederst, så plasser ordene i bare én sone.

Kaféer og kaffebrennerier finner en komplett identitet bygget på disse tonene i [merkevarebygging for kaffebarer](https://gradiently.design/nb/guide/coffee-shop-branding), og ideer til poser og etiketter i [emballasje for kaffebrennerier](https://gradiently.design/nb/guide/coffee-roaster-packaging).

## Koder for karamell- og sjokoladegradienter

Karamell er brunt på sitt mest gylne og vennlige. Den gløder, og det gjør den ideell for bakerier, honning, høsttilbud og alt som er søtt. Sjokolade er det motsatte: dyp, blank og fristende. En radiell gradient med et mykt høylys gir sjokoladen den glansen den har i virkeligheten.

- Karamell: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Fløtekaramell: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Mørk sjokolade: `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øte og fristende brunfarger. Whisky er en karamell som lyser innenfra, og den mest dramatiske gradienten i denne artikkelen.

## Gradienter i jord, leire og terrakotta

Jordbrune toner heller mot rødt og føles håndlagde: leire, tegl, lær, valnøtt. De passer til keramikk, plantebutikker, friluftsutstyr og alt med et naturlig eller middelhavsaktig preg. Særlig terrakotta har blitt en favoritt blant varme, moderne merkevarer, fordi den virker både jordnær og frisk.

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

Jordbrune toner. Terrakotta er den klareste og trenger minst hjelp fra aksenter.

Vil du utvide disse til et helt fargeskjema, se [jordfarger](https://gradiently.design/nb/guide/earth-tone-colors) og [høstpaletter](https://gradiently.design/nb/guide/autumn-color-palettes). For den lyse enden av familien, sand og havre, fortsetter kodene for [beige gradienter](https://gradiently.design/nb/guide/beige-gradient) der ørkenleire slutter.

## Slik holder du en lang brun overgang varm i CSS

Nettlesere blander gradienter i sRGB som standard, og en lang overgang fra dyp brun til blek karamell kan synke ned i en litt gråaktig midte. Ber du nettleseren interpolere i OKLCH, holder fargetone og kroma seg jevnere fra ende til ende. Det støttes i gjeldende versjoner av de store nettleserne, og hex-reserven dekker 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 overgangen fra espresso til karamell, skrevet to ganger. Nettlesere som forstår den andre linjen, bruker den; andre beholder den første.

[CSS-gradienter i OKLCH](https://gradiently.design/nb/guide/css-gradient-oklch) forklarer fargerommet og når det er verdt den ekstra linjen.

## Hva du kan kombinere med en brun gradient

| Partner | Hex | Stemning | Prøv den på |
| --- | --- | --- | --- |
| Krem | `#f6efe4` | Klassisk, lun | Kafémenyer, bakeriinnlegg |
| Salviegrønn | `#a3b18a` | Naturlig, rolig | Plantebutikker, velvære, te |
| Støvblå | `#8aa1b4` | Frisk, uventet | Keramikk, denim, interiør |
| Sennep | `#d6a23a` | Retro, varm | Plater, vintage, høstsalg |
| Rosa pudder | `#e8c4b8` | Myk, moderne | Skjønnhet, stearinlys, papirvarer |

Bruk partneren til tekst eller én aksent. Blått er det dristigste valget fordi det ligger motsatt av oransje, så det får brunt til å se varmere ut.

## En brun gradient i et ekte innlegg

Brune bakgrunner bærer varme hverdagsnyheter spesielt godt: en ny brenning, et sesongbakverk, en workshop. Kremfarget tekst på den mørke enden er det trygge valget, og en aksent i sennep eller karamell på ett ord gir litt ekstra energi. [Instagram-ideer for bakerier](https://gradiently.design/nb/guide/bakery-instagram-ideas) har en måned med innlegg som passer til disse tonene.

Et stående innlegg med dyp kaffebrun bakgrunn og ordene Ny brenning, tirsdag i kremfarget skrift

En kunngjøring fra et kaffebrenneri i en kaffefarget Mark. Kremfarget tekst står på den mørkeste delen av bakgrunnen.

Poster du hver uke, er det vanskelige å holde hvert innlegg i samme varme brunfarge. Med Gradiently velger du en varm brun Mark én gang, og hver mal, story og meny bruker den, mens Auto-tekstfarge velger kremfarget eller espressofarget skrift for hver linje, så ingenting forsvinner i de mørkere hjørnene.

## FAQ

### Hvilke farger lager en brun gradient?

Varme brunfarger fra én familie, som espresso #1b0f0a, kaffe #6b3f26 og karamell #e0a15a. Hold hvert stopp på den oransje eller røde siden, så overgangen forblir fyldig.

### Hvorfor ser den brune gradienten min matt ut?

Ett eller flere stopp har glidd mot grått eller grønt. Gjør brunfarger mørkere ved å senke lysheten i stedet for å tilsette svart, og hold fargetonen varm.

### Hvilken tekstfarge passer på en brun bakgrunn?

Krem eller varm hvit på mørke brunfarger, og espresso eller koksgrå på lys karamell og sand. Sennep fungerer til ett enkelt aksentord.

### Hva er en god gradient i kaffefarger?

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