# Beige gradient: varme, nøytrale fargekoder som føles rolige

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

Beige er lett å få nesten riktig og overraskende vanskelig å få helt riktig. Trikset er å velge én undertone, beholde nok spenn til at overgangen synes, og gi den tekstur.

## The short version

- En beige gradient ser rolig og eksklusiv ut når alle fargestoppene deler én undertone: rosa, gul eller grå.
- Beige gradienter trenger et større lyshetsspenn enn folk tror, ellers forsvinner overgangen og designet ser flatt ut.
- Lyse gradienter med lav kontrast får lett synlige striper på skjerm, og et fint kornlag er den mest pålitelige løsningen.
- Varme, mørke bruntoner som espresso fungerer bedre på beige enn rent svart, og hvit tekst fungerer sjelden på det.
- Sandfargede gradienter går fra blek krem til en ristet gyllen tone, slik en sanddyne blir mørkere på skyggesiden.

En **beige gradient** blander varme nøytraler, krem, sand, havre og lin, fra en lys tone til en litt dypere, og alle deler samme undertone. Gjort godt føles den rolig, naturlig og stille eksklusiv, og derfor elsker hudpleie, interiør, bryllup og slow fashion den. Gjort dårlig ser den ut som en skannet, gammel konvolutt. Forskjellen ligger i tre valg: én undertone, nok spenn og litt tekstur. Koder for hvert uttrykk følger nedenfor.

## Velg undertone før du velger farge

All beige heller mot noe. Rosa beige føles mykt og hudlignende. Gul beige føles solfylt og sandaktig. Grå beige, ofte kalt greige, føles arkitektonisk og kjølig. Å blande undertoner i én gradient er hovedgrunnen til at beige ser skittent ut: et rosa stopp ved siden av et grått leses som en flekk, ikke en overgang. Bestem deg først, og hold deg der.

- Lin: #faf6ef
- Rosa beige: #ecd3c6
- Rosesand: #d4ae9c
- Sand: #e8cfa8
- Honningdyne: #c9a273
- Greige: #ddd6cc
- Stein: #b9b0a3
- Espresso: #3b2a1e

Tre undertonefamilier: rosa i det rosa paret, gul i sandparet, grå i greige og stein. Lin og espresso fungerer med alle tre.

## Koder for sandfargede gradienter

En **sandfarget gradient** følger en sanddyne: lys og kremet på siden som vender mot solen, dypere og mer gyllen på skyggesiden. Dette er de varmeste beigetonene her og de mest tilgivende, fordi den gule undertonen hindrer dem i å bli grå.

- Sanddyne: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Ørken ved middag: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Dyneskygge: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Våt sand: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Fire sanduttrykk. Dyneskygge har størst spenn og holder seg best i små størrelser; Ørken ved middag er lysest og passer mørk tekst overalt.

## Koder for lin, havre og stein

Dette er de roligere beigetonene, nærmere krem og greige. De er utmerkede bakgrunner for produktbilder og lengre lesing, fordi de trekker seg tilbake og lar alt annet lede. Lin er den mest subtile, knapt en gradient i det hele tatt; rosa beige gir den rosa undertonen; stein er den kjøligste, nesten grå.

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

Myke nøytraler. Ser en beige gradient ut som en flat farge på skjermen din, er spennet for lite: gjør det siste stoppet dypere.

For hele familien av rolige toner, se [nøytrale fargepaletter](https://gradiently.design/nb/guide/neutral-color-palettes) og [jordfarger](https://gradiently.design/nb/guide/earth-tone-colors). Vil du ha den dypere enden av samme familie, kaffe og karamell, fortsetter kodene for [brun gradient](https://gradiently.design/nb/guide/brown-gradient) der disse slutter.

## Hvorfor beige gradienter får striper, og hvordan du fikser det

Lyse gradienter med lite spenn går bare gjennom en håndfull ulike fargeverdier, så skjermen tegner dem som synlige trinn, og kraftig komprimering gjør det verre. Beige er særlig utsatt. Et fint kornlag bryter opp trinnene og får i tillegg beige til å se ut som papir, puss eller stoff i stedet for en skjermfarge. [Striper i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer årsaken 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 sandfarget gradient med et SVG-støylag multiplisert over. Øk opasiteten for en grovere, mer papiraktig overflate.

Flere kornoppskrifter, og hvor kraftig du bør gå, finner du i [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients). Gradiently-Marks har korn som en del av oppskriften, så en beige Mark kommer med teksturen ferdig balansert i alle størrelser.

## Tekstfarger som passer til beige

| Farge | Hex | Virkning | Bruk til |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Varm og myk, fortsatt svært lesbar | Overskrifter og brødtekst på all beige |
| Koksgrå | `#2b2b2b` | Skarp og moderne | Bakgrunner i stein og greige |
| Dyp oliven | `#3d4a2f` | Naturlig, litt uventet | Bakgrunner i sand og havre |
| Terrakotta | `#a4502f` | Varm aksent | Kun store overskrifter og priser |
| Hvit | `#ffffff` | Svak på lys beige | Kun store overskrifter på de dypeste stoppene i Dyneskygge |

Svart fungerer, men espressobrun holder hele designet i samme varme familie.

## Beige som ser rolig ut, ikke kjedelig

### Ser kjedelig ut

- Rosa, gul og grå beige i én overgang
- To stopp så like at overgangen er usynlig
- En ren digital flate med synlige striper
- Rent svart tekst og et rotete oppsett
- Hvit tekst på lys sand

### Ser rolig ut

- Én undertone i alle stopp
- Et tydelig spenn fra krem til ristet sand
- Et fint korn som leses som papir eller puss
- Espressofarget tekst og god luft
- Mørk tekst, med én terrakotta-aksent

Beige belønner tilbakeholdenhet. Få ord, mye luft og ett sterkt produktbilde ser mer eksklusivt ut enn noen mengde pynt. Det er uttrykket bak det meste av god [design for hudpleiemerker](https://gradiently.design/nb/guide/skincare-brand-design), og det fungerer like godt for bryllupstrykksaker og interiørstudioer.

Et stående innlegg på en varm, sandfarget bakgrunn med ordene Mindre, men bedre i mørkebrun tekst

Et lanseringsinnlegg for hudpleie i en sandfarget Mark. Espressofarget tekst, én linje, mye luft.

## Der en beige gradient gjør seg fortjent

Beige gjør mest nytte der den støtter noe annet: et produkt, et fotografi, noen få nøye valgte ord. Noen steder den skinner, med størrelsene du bør designe i:

- **Produktbilder:** en gradient i lin eller havre bak en flaske eller et keramikkstykke, i 2048×2048 for et produktbilde i Shopify, holder gjenstanden i hovedrollen.
- **Bryllupstrykksaker:** rosa beige eller sand til invitasjoner på 5×7 tommer (1500×2100 ved 300 dpi), med espressofarget eller dyp olivenfarget tekst. Flere ideer i [fargepaletter for bryllup](https://gradiently.design/nb/guide/wedding-color-palettes).
- **Interiør og arkitektur:** gradienter i stein og greige til porteføljeomslag og prosjektinnlegg, der fotografiene står for fargen. Se [merkevarebygging for interiørdesignere](https://gradiently.design/nb/guide/interior-designer-branding).
- **Seksjoner på nettsider:** en gradient i lin bak en kundeuttalelse eller en pristabell skiller den fra hvite seksjoner uten en hard kant.
- **Et rolig Instagram-rutenett:** veksle mellom sandfargede innlegg og bilder, så leses feeden som én gjennomtenkt helhet.

Fordi beige er så subtil, kan samme gradient se riktig ut i en story og utvasket på et bredt banner. Lag den for hvert format i stedet for å strekke én fil, og sjekk det lyseste stoppet på en telefon med full lysstyrke, der blek beige kan gli over i rent hvitt.

## FAQ

### Hvilke farger lager en beige gradient?

Toner av krem, sand, havre og lin som deler én undertone, for eksempel #f6ead6 til #e8cfa8 til #c9a273 for en varm, sandfarget gradient.

### Hvorfor ser den beige gradienten min skitten ut?

Som regel blander den undertoner, for eksempel en rosa beige ved siden av en grå. Hold alle stopp i samme familie.

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

En varm mørkebrun som espresso #3b2a1e er lett å lese og føles mykere enn svart. Koksgrå passer de kjøligere greigetonene.

### Hvordan hindrer jeg at en lys gradient får striper?

Øk spennet mellom første og siste stopp, legg et fint kornlag over gradienten, og eksporter som PNG i stedet for en komprimert JPEG.