# Brun gradient: kaffe, kola och jordkoder

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

Brunt har rykte om sig att se trist ut, men nästan varje bra brun gradient gömmer sig i en kaffekopp eller en keramikverkstad. Så håller du den varm, med koder för varje stämning.

## The short version

- Brunt är en mörk, lågmättad orange, så en bra brun gradient behåller en orange eller röd nyans hela vägen.
- Bruna gradienter ser trista ut när de glider mot grått eller grönt, men rika när de förblir varma.
- Kaffegradienter går från nästan svart espresso till en blek crema, medan kolagradienter ligger ljusare och mer gyllene.
- Att interpolera en brun gradient i OKLCH hindrar mitten från att bli matt, vilket är användbart för långa övergångar.
- Gräddvitt, salviagrönt, dammigt blått och senapsgult är pålitliga partner till brunt i text och accenter.

En **brun gradient** är egentligen en mörk, mjukad orange som blandas från djup till ljus: espresso till crema, choklad till kola, lera till sand. Låt den varma nyansen löpa genom varje stopp så ser brunt rikt, mysigt och hantverksmässigt ut. Låt det glida mot grått eller grönt och det ser ut som lera. Nedan finns koder för kaffe-, kola-, choklad-, jord- och whiskybruna gradienter och de kombinationer som passar dem.

## Varför bruna gradienter blir leriga

Det finns inget brunt i regnbågen. Det vi kallar brunt är orange eller rött med lägre ljushet och mjukare mättnad. Det får en praktisk följd: om ett stopp i gradienten förlorar sin värme, för att det har för mycket grått eller en antydan av grönt, ser hela övergången smutsig ut. Håll varje stopp på den varma sidan och gör mörkare genom att sänka ljusheten i stället för att lägga till svart. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) visar effekten sida vid sida.

- Espresso: #1b0f0a
- Mörkrost: #3b2216
- Kaffe: #6b3f26
- Toffee: #a85f24
- Kola: #e0a15a
- Terrakotta: #c0603a
- Crema: #f3e3cc

En varm brun familj. Varje färgprov, även det mörkaste, har fortfarande lite orange i sig.

Du kan bygga en egen brun gradient från vilken orange som helst i en färgväljare som visar nyans, mättnad och ljushet. Det tar fyra steg:

1. **Välj en varm nyans** Välj en nyans mellan cirka 20 och 40 grader: lägre för rödaktiga bruna toner som tegel och terrakotta, högre för gyllene som kola.
2. **Mjuka upp mättnaden** Sänk mättnaden till någonstans mellan 35 % och 65 %. Fullt mättad förblir den orange, för låg blir den grå.
3. **Sätt tre ljushetsstopp** Använd samma nyans på tre ljushetsnivåer, till exempel 10 %, 30 % och 60 %. Det är den spridningen som gör övergången synlig.
4. **Gör den ljusa änden lite varmare** Flytta det ljusaste stoppet några grader mot gult. Verkligt ljus på trä, kaffe eller lera ser varmare ut i högdagrarna.

## Koder för kaffegradienter

Kaffebruna toner är de mest användbara i uppsättningen. Espresso är nästan svart och bär ljus text med verkligt djup. Crema pour går från det bleka skummet överst i en kopp ner i kaffet under. Mocka ligger däremellan och ger en stark, neutral bakgrund för menyer och prislistor.

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

Tre kaffegradienter. Crema pour behöver mörk text överst och ljus text nederst, så placera orden i bara en zon.

Caféer och rosterier hittar en komplett identitet byggd på de här tonerna i [varumärke för kafé](https://gradiently.design/sv/guide/coffee-shop-branding), och idéer för påsar och etiketter i [kaffeförpackningar för rosterier](https://gradiently.design/sv/guide/coffee-roaster-packaging).

## Koder för kola- och chokladgradienter

Kola är brunt när det är som mest gyllene och vänligt. Den glöder, vilket gör den idealisk för bagerier, honung, höstkampanjer och allt sött. Choklad är motsatsen: djup, glansig och förföriskt. En radiell gradient med en mjuk högdager ger chokladen den lyster den har i verkligheten.

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

Söta och förföriska bruna toner. Whisky är en kola som lyses upp inifrån, den mest dramatiska gradienten i den här artikeln.

## Gradienter i jord, lera och terrakotta

Jordbruna toner lutar åt rött och känns handgjorda: lera, tegel, läder, valnöt. De passar keramik, växtbutiker, friluftsutrustning och allt med en naturlig eller medelhavskänsla. Terrakotta i synnerhet har blivit en favorit för varma, moderna varumärken eftersom den läses som både jordnära och fräsch.

- Terrakotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Ökenlera: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Valnöt och läder: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Jordbruna toner. Terrakotta är den ljusaste och behöver minst hjälp av accenter.

För att bredda dem till ett helt färgschema, se [jordtoner](https://gradiently.design/sv/guide/earth-tone-colors) och [färgpaletter för hösten](https://gradiently.design/sv/guide/autumn-color-palettes). För den ljusare delen av familjen, sand och havre, tar koderna för [beige gradient](https://gradiently.design/sv/guide/beige-gradient) vid där ökenleran slutar.

## Håll en lång brun övergång varm i CSS

Gradienter i webbläsare blandas i sRGB som standard, och en lång övergång från ett djupt brunt till en blek kola kan sjunka ihop till en lätt grågrön mitt. Om du ber webbläsaren interpolera i OKLCH hålls nyans och kromatisk styrka stadigare från ände till ände. Det stöds i aktuella versioner av de stora webbläsarna, och hexreserven täcker 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%);
}
```

Samma övergång från espresso till kola, skriven två gånger. Webbläsare som förstår den andra raden använder den, andra behåller den första.

[CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar färgrymden och när den är värd den extra raden.

## Vad du kombinerar en brun gradient med

| Partner | Hex | Stämning | Prova den på |
| --- | --- | --- | --- |
| Gräddvit | `#f6efe4` | Klassisk, mysig | Kafémenyer, inlägg från bagerier |
| Salviagrön | `#a3b18a` | Naturlig, lugn | Växtbutiker, välmående, te |
| Dammigt blå | `#8aa1b4` | Fräsch, oväntad | Keramik, denim, heminredning |
| Senap | `#d6a23a` | Retro, varm | Skivor, vintage, höstrea |
| Blush | `#e8c4b8` | Mjuk, modern | Skönhet, ljus, pappersvaror |

Använd partnern till text eller en accent. Blått är det djärvaste valet eftersom det ligger mitt emot orange och därför får brunt att se varmare ut.

## En brun gradient i ett riktigt inlägg

Bruna bakgrunder bär varma, vardagliga nyheter särskilt bra: en ny rostning, ett säsongsbak, en workshop. Gräddvit text på den mörka änden är det säkra valet, och en senaps- eller kolaaccent på ett enda ord ger lite energi. [Instagramidéer för bageri](https://gradiently.design/sv/guide/bakery-instagram-ideas) har en månads inlägg som passar de här tonerna.

Ett stående inlägg med djupt kaffebrun bakgrund och orden Ny rostning, tisdag i gräddvit text

Ett rosteris tillkännagivande i en kaffefärgad Mark. Gräddvit text ligger på bakgrundens mörkaste del.

Om du postar varje vecka är det svåra att hålla varje inlägg i samma varma bruna. Med Gradiently väljer du en varmbrun Mark en gång, och varje mall, story och meny bär den, medan Auto-bläck väljer gräddvit eller espressosvart text för varje rad så att inget försvinner i de mörkare hörnen.

## FAQ

### Vilka färger ger en brun gradient?

Varma bruna toner ur samma familj, som espresso #1b0f0a, kaffe #6b3f26 och kola #e0a15a. Håll varje stopp på den orange eller röda sidan så förblir övergången rik.

### Varför ser min bruna gradient matt ut?

Ett eller flera stopp har glidit mot grått eller grönt. Gör brunt mörkare genom att sänka ljusheten i stället för att lägga till svart, och håll nyansen varm.

### Vilken textfärg passar på en brun bakgrund?

Gräddvit eller varmvit på mörka bruna toner, och espresso eller kol på ljus kola och sand. Senap fungerar för ett enda accentord.

### Vad är en bra gradient i kaffefärg?

Prova `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, som går från crema överst till kaffe nederst.