# Beige gradient: varma neutrala koder som ger lugn

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

Beige är lätt att nästan få rätt och förvånansvärt svårt att få helt rätt. Knepet är att välja en underton, ha tillräckligt omfång för att övergången syns och ge den textur.

## The short version

- En beige gradient ser lugn och exklusiv ut när alla färgstopp delar en underton: rosa, gul eller grå.
- Beige gradienter behöver större ljushetsomfång än man tror, annars försvinner övergången och designen ser platt ut.
- Ljusa gradienter med lite kontrast får lätt ränder på skärmar, och ett fint kornlager är den säkraste lösningen.
- Varma mörkbruna toner som espresso fungerar bättre på beige än rent svart, och vit text fungerar sällan.
- Sandgradienter går från blek kräm till rostat guld, som en dyn som mörknar på skuggsidan.

En **beige gradient** blandar varma neutrala toner, kräm, sand, havre och linne, från en ljus ton till en något djupare, alla med samma underton. När den är gjord med omsorg känns den lugn, naturlig och diskret exklusiv, och därför älskar hudvård, inredning, bröllop och långsamt mode den. Gjord slarvigt ser den ut som en skanning av ett gammalt kuvert. Skillnaden ligger i tre val: en underton, tillräckligt omfång och lite textur. Koder för varje stil följer.

## Välj underton före färg

Varje beige drar åt något håll. Rosa beige känns mjuk och hudlik. Gul beige känns solig och sandig. Grå beige, ofta kallad greige, känns arkitektonisk och sval. Att blanda undertoner i en gradient är den främsta orsaken till att beige ser smutsig ut: ett rosa stopp bredvid ett grått ser ut som en fläck, inte som en övergång. Bestäm dig först och håll dig sedan kvar.

- Linne: #faf6ef
- Rodnadsbeige: #ecd3c6
- Rosasand: #d4ae9c
- Sand: #e8cfa8
- Honungsdyn: #c9a273
- Greige: #ddd6cc
- Sten: #b9b0a3
- Espressoton: #3b2a1e

Tre familjer av undertoner: rosa i rodnadsparet, gul i sandparet, grå i greige och sten. Linne och espresso fungerar med alla tre.

## Koder för sandgradient

En **sandgradient** följer en dyn: ljus och krämig på sidan mot solen, djupare och mer gyllene på skuggsidan. Det här är de varmaste beigerna här och de mest förlåtande, eftersom den gula undertonen hindrar dem från att bli grå.

- Sanddyn: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Öken vid middagstid: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Dynskugga: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Blöt sand: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Fyra sandstilar. Dynskugga har störst omfång och håller bäst i små storlekar. Öken vid middagstid är ljusast och passar mörk text överallt.

## Koder för linne, havre och sten

Det här är de stillsammare beigerna, närmare kräm och greige. De är utmärkta bakgrunder för produktbilder och långläsning, eftersom de håller sig i bakgrunden och låter allt annat ta plats. Linne är det subtilaste, knappt en gradient alls. Rodnadsbeige bär den rosa undertonen. Sten är den svalaste, nästan grå.

- Linne: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Havrelatte: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Rodnadsbeige: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Sten: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Mjuka neutrala toner. Om en beige gradient ser ut som en platt färg på din skärm är omfånget för litet: gör sista stoppet mörkare.

För den bredare familjen av lugna toner, se [neutrala färgpaletter](https://gradiently.design/sv/guide/neutral-color-palettes) och [jordfärger](https://gradiently.design/sv/guide/earth-tone-colors). När du vill ha den djupare änden av samma familj, kaffe och karamell, tar koderna för [brun gradient](https://gradiently.design/sv/guide/brown-gradient) vid där de här slutar.

## Varför beige gradienter får ränder och hur du fixar det

Ljusa gradienter med litet omfång passerar bara en handfull olika färgvärden, så en skärm ritar dem som synliga steg, och kraftig komprimering gör det värre. Beige är särskilt utsatt. Ett fint kornlager bryter upp stegen och får dessutom beige att se ut som papper, puts eller tyg i stället för en skärmfärg. [Gradientränder](https://gradiently.design/sv/guide/gradient-banding) förklarar orsaken i detalj.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

En sandgradient med ett SVG-brusskikt multiplicerat över. Höj opaciteten för en råare, mer pappersaktig yta.

Fler kornrecept, och hur kraftigt du ska gå, finns i [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients). Gradiently Marks har korn som en del av sitt recept, så en beige Mark kommer med texturen redan avvägd i varje storlek.

## Textfärger som passar beige

| Färg | Hex | Effekt | Använd till |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Varm och mjuk, fortfarande mycket läsbar | Rubriker och brödtext på all beige |
| Kol | `#2b2b2b` | Skarp och modern | Bakgrunder i sten och greige |
| Mörk olivgrön | `#3d4a2f` | Naturlig, lite oväntad | Bakgrunder i sand och havre |
| Terrakotta | `#a4502f` | Varm accent | Bara stora rubriker och priser |
| Vit | `#ffffff` | Svag på ljus beige | Bara stora rubriker på de mörkaste stoppen i dynskugga |

Svart fungerar, men espressobrun håller hela designen inom samma varma familj.

## Beige som ser lugn ut, inte trist

### Ser trist ut

- Rosa, gul och grå beige i samma övergång
- Två stopp så nära varandra att övergången är osynlig
- En ren digital yta med synliga ränder
- Rent svart text och en stökig layout
- Vit text på ljus sand

### Ser lugn ut

- En underton i alla stopp
- Ett tydligt omfång från kräm till rostad sand
- Ett fint korn som läses som papper eller puts
- Text i espresso och generöst med luft
- Mörk text, med en enda terrakottaaccent

Beige belönar återhållsamhet. Få ord, gott om luft och en stark produktbild ser dyrare ut än hur mycket dekoration som helst. Det är utseendet bakom de flesta bra [designer för hudvårdsvarumärken](https://gradiently.design/sv/guide/skincare-brand-design), och det fungerar lika bra för bröllopstryck och inredningsstudior.

Ett stående inlägg på varm sandfärgad bakgrund med orden Mindre, men bättre i mörkbrun text

Ett lanseringsinlägg för hudvård i en sandfärgad Mark. Text i espresso, en rad, mycket luft.

## Där en beige gradient gör nytta

Beige gör mest nytta där den stöttar något annat: en produkt, ett fotografi, några väl valda ord. Några ställen där den glänser, med storlekarna att designa i:

- **Produktbilder:** en gradient i linne eller havre bakom en flaska eller ett keramikföremål, i 2048×2048 för en Shopify-produktbild, låter föremålet vara hjälten.
- **Bröllopstryck:** rodnadsbeige eller sand för inbjudningar i 5×7 tum (1500×2100 vid 300 dpi), med text i espresso eller mörk olivgrön. Fler idéer finns i [färgpaletter för bröllop](https://gradiently.design/sv/guide/wedding-color-palettes).
- **Inredning och arkitektur:** gradienter i sten och greige för portföljomslag och projektinlägg, där fotografierna står för färgen. Se [varumärke för inredare](https://gradiently.design/sv/guide/interior-designer-branding).
- **Webbplatssektioner:** en linnegradient bakom ett omdöme eller en pristabell skiljer den från vita sektioner utan hård kantlinje.
- **Ett lugnt Instagramflöde:** varva sandinlägg med foton så läses flödet som en genomtänkt helhet.

Eftersom beige är så subtil kan samma gradient se rätt ut i en story och urvattnad på en bred banner. Rendera den för varje format i stället för att sträcka en enda fil, och kontrollera det ljusaste stoppet på en telefon med full ljusstyrka, där blek beige kan glida mot rent vitt.

## FAQ

### Vilka färger ingår i en beige gradient?

Toner av kräm, sand, havre och linne som delar en underton, till exempel #f6ead6 till #e8cfa8 till #c9a273 för en varm sandgradient.

### Varför ser min beige gradient smutsig ut?

Oftast för att undertoner blandas, till exempel en rosa beige bredvid en grå. Håll alla stopp i samma familj.

### Vilken textfärg passar på beige bakgrund?

Ett varmt mörkbrunt som espresso #3b2a1e läses tydligt och känns mjukare än svart. Kol passar de svalare greigetonerna.

### Hur stoppar jag ränder i en ljus gradient?

Gör avståndet mellan första och sista stoppet större, lägg ett fint kornlager över gradienten och exportera som PNG i stället för komprimerad JPEG.