# Design med hvid baggrund: når tom plads er det bedste valg

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

En hvid baggrund er det mest almindelige valg i design og det letteste at gøre forkert. Her er, hvornår den er det rigtige valg, hvilke hvide du skal bruge, og hvordan du undgår, at den ligner en tom side.

## The short version

- En hvid baggrund virker bedst, når indholdet er det vigtige: et produktfoto, en lang tekst, en prisliste eller en enkelt stærk overskrift.
- Helt hvid #ffffff er hård på skærme ved længere læsning, så de fleste gennemtænkte design bruger en råhvid med et let varmt eller køligt skær.
- Sort tekst på hvid har et meget højt kontrastforhold, så du har råd til en blødere næsten sort som #1c1917 og stadig kan læse behageligt.
- Hvid plads ser kun bevidst ud, når den er generøs og ensartet; et trangt hvidt layout ser ufærdigt ud frem for minimalistisk.
- Én stille detalje, som et svagt korn, en hårfin streg eller et blødt lys i et hjørne, forhindrer en hvid baggrund i at føles som en tom fil.

**Design med hvid baggrund** er det bedste valg, når det, der ligger ovenpå, fortjener al opmærksomheden: et produkt, et fotografi, et langt afsnit, en enkelt sætning, der skal ramme. Det fejler, når hvid vælges som standard, for så ligner det en side, ingen gjorde færdig. Forskellen kommer ned til tre beslutninger: hvilken hvid, hvor meget plads og én lille detalje, der fortæller beskueren, at tomheden er med vilje.

## Hvornår en hvid baggrund er det rigtige valg

Hvid har ingen stemning i sig selv, og det er dens styrke. Den træder til side. Det gør den til den naturlige bund for alt med sin egen farve eller tekstur og den dårligste bund for alt, der har brug for atmosfære for at bære.

### Hvid virker til

- Produktfotos, hvor farvenøjagtighed betyder noget
- Lang læsning: artikler, menuer, vilkår, rapporter
- En enkelt kraftig overskrift og intet andet
- Prislister og sammenligningstabeller
- Brands bygget på tilbageholdenhed og klarhed

### Hvid har svært ved

- Natevents, musik og alt, der hører natten til
- Lyse, blege fotos, der flyder ud i siden
- Feeds, hvor alle konkurrenter allerede bruger hvid
- Korte opslag med for lidt indhold til at fylde pladsen
- Design, der har brug for varme eller drama for at ramme

Hører dit design til højre i tabellen, vil en blød farvebund eller en blid gradient som regel tjene det bedre. [Minimalistiske baggrunde](https://gradiently.design/da/guide/minimalist-backgrounds) dækker stille muligheder ud over hvid, og [design til dark mode](https://gradiently.design/da/guide/dark-mode-design) dækker den modsatte ende.

## Vælg en råhvid, ikke helt hvid

Helt hvid `#ffffff` er det lyseste, en skærm kan vise. Som baggrund til et foto er det fint; til en side, nogen læser i to minutter, blænder den. En råhvid sænker lysstyrken en smule og giver siden en temperatur. Varme hvide føles trykte, rolige og menneskelige. Kølige hvide føles kliniske, tekniske og præcise. Vælg den, der passer til det, du sælger.

- Helt hvid: #ffffff
- Papir: #faf7f2
- Hør: #f7f1e8
- Havre: #f5f0eb
- Sky: #f4f6f8
- Tåge: #f1f5f4
- Varm blæk: #1c1917

Fem råhvide ved siden af helt hvid og en varm næsten sort til at sætte på dem. Forskellene ser små ud i farveprøver og tydelige over en hel side.

| Hvid | Hex | Føles | Brug den til |
| --- | --- | --- | --- |
| Helt hvid | `#ffffff` | Lys, neutral | Fritlagte produkter, webshoplister |
| Papir | `#faf7f2` | Trykt, rolig | Magasiner, nyhedsbreve, menuer |
| Hør | `#f7f1e8` | Varm, håndlavet | Bagerier, blomsterbindere, tryksager |
| Sky | `#f4f6f8` | Kølig, præcis | Software, finans, klinikker |
| Tåge | `#f1f5f4` | Frisk, ren | Hudpleje, wellness, tandpleje |

Kopiér en hvid efter dens temperatur. Hold den så overalt: et website, en præsentation og et opslag i tre forskellige hvide ligner tre brands.

## Giv ordene luft

Hvid plads er ikke det, der er tilbage. Det er en layoutbeslutning, og den virker kun bevidst, når den er generøs. En praktisk regel: marginer på mindst 8 procent af den korteste side, altså 86 px på et opslag i 1080×1350, og mere plads mellem grupper end inden i dem. En overskrift, en kort linje under den og en lille detalje nederst er rigeligt til ét opslag.

Et roligt, stående opslag med en kort overskrift centreret i generøs tom plads

Én linje, en lille overlinje og en stille detalje. Pladsen bærer lige så meget betydning som ordene.

Et stående opslag med åbningstider og brede marginer omkring en kort tekstblok

Et praktisk opslag virker stadig roligt, når marginerne forbliver brede, og skriften forbliver lille.

Hierarki betyder mere på hvid end noget andet sted, fordi der ingen farve er til at lede øjet. Brug størrelse og vægt til at rangere ordene, som beskrevet i [visuelt hierarki](https://gradiently.design/da/guide/visual-hierarchy), og hold dig til én skriftfamilie, hvis du kan.

## Tekstfarve på en hvid baggrund

Helt sort på helt hvid har den højeste kontrast, en skærm kan vise, hvilket er mere, end læsning kræver, og det kan føles hårdt. En næsten sort med et strejf af baggrundens temperatur, som `#1c1917` på en varm hvid eller `#0f172a` på en kølig, klarer stadig alle krav til tilgængelighed med god margen. Hold et kontrastforhold på mindst 4,5:1 til brødtekst; [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer, hvordan du tjekker det.

> **Lysegrå tekst er den klassiske fejl** Grå skrift på en råhvid ser elegant ud i en designfil og forsvinder på en telefon i sollys. Betyder en linje noget, så hold den mørk. Brug størrelse, ikke bleghed, til at gøre sekundær tekst mere afdæmpet.

## Sådan undgår du, at en hvid baggrund ser ufærdig ud

Risikoen ved hvid er, at den ligner et tomt lærred frem for et valgt. Én stille detalje er nok til at løse det. Vælg én, ikke dem alle.

- **Et svagt korn** i meget lav styrke, så den hvide læses som en overflade. Se [korntekstur](https://gradiently.design/da/guide/textured-background).
- **Et blødt lys i et hjørne**, en varm hvid, der toner over i en lidt dybere creme i ét hjørne.
- **En hårfin streg** eller en tynd kant i din blækfarve, få pixels bred.
- **Én accentfarve** brugt én gang, på en pris, en dato eller en knap.
- **En papirfornemmelse** til trykte eller håndværksbrands; [papirtekstur](https://gradiently.design/da/guide/paper-texture-background) viser hvordan.

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

Tre hvide, der knap nok er gradienter. På en telefon læses de som hvid med dybde, aldrig som farve.

## En hvid baggrund i CSS

På nettet sætter du den råhvide én gang som en variabel, så alle sektioner deler den, og giver billeder en matchende baggrund, så produktfotos på helt hvid ikke vises som bokse mod din papirfarve.

```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` får det hvide omkring et produktfoto til at tage sidens farve, så fritlagte motiver sidder naturligt på en råhvid.

Vil du have et hvidt look med lidt mere karakter, er de lyse Marks i Gradiently et godt sted at starte: bløde, blege bunde med ægte materiale og lys, hvor det roligste område flytter ind bag dine ord, og **Auto-blæk** holder hver linje mørk nok til at kunne læses. Det er gratis at designe med enhver Mark, som ingen har sikret sig; sikr dig den, du kan lide, når du er klar til at eksportere.

## FAQ

### Hvad er den bedste råhvide farvekode til en baggrund?

En varm papirhvid som `#faf7f2` passer til de fleste redaktionelle og livsstilsbrands, og en kølig hvid som `#f4f6f8` passer til software og kliniske brands. Vælg én, og brug den overalt.

### Er helt hvid dårligt til websites?

Ikke dårligt, men lyst. Helt hvid er ideel bag fritlagte produkter; til lang læsning er en let tonet råhvid blidere for øjnene.

### Hvilken tekstfarve ser bedst ud på en hvid baggrund?

En næsten sort som `#1c1917` eller `#0f172a`. Den læses som sort, holder kontrasten et godt stykke over 4,5:1 og føles blødere end helt sort.

### Hvordan gør jeg en hvid baggrund mindre kedelig?

Tilføj én stille detalje: svagt korn, et blødt lys i et hjørne, en hårfin streg eller en enkelt accentfarve. Hold marginerne generøse, så pladsen ser valgt ud.

### Hvorfor viser mine produktfotos en boks på mit råhvide website?

Fotoene er taget på helt hvid. Brug `mix-blend-mode: multiply` på billederne, eller eksportér dem med gennemsigtig baggrund.