# Monochrome verlopen: één tint, vele tonen

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

Eén kleur die alleen in lichtheid beweegt: het rustigste verloop dat er is, en het verloop dat elke fout toont. Hier zijn codes die werken, de CSS die de tint eerlijk houdt en de oplossing voor banding.

## The short version

- Een monochroom verloop mengt één tint van donker naar licht, of loopt van zwart naar wit via grijstinten.
- Een monochroom verloop is één overgang, terwijl een monochromatisch kleurenschema een heel palet is dat op één tint is gebouwd.
- De stops in oklch met een vaste tint definiëren voorkomt dat een eenkleurig verloop richting grijs of een andere tint afdrijft.
- Donkere monochrome verlopen vertonen de meeste banding, omdat een 8-bitscherm heel weinig onderscheiden stappen heeft tussen bijna zwarte tonen.
- Een lichte korrellaag over een monochroom verloop verbergt banding en laat het op een oppervlak lijken.

Een **monochroom verloop** mengt één tint door zijn eigen schakeringen, van diep naar licht, zonder een tweede kleur erbij te halen. Zwart naar wit via grijs is de zuiverste versie; een marineblauw dat opklimt naar bleekblauw, of een aubergine die oploopt naar lila, zijn ook monochrome verlopen. Ze ogen rustig en duur omdat niets concurreert, en om dezelfde reden tonen ze elke fout: banding, modderige middenpunten en een tint die halverwege afdrijft. De codes en CSS hieronder vermijden alle drie.

Houtskool naar zilver: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Een zwart-wit verloop met de stops naar het donkere einde gedrongen, zodat het grootste deel van het beeld diep blijft en het licht laat komt.

## Monochroom verloop versus monochromatisch kleurenschema

De twee termen zijn verwant en worden vaak verward. Een [monochromatisch kleurenschema](https://gradiently.design/nl/guide/monochromatic-color-scheme) is een palet: meerdere tinten, tonen en schakeringen van één tint, gebruikt in een heel ontwerp. Een monochroom verloop is één overgang binnen dat idee. Je kunt een monochroom verloop gebruiken in een ontwerp waarvan het palet helemaal niet monochromatisch is, zoals een diepblauwe achtergrond onder oranje letters.

| Aspect | Monochroom verloop | Monochromatisch schema |
| --- | --- | --- |
| Wat het is | Eén doorlopende overgang | Een set aparte kleuren |
| Waar het leeft | Een achtergrond, een vorm, een knop | Een heel merk of een hele opmaak |
| Aantal tinten | Eén | Eén |
| Typisch gebruik | Heroachtergronden, kaarten, posters | Interfaces, illustratie, identiteit |

Zelfde principe, andere schaal. Het verloop is een oppervlak; het schema is een systeem.

## Monochrome verloopcodes om te kopiëren

Elk van deze houdt één tint en verandert alleen de lichtheid en een beetje de verzadiging. Donkerdere stops zijn iets verzadigder dan lichtere, zoals echte kleur zich in schaduw gedraagt, en daarom ogen ze natuurlijk.

- Zwart naar wit: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Grafietspot: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Marine naar hemel: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Den naar mint: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Ossenbloed naar blush: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Aubergine naar lila: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Omber naar honing: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Papier naar steen: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Acht eenkleurige verlopen. Elk blijft van begin tot eind in zijn eigen tint.

Voor het donkere uiteinde van deze familie op zich zie je [zwarte verlopen](https://gradiently.design/nl/guide/black-gradient) en [grijze verlopen](https://gradiently.design/nl/guide/grey-gradient). Voor hoe de stappen zich verhouden is [tinten, tonen en schakeringen](https://gradiently.design/nl/guide/tints-tones-shades) de achtergrondlectuur.

## Een monochroom verloop maken in CSS

De simpelste manier om één tint te houden is de stops in oklch schrijven en alleen het eerste getal, de lichtheid, veranderen. De tinthoek blijft vast, dus de kleur kan niet dwalen, en oklch verdeelt zijn lichtheid gelijkmatig, dus de overgang klimt in een gestaag tempo. [OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained) behandelt het formaat.

```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%
  );
}
```

Wijzig het tintgetal (264) om het hele verloop naar een andere kleur te verplaatsen. De chroma daalt aan het lichte uiteinde, zoals bij echt licht.

1. **Kies de tint** Kies één kleur en zoek zijn tinthoek. Een blauw zit rond 260, een groen rond 145, een rood rond 25.
2. **Stel de donkerste en lichtste stop in** Houd het donkere uiteinde boven zuiver zwart en het lichte onder zuiver wit, tenzij je een harde rand wilt. Een lichtheid van 0,15 tot 0,9 is een prettig bereik.
3. **Plaats de middelste stop bewust** Verplaats hem naar het uiteinde dat moet domineren. Een middelste stop op 30 procent geeft een grotendeels licht beeld; op 70 procent grotendeels donker. [Verloopkleurstops](https://gradiently.design/nl/guide/gradient-stops) toont meer.
4. **Voeg korrel toe** Een zwakke ruislaag over het verloop verbergt banding en geeft een materiaalgevoel.

## Waarom donkere monochrome verlopen banding vertonen

De meeste schermen tonen 256 niveaus per kanaal. Een verloop van zwart `#000000` naar donkergrijs `#282828` heeft maar 40 onderscheiden stappen om mee te werken. Rek het uit over een hero van 1920 pixels breed en elke stap is een streep van 48 pixels, die het oog in het donker makkelijk opmerkt. Meerkleurige verlopen verbergen dit omdat de kanalen op verschillende momenten veranderen; een monochroom verloop verandert alle drie samen, dus de banden vallen op één lijn.

### Banding

- Bijna zwart naar donkergrijs over een heel scherm
- Zware JPEG-compressie bij het exporteren
- Perfect schoon digitaal oppervlak
- Lange overgang met laag contrast en weinig stops

### Vloeiend

- Een breder lichtheidsbereik, of een kortere afstand
- PNG, of een hoge kwaliteitsinstelling
- Een lichte korrellaag erbovenop
- Een radiaal licht dat sneller verandert nabij het midden

[Verloopbanding](https://gradiently.design/nl/guide/gradient-banding) en [korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) gaan uitgebreid in op de oplossing, met code voor een SVG-ruislaag.

## Waar monochrome verlopen werken

Omdat ze één kleur dragen, laten monochrome verlopen letters en fotografie leiden. Ze passen bij luxe productlanceringen, architectenbureaus, muziekreleases en elk merk waarvan de identiteit één kleur is. Zet de woorden in het lichtste of donkerste uiteinde van dezelfde tint, of in wit of zwart, en het ontwerp leest als één zelfverzekerde beslissing.

Heb je een accent nodig, neem het dan van buiten de tint en gebruik het één keer: één oranje datum op een marineblauw verloop, of een rode prijs op grafiet. Het verloop blijft monochroom, en het accent krijgt alle aandacht omdat niets anders erom strijdt.

Een vierkante albumhoes in diepzwarte en houtskooltonen met één woord in bleke letters

Een vierkante hoes van 1080×1080, bijna helemaal schaduw, met licht dat aan één rand opkomt.

Een brede websitehero voor een architectenbureau op een donker eenkleurig verloop

Een websitehero van 1920×1080: dezelfde rustige eenkleurige aanpak over een veel breder beeld.

Een monochrome achtergrond in Gradiently kan ook bewegen: een Mark rendert zijn licht live, dus een eenkleurig verloop kan langzaam achter de woorden driften, en met Pro exporteert het als naadloze lus op elk formaat dat je ontwerpt.

## FAQ

### Wat is een monochroom verloop?

Een verloop dat één tint door zijn eigen schakeringen mengt, van donker naar licht, of van zwart naar wit loopt via grijstinten.

### Is een monochroom verloop hetzelfde als een monochromatisch kleurenschema?

Nee. Een monochromatisch schema is een palet van één tint dat in een ontwerp wordt gebruikt; een monochroom verloop is één doorlopende overgang van één tint.

### Hoe maak ik een eenkleurig verloop in CSS?

Schrijf de stops in oklch en verander alleen de lichtheid, bijvoorbeeld van `oklch(0.18 0.08 264)` naar `oklch(0.86 0.06 264)`. De tint blijft vast, dus de kleur kan niet afdrijven.

### Waarom heeft mijn zwarte verloop strepen?

Donkere tonen hebben op een 8-bitscherm heel weinig onderscheiden stappen, dus de overgang toont banden. Voeg een lichte korrellaag toe, vergroot het lichtheidsbereik of exporteer als PNG.

### Wat is een zwart-witverloopcode?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` is de gewone versie. Voor een rijkere look dring je de stops naar het donkere uiteinde en stop je vóór zuiver wit.