# Monokrome gradienter: én nuance, mange toner

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

Én farve, der kun bevæger sig i lyshed: Det er den mest stille gradient, der findes, og den, der viser hver eneste fejl. Her er koder, der virker, den CSS, der holder nuancen ærlig, og løsningen på banding.

## The short version

- En monokrom gradient blander én enkelt nuance fra mørk til lys eller går fra sort til hvid gennem grå.
- En monokrom gradient er én blanding, mens et monokromt farveskema er en hel palet bygget af én nuance.
- Angiver du farvestoppene i oklch med en fast nuance, forhindrer du en gradient i én farve i at glide mod grå eller en anden nuance.
- Mørke monokrome gradienter får mest banding, fordi en 8-bit-skærm har meget få forskellige trin mellem næsten sorte toner.
- Et let lag korn over en monokrom gradient skjuler banding og får den til at ligne en overflade.

En **monokrom gradient** blander én nuance gennem dens egne toner, fra dyb til lys, uden at hente en anden farve ind. Sort til hvid gennem grå er den reneste version; en marineblå, der stiger op i lyseblå, eller en aubergine, der løfter sig til syren, er også monokrome gradienter. De ser rolige og dyre ud, fordi intet konkurrerer, og af samme grund viser de hver eneste fejl: banding, mudrede midtpunkter og en nuance, der glider halvvejs. Koderne og CSS’en nedenfor undgår alle tre.

Koksgrå til sølv: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

En sort-hvid gradient med farvestoppene samlet mod den mørke ende, så det meste af billedet forbliver dybt, og lyset kommer sent.

## Monokrom gradient vs. monokromt farveskema

De to begreber hænger sammen og forveksles ofte. Et [monokromt farveskema](https://gradiently.design/da/guide/monochromatic-color-scheme) er en palet: flere lyse, dæmpede og mørke toner af én nuance brugt i et helt design. En monokrom gradient er én enkelt blanding inden for den idé. Du kan bruge en monokrom gradient i et design, hvis palet slet ikke er monokrom, for eksempel en dyb blå baggrund under orange tekst.

| Aspekt | Monokrom gradient | Monokromt farveskema |
| --- | --- | --- |
| Hvad det er | Én sammenhængende blanding | Et sæt separate farver |
| Hvor det bor | En baggrund, en form, en knap | Et helt brand eller layout |
| Antal nuancer | Én | Én |
| Typisk brug | Herobaggrunde, kort, plakater | Brugerflader, illustration, identitet |

Samme princip, forskellig skala. Gradienten er en overflade; skemaet er et system.

## Monokrome gradientkoder til at kopiere

Hver af disse holder sig til én nuance og ændrer kun lysheden og en smule af mætningen. Mørkere farvestop er lidt mere mættede end lysere, sådan som rigtig farve opfører sig i skygge, og derfor ser de naturlige ud.

- Sort til hvid: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Grafitspot: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Marineblå til himmelblå: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Fyrregrøn til mint: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Oksblod til lyserød: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Aubergine til syren: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Umbra til honning: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Papir til sten: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Otte gradienter i én farve. Hver holder sig i sin egen nuance fra ende til ende.

Den mørke ende af familien for sig selv finder du i [sorte gradienter](https://gradiently.design/da/guide/black-gradient) og [grå gradienter](https://gradiently.design/da/guide/grey-gradient). Hvordan trinene hænger sammen, kan du læse om i [lyse, dæmpede og mørke toner](https://gradiently.design/da/guide/tints-tones-shades).

## Sådan laver du en monokrom gradient i CSS

Den enkleste måde at holde én nuance på er at skrive farvestoppene i oklch og kun ændre det første tal, lysheden. Nuancevinklen ligger fast, så farven kan ikke vandre, og oklch fordeler lysheden jævnt, så blandingen stiger i et roligt tempo. [OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained) gennemgår formatet.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Skift nuancetallet (264) for at flytte hele gradienten til en anden farve. Kromaen falder i den lyse ende, som den gør i rigtigt lys.

1. **Vælg nuancen** Vælg én farve, og find dens nuancevinkel. En blå ligger omkring 260, en grøn omkring 145, en rød omkring 25.
2. **Sæt det mørkeste og lyseste farvestop** Hold den mørke ende over ren sort og den lyse ende under ren hvid, medmindre du vil have en skarp kant. En lyshed fra 0,15 til 0,9 er et behageligt spænd.
3. **Placér det midterste farvestop med vilje** Flyt det mod den ende, der skal dominere. Et midterstop ved 30 procent giver et overvejende lyst billede; ved 70 procent et overvejende mørkt. [Farvestop i gradienter](https://gradiently.design/da/guide/gradient-stops) viser mere.
4. **Tilføj korn** Et svagt lag støj over gradienten skjuler banding og giver et præg af materiale.

## Hvorfor mørke monokrome gradienter får banding

De fleste skærme viser 256 niveauer pr. kanal. En gradient fra sort `#000000` til mørkegrå `#282828` har kun 40 forskellige trin at arbejde med. Stræk den over en hero på 1920 pixels i bredden, og hvert trin bliver en stribe på 48 pixels, som øjet let opfanger i mørket. Flerfarvede gradienter skjuler det, fordi kanalerne skifter på forskellige tidspunkter; en monokrom gradient ændrer alle tre på én gang, så striberne flugter.

### Giver banding

- Næsten sort til mørkegrå over en hel skærm
- Hård JPEG-komprimering ved eksport
- En helt ren digital overflade
- En lang blanding med lav kontrast og få farvestop

### Glat

- Et bredere spænd i lyshed eller en kortere afstand
- PNG eller en indstilling med høj kvalitet
- Et let lag korn ovenpå
- Et radialt lys, der skifter hurtigere nær sit centrum

[Banding i gradienter](https://gradiently.design/da/guide/gradient-banding) og [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) går i dybden med løsningen, med kode til et SVG-lag med støj.

## Hvor monokrome gradienter virker

Fordi de kun bærer én farve, lader monokrome gradienter skrift og fotografi føre an. De passer til lanceringer af luksusprodukter, arkitektstudier, musikudgivelser og ethvert brand, hvis identitet er én farve. Sæt ordene i den lyseste eller mørkeste ende af samme nuance eller i hvid eller sort, så læses designet som én selvsikker beslutning.

Har du brug for en accent, så tag den uden for nuancen, og brug den én gang: en enkelt orange dato på en marineblå gradient eller en rød pris på grafit. Gradienten forbliver monokrom, og accenten får al opmærksomheden, fordi intet andet konkurrerer om den.

Et kvadratisk albumcover i dybe sorte og koksgrå toner med ét ord i lys skrift

Et kvadratisk udgivelsescover i 1080×1080, næsten kun skygge, med lys, der stiger i den ene kant.

En bred hero til et arkitektstudies hjemmeside på en mørk gradient i én farve

En hero til en hjemmeside i 1920×1080: den samme stille tilgang i én farve over et meget bredere format.

En monokrom baggrund i Gradiently kan også bevæge sig: En Mark gengiver sit lys live, så en gradient i én farve kan drive langsomt bag ordene, og med Pro eksporteres den som et sømløst loop i alle de størrelser, du designer.

## FAQ

### Hvad er en monokrom gradient?

En gradient, der blander én enkelt nuance gennem dens egne toner fra mørk til lys eller går fra sort til hvid gennem grå.

### Er en monokrom gradient det samme som et monokromt farveskema?

Nej. Et monokromt skema er en palet af én nuance brugt i et helt design; en monokrom gradient er én sammenhængende blanding af én enkelt nuance.

### Hvordan laver jeg en gradient i én farve i CSS?

Skriv farvestoppene i oklch, og ændr kun lysheden, for eksempel fra `oklch(0.18 0.08 264)` til `oklch(0.86 0.06 264)`. Nuancen ligger fast, så farven kan ikke glide.

### Hvorfor har min sorte gradient striber?

Mørke toner har meget få forskellige trin på en 8-bit-skærm, så blandingen viser striber. Tilføj et let lag korn, gør spændet i lyshed bredere, eller eksportér som PNG.

### Hvad er koden til en sort-hvid gradient?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` er den enkle version. For et rigere look samler du farvestoppene mod den mørke ende og stopper inden ren hvid.