# Design med hvit bakgrunn: når tomrom er det beste valget

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

Hvit bakgrunn er det vanligste valget i design og det enkleste å bomme på. Her ser du når det er riktig valg, hvilke hvittoner du bør bruke, og hvordan du unngår at det ser ut som en tom side.

## The short version

- En hvit bakgrunn fungerer best når innholdet er poenget: et produktfoto, en lang tekst, en prisliste eller én sterk overskrift.
- Rent hvitt #ffffff er skarpt på skjermer ved lang lesing, så de fleste gjennomtenkte design bruker brukket hvitt med en svak varm eller kjølig tone.
- Svart tekst på hvitt har et svært høyt kontrastforhold, så du kan bruke en mykere nesten svart farge som #1c1917 og fortsatt lese behagelig.
- Luft virker bare bevisst når den er romslig og konsekvent; et trangt hvitt oppsett virker uferdig fremfor minimalistisk.
- Én rolig detalj, som svakt korn, en hårfin linje eller mykt lys i et hjørne, hindrer at en hvit bakgrunn føles som en tom fil.

**Design med hvit bakgrunn** er det beste valget når det som ligger oppå, fortjener all oppmerksomheten: et produkt, et foto, et langt avsnitt, en enkelt setning som skal treffe. Det mislykkes når hvitt velges som standard, for da virker det som en side ingen gjorde ferdig. Forskjellen ligger i tre valg: hvilken hvittone, hvor mye luft og én liten detalj som forteller betrakteren at tomrommet er tilsiktet.

## Når en hvit bakgrunn er riktig valg

Hvitt har ingen egen stemning, og det er styrken. Det holder seg i bakgrunnen. Dermed er det en naturlig bunn for alt som har sin egen farge eller tekstur, og den dårligste bunnen for noe som trenger atmosfære for å fungere.

### Hvitt fungerer til

- Produktbilder der korrekt fargegjengivelse er viktig
- Lang lesing: artikler, menyer, vilkår, rapporter
- Én kraftig overskrift uten noe annet
- Prislister og sammenligningstabeller
- Merkevarer bygget på måtehold og tydelighet

### Hvitt sliter med

- Kveldsarrangementer, musikk og alt som hører natten til
- Lyse, bleke bilder som glir inn i siden
- Profiler der alle konkurrenter allerede bruker hvitt
- Korte innlegg med for lite innhold til å fylle flaten
- Design som trenger varme eller dramatikk for å treffe

Hvis designet ditt hører hjemme på høyre side av tabellen, fungerer en myk fargebunn eller en dempet gradient vanligvis bedre. [Minimalistiske bakgrunner](https://gradiently.design/nb/guide/minimalist-backgrounds) dekker rolige alternativer utover hvitt, og [design i mørk modus](https://gradiently.design/nb/guide/dark-mode-design) dekker den andre enden.

## Velg brukket hvitt fremfor rent hvitt

Rent `#ffffff` er det lyseste en skjerm kan vise. Som fotobakgrunn er det fint; på en side noen leser i to minutter, blender det. Brukket hvitt demper lysstyrken litt og gir siden en temperatur. Varme hvittoner føles trykte, rolige og menneskelige. Kjølige hvittoner føles kliniske, tekniske og presise. Velg den som passer det du selger.

- Rent hvitt: #ffffff
- Papir: #faf7f2
- Lin: #f7f1e8
- Havre: #f5f0eb
- Sky: #f4f6f8
- Tåke: #f1f5f4
- Varmt blekk: #1c1917

Fem brutte hvittoner ved siden av rent hvitt og en varm nesten svart tone til tekst. Forskjellene virker små i fargeprøver og tydelige over en hel side.

| Hvittone | Hex | Følelse | Bruk til |
| --- | --- | --- | --- |
| Rent hvitt | `#ffffff` | Lyst, nøytralt | Frilagte produkter, nettbutikkoppføringer |
| Papir | `#faf7f2` | Trykt, rolig | Tidsskrifter, nyhetsbrev, menyer |
| Lin | `#f7f1e8` | Varmt, håndlaget | Bakerier, blomsterbutikker, trykksaker |
| Sky | `#f4f6f8` | Kjølig, presist | Programvare, finans, klinikker |
| Tåke | `#f1f5f4` | Friskt, rent | Hudpleie, velvære, tannhelse |

Kopier en hvittone ut fra temperaturen. Behold den så overalt: et nettsted, en presentasjon og et innlegg i tre ulike hvittoner ser ut som tre merkevarer.

## Gi ordene plass

Luft er ikke det som blir til overs. Det er et valg i oppsettet, og det virker bare bevisst når det er romslig. En praktisk regel: marger på minst 8 prosent av den korteste siden, altså 86 px på et innlegg i 1080×1350, og mer avstand mellom grupper enn inni dem. En overskrift, en kort linje under og en liten detalj nederst er nok til ett innlegg.

Et rolig stående innlegg med en kort overskrift sentrert i romslig tomrom

Én linje, en liten overtekst og en rolig detalj. Luften bærer like mye mening som ordene.

Et stående innlegg med åpningstider og brede marger rundt en kort tekstblokk

Et praktisk innlegg virker fortsatt rolig når margene er brede og skriften liten.

Hierarki betyr mer på hvitt enn noe annet sted, fordi ingen farge leder blikket. Bruk størrelse og vekt til å rangere ordene, som beskrevet i [visuelt hierarki](https://gradiently.design/nb/guide/visual-hierarchy), og hold deg til én skriftfamilie hvis du kan.

## Tekstfarge på hvit bakgrunn

Rent svart på rent hvitt gir den høyeste kontrasten en skjerm kan vise, mer enn lesing krever, og kan virke hardt. En nesten svart tone med et hint av bakgrunnens temperatur, som `#1c1917` på varmt hvitt eller `#0f172a` på kjølig hvitt, ligger fortsatt godt over alle tilgjengelighetsgrenser. Brødtekst bør ha et kontrastforhold på minst 4,5:1; [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer hvordan du sjekker det.

> **Lysegrå tekst er den klassiske feilen** Grå skrift på brukket hvitt ser elegant ut i en designfil og forsvinner på en mobil i sollys. Hvis en linje betyr noe, hold den mørk. Bruk størrelse, ikke blekhet, til å dempe sekundærtekst.

## Unngå at en hvit bakgrunn virker uferdig

Risikoen med hvitt er at det ser ut som en tom flate fremfor en valgt flate. Én rolig detalj er nok til å løse det. Velg én, ikke alle.

- **Svakt korn** med svært lav styrke, slik at hvitt oppfattes som en overflate. Se [korntekstur](https://gradiently.design/nb/guide/textured-background).
- **Mykt lys i et hjørne**, varmt hvitt som glir over i en litt dypere kremtone i ett hjørne.
- **En hårfin linje** eller tynn kant i blekkfargen din, noen få piksler bred.
- **Én aksentfarge** brukt én gang, på en pris, en dato eller en knapp.
- **En papirfølelse** for trykte eller håndverksbaserte merkevarer; [papirtekstur](https://gradiently.design/nb/guide/paper-texture-background) viser hvordan.

- Papir med et varmt hjørne: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- Hvitt til sky: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Tåke med lys ovenfra: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Tre hvittoner som knapt er gradienter. På en mobil virker de som hvitt med dybde, aldri som farge.

## Hvit bakgrunn i CSS

På nett setter du brukket hvitt én gang som en variabel, slik at alle seksjoner deler tonen, og gir bilder en tilsvarende bakgrunn så produktbilder på rent hvitt ikke vises som bokser mot papirfargen.

```css
:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}
```

`mix-blend-mode: multiply` lar det hvite rundt et produktfoto ta sidens farge, slik at frilagte bilder glir naturlig inn på brukket hvitt.

Hvis du vil ha et hvitt uttrykk med litt mer karakter, er de lyse Marks i Gradiently et godt sted å begynne: myke, bleke bunner med ekte materiale og lys, der det roligste feltet flytter seg bak ordene og **Auto-tekstfarge** holder hver linje mørk nok til å lese. Det er gratis å designe med enhver Mark ingen har sikret seg; sikre deg den du liker når du er klar til å eksportere.

## FAQ

### Hva er den beste fargekoden for en bakgrunn i brukket hvitt?

En varm papirhvit tone som `#faf7f2` passer de fleste redaksjonelle merkevarer og livsstilsmerker, mens en kjølig hvittone som `#f4f6f8` passer programvare og klinikker. Velg én og bruk den overalt.

### Er rent hvitt dårlig for nettsteder?

Ikke dårlig, men lyst. Rent hvitt er ideelt bak frilagte produktbilder; til lang lesing er en svakt tonet, brukket hvittone mildere for øynene.

### Hvilken tekstfarge ser best ut på hvit bakgrunn?

En nesten svart tone som `#1c1917` eller `#0f172a`. Den oppfattes som svart, holder kontrasten godt over 4,5:1 og føles mykere enn rent svart.

### Hvordan gjør jeg en hvit bakgrunn mindre kjedelig?

Legg til én rolig detalj: svakt korn, mykt lys i et hjørne, en hårfin linje eller én aksentfarge. Hold margene romslige, så luften virker valgt.

### Hvorfor vises produktbildene mine som bokser på nettstedet mitt i brukket hvitt?

Bildene ble tatt på rent hvitt. Bruk `mix-blend-mode: multiply` på bildene, eller eksporter dem med gjennomsiktig bakgrunn.