# Monokrome gradienter: én fargetone, mange nyanser

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

Én farge som bare endrer lyshet: det er den roligste gradienten som finnes, og den som viser alle feil. Her er koder som fungerer, CSS som holder fargetonen fast, og løsningen på bånding.

## The short version

- En monokrom gradient blander én fargetone fra mørkt til lyst, eller går fra svart til hvitt gjennom gråtoner.
- En monokrom gradient er én blanding, mens et monokromatisk fargeskjema er en hel palett bygd av én fargetone.
- Å definere stoppene i oklch med fast fargetone hindrer at en gradient med én farge sklir mot grått eller en annen fargetone.
- Mørke monokrome gradienter får mest bånding, fordi en 8-bits skjerm har svært få tydelige trinn mellom nesten svarte toner.
- Et lett kornlag over en monokrom gradient skjuler bånding og får den til å ligne en overflate.

En **monokrom gradient** blander én fargetone gjennom dens egne nyanser, fra dyp til lys, uten å hente inn en annen farge. Svart til hvitt gjennom grått er den reneste versjonen. Marineblått som stiger mot lyseblått, eller aubergine som lysner mot syrin, er også monokrome gradienter. De virker rolige og eksklusive fordi ingenting konkurrerer, og av samme grunn viser de alle feil: bånding, grumsete midtpartier og en fargetone som sklir underveis. Kodene og CSS-en under unngår alle tre.

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

En svart og hvit gradient med stoppene samlet mot den mørke enden, så mesteparten av rammen forblir dyp og lyset kommer sent.

## Monokrom gradient eller monokromatisk fargeskjema

Begrepene er beslektet og blir ofte forvekslet. Et [monokromatisk fargeskjema](https://gradiently.design/nb/guide/monochromatic-color-scheme) er en palett: flere lyse, dempede og mørke varianter av én fargetone brukt i et helt design. En monokrom gradient er én blanding innenfor denne ideen. Du kan bruke en monokrom gradient i et design der paletten slett ikke er monokromatisk, som en dypblå bakgrunn under oransje tekst.

| Egenskap | Monokrom gradient | Monokromatisk skjema |
| --- | --- | --- |
| Hva det er | Én sammenhengende blanding | Et sett med separate farger |
| Hvor det brukes | En bakgrunn, en form eller en knapp | En hel merkevare eller et oppsett |
| Antall fargetoner | Én | Én |
| Vanlig bruk | Toppbakgrunner, kort og plakater | Grensesnitt, illustrasjon og identitet |

Samme prinsipp, ulik skala. Gradienten er en overflate; skjemaet er et system.

## Monokrome gradientkoder du kan kopiere

Hver av disse holder én fargetone og endrer bare lysheten og litt av metningen. De mørkere stoppene er litt mer mettede enn de lysere. Slik oppfører ekte farge seg i skygge, og derfor ser disse naturlige ut.

- Svart til hvitt: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Grafitt i spotlys: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Marineblå til himmelblå: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Furugrønn til mint: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Okseblod til pudderrosa: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Aubergine til syrin: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Umbrabrun til honning: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Papir til stein: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Åtte gradienter med én farge. Hver holder seg til sin egen fargetone fra ende til ende.

For den mørke enden av denne familien alene, se [svarte gradienter](https://gradiently.design/nb/guide/black-gradient) og [grå gradienter](https://gradiently.design/nb/guide/grey-gradient). [Lyse, dempede og mørke nyanser](https://gradiently.design/nb/guide/tints-tones-shades) er bakgrunnsstoff om hvordan trinnene henger sammen.

## Slik lager du en monokrom gradient i CSS

Den enkleste måten å holde én fargetone på er å skrive stoppene i oklch og bare endre det første tallet, lysheten. Fargetonevinkelen står fast, så fargen kan ikke vandre. oklch fordeler lysheten jevnt, så blandingen stiger i et stabilt tempo. [OKLCH forklart](https://gradiently.design/nb/guide/oklch-explained) dekker 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%
  );
}
```

Endre fargetonetallet (264) for å flytte hele gradienten til en annen farge. Chroma faller i den lyse enden, slik den gjør i ekte lys.

1. **Velg fargetonen** Velg én farge og finn fargetonevinkelen. Blått ligger rundt 260, grønt rundt 145 og rødt rundt 25.
2. **Sett mørkeste og lyseste stopp** Hold den mørke enden over rent svart og den lyse enden under rent hvitt hvis du ikke ønsker en hard kant. Lyshet fra 0,15 til 0,9 er et behagelig spenn.
3. **Plasser midtstoppet bevisst** Flytt det mot enden du vil skal dominere. Et midtstopp ved 30 prosent gir en hovedsakelig lys ramme; ved 70 prosent blir den hovedsakelig mørk. [Fargestopp i gradienter](https://gradiently.design/nb/guide/gradient-stops) viser mer.
4. **Legg til korn** Et svakt støylag over gradienten skjuler bånding og gir materialfølelse.

## Hvorfor mørke monokrome gradienter får bånding

De fleste skjermer viser 256 nivåer per kanal. En gradient fra svart `#000000` til mørkegrått `#282828` har bare 40 tydelige trinn å bruke. Strekk den over et toppbilde som er 1920 piksler bredt, så blir hvert trinn en stripe på 48 piksler, som øyet lett ser i mørket. Flerfargede gradienter skjuler dette fordi kanalene endres på ulike tidspunkt. En monokrom gradient endrer alle tre samtidig, så båndene sammenfaller.

### Bånding

- Nesten svart til mørkegrått over en hel skjerm
- Hard JPEG-komprimering ved eksport
- En helt ren digital overflate
- En lang blanding med lav kontrast og få stopp

### Jevnt

- Større lyshetsspenn eller kortere avstand
- PNG eller en innstilling med høy kvalitet
- Et lett kornlag oppå
- Et radialt lys som endrer seg raskere nær midten

[Bånding i gradienter](https://gradiently.design/nb/guide/gradient-banding) og [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) forklarer løsningen i detalj, med kode for et SVG-støylag.

## Hvor monokrome gradienter fungerer

Fordi de bruker én farge, lar monokrome gradienter typografi og foto lede. De passer lanseringer av luksusprodukter, arkitektstudioer, musikkutgivelser og alle merkevarer med én farge som identitet. Sett ordene i den lyseste eller mørkeste enden av samme fargetone, eller i hvitt eller svart, så designet fremstår som ett sikkert valg.

Hvis du trenger en aksent, hent den utenfor fargetonen og bruk den én gang: en enkelt oransje dato på en marineblå gradient eller en rød pris på grafitt. Gradienten forblir monokrom, og aksenten får all oppmerksomheten fordi ingenting annet konkurrerer.

Et kvadratisk albumomslag i dype svarte og koksgrå toner med ett ord i lys skrift

Et kvadratisk utgivelsesomslag i 1080×1080, nesten bare skygge, med lys som stiger ved én kant.

Et bredt toppbilde for nettsiden til et arkitektstudio på en mørk gradient med én farge

Et toppbilde på nettside i 1920×1080: samme rolige tilnærming med én farge i en langt bredere ramme.

En monokrom bakgrunn i Gradiently kan også bevege seg: en Mark gjengir lyset direkte, så en gradient med én farge kan gli langsomt bak ordene. Med Pro eksporteres den som en sømløs sløyfe i alle størrelser du designer.

## FAQ

### Hva er en monokrom gradient?

En gradient som blander én fargetone gjennom dens egne nyanser fra mørkt til lyst, eller går fra svart til hvitt gjennom gråtoner.

### Er en monokrom gradient det samme som et monokromatisk fargeskjema?

Nei. Et monokromatisk skjema er en palett med én fargetone brukt i et design; en monokrom gradient er én sammenhengende blanding av én fargetone.

### Hvordan lager jeg en gradient med én farge i CSS?

Skriv stoppene i oklch og endre bare lysheten, for eksempel fra `oklch(0.18 0.08 264)` til `oklch(0.86 0.06 264)`. Fargetonen står fast, så fargen ikke kan vandre.

### Hvorfor har den svarte gradienten min striper?

Mørke toner har svært få tydelige trinn på en 8-bits skjerm, så blandingen viser bånd. Legg til et lett kornlag, øk lyshetsspennet eller eksporter som PNG.

### Hva er koden for en svart og hvit gradient?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` er den enkle versjonen. For et rikere uttrykk samler du stoppene mot den mørke enden og stopper før rent hvitt.