# Monochromatisch kleurenschema: één tint, een hele identiteit

[Canonical HTML page](https://gradiently.design/nl/guide/monochromatic-color-scheme)

Eén tint klinkt beperkend, tot je ziet hoeveel bereik erin zit. Goed opgebouwd dekt één kleur achtergronden, tekst, knoppen en kleurverlopen, en oogt ze herkenbaarder dan een regenboog.

## The short version

- Een monochromatisch kleurenschema gebruikt één enkele tint in een bereik van lichtheid en verzadiging, opgebouwd uit lichte, donkere en gedempte varianten.
- Een lichte variant (tint) is een kleur gemengd met wit, een donkere variant (shade) is een kleur gemengd met zwart en een toon is een kleur gemengd met grijs.
- Een bruikbare monochromatische reeks heeft zo’n negen of tien stappen van bijna wit tot bijna zwart, gelijkmatig verdeeld in waargenomen lichtheid.
- Door de tint naar de lichte en donkere uiteinden licht te verschuiven, voorkom je dat een monochromatisch palet levenloos oogt.
- Monochromatische paletten geven rustige, samenhangende kleurverlopen, maar trage verlopen in één tint krijgen snel banding en hebben baat bij fijne korrel.

Een **monochromatisch kleurenschema** gebruikt één tint en verder niets, gevarieerd in lichtheid en verzadiging. Denk aan marine, kobalt, hemelsblauw en ijsblauw: allemaal blauw, allemaal duidelijk verwant, en met genoeg contrast onderling voor achtergronden, tekst en accenten. Omdat elke kleur dezelfde tint deelt, oogt een monochromatisch palet altijd als één geheel. Het werk zit in genoeg bereik opbouwen binnen die ene tint.

Deze gids behandelt de drie manieren om een tint te variëren, hoe je een reeks bouwt waarmee je echt kunt ontwerpen, en hoe monochroom werkt in kleurverlopen. Zie voor de bredere context [de basis van kleurtheorie](https://gradiently.design/nl/guide/color-theory-basics).

## Lichte varianten, donkere varianten en tonen

Elke kleur in een monochromatisch palet komt voort uit een van drie bewegingen. Een **lichte variant** (in het Engels *tint*) voegt wit toe en maakt de kleur lichter en zachter. Een **donkere variant** (*shade*) voegt zwart toe en maakt haar dieper. Een **toon** voegt grijs toe en maakt haar rustiger, zonder veel aan de lichtheid te veranderen.

- Lichte varianten: richting wit: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Donkere varianten: richting zwart: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Tonen: richting grijs: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Eén blauw, drie richtingen. De meeste monochromatische paletten gebruiken ze alle drie.

## Zo bouw je een monochromatisch palet

Een handvol willekeurige lichte varianten is nog geen palet. Wat je wilt is een reeks: een opeenvolging van stappen van bijna wit tot bijna zwart, zo gelijkmatig verdeeld dat elke stap evenveel van zijn buur verschilt als de vorige. Negen tot elf stappen is een gangbare maat, en het is wat de meeste designsystemen gebruiken.

- Teal 50: #f0fdfa
- Teal 100: #ccfbf1
- Teal 200: #99f6e4
- Teal 300: #5eead4
- Teal 400: #2dd4bf
- Teal 500: #14b8a6
- Teal 600: #0d9488
- Teal 700: #0f766e
- Teal 800: #115e59
- Teal 900: #134e4a

Een tealreeks van tien stappen. Lichte stappen voor achtergronden, middelste stappen voor kleur, donkere stappen voor tekst.

1. **Kies de kerntint** Kies de versie van de kleur die je op volle sterkte het mooist vindt. Die wordt het midden van de reeks.
2. **Bepaal de uiteinden** Kies een bijna-wit met een vleugje van de tint en een bijna-zwart met een vleugje van de tint. Vermijd puur wit en puur zwart; die ogen los van de rest.
3. **Vul de stappen op lichtheid** Verdeel de stappen op hoe licht ze ogen, niet op gelijke hex- of HSL-waarden. Perceptuele kleurruimtes zoals OKLCH maken dat makkelijk; zie [kleurverlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch).
4. **Verlaag de verzadiging aan de uiteinden** Heel lichte en heel donkere stappen ogen beter als ze iets gedempt zijn. Volle verzadiging aan de uitersten wordt schreeuwerig of modderig.
5. **Geef de tint een duwtje** Laat het lichte uiteinde iets warmer of koeler worden en het donkere uiteinde de andere kant op. Dat geeft leven zonder het schema te breken.

### Waarom een lichte tintverschuiving helpt

Echte voorwerpen worden zelden donkerder door er simpelweg zwart bij te doen: schaduwen vangen koeler of warmer licht uit hun omgeving op. Een reeks die alleen zwart en wit mengt, oogt daarbij vergeleken vlak. De tint over de reeks een paar graden verschuiven is standaardpraktijk in illustratie en designsystemen.

- Rechte reeks: alleen wit en zwart: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Tintverschuiving: hemelsblauw en indigo: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Twee blauwe reeksen van vijf stappen rond dezelfde kern, `#2563eb`. De tweede schuift aan het lichte uiteinde richting hemelsblauw en aan het donkere uiteinde richting indigo, waardoor hij belicht oogt in plaats van gemengd.

## Een hele identiteit op één tint

Een monochromatisch merk kan verrassend herkenbaar zijn, omdat het gedisciplineerd is op een manier die de meeste merken niet zijn. De truc is elke stap van de reeks een taak te geven en je daaraan te houden.

| Stap in de reeks | Taak |
| --- | --- |
| 50 tot 100 | Achtergronden van pagina’s en kaarten |
| 200 tot 300 | Randen, scheidingslijnen, rustige vlakvullingen |
| 400 tot 600 | Merkkleur, knoppen, illustratie |
| 700 tot 800 | Koppen, links, sterke vlakvullingen |
| 900 en donkerder | Lopende tekst, achtergronden in donkere modus |

Rollen voor een monochromatische reeks. Tekst en achtergrond komen van tegenovergestelde uiteinden, en daar zit het contrast.

Combineer tekst en achtergrond altijd van tegenovergestelde uiteinden van de reeks. Twee middelste stappen zijn prachtig als kleurstalen en falen als tekst; controleer het met de richtlijnen in [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility). Leg de reeks, met de rol van elke stap, vast in je [brand kit](https://gradiently.design/nl/guide/brand-kit), zodat iedereen dezelfde waarden gebruikt.

Een staande redactionele post met een schreefkop op een zachte achtergrond in één tint

Een rustig vlak in één kleurfamilie onder redactionele letters.

Een brede e-mailheader met een kop op een rustige achtergrond in één tint

Dezelfde look, doorgetrokken naar een e-mailheader.

Het enige wat een monochromatische identiteit mist, is een duidelijk accent. Moet in je ontwerpen een knop of een prijs eruit springen, sta dan één kleur van buiten de tint toe en gebruik die zelden. Daarmee schuif je op naar een [analoog palet](https://gradiently.design/nl/guide/analogous-colors) of een monochroom met accent, en beide zijn prima.

## Monochromatische kleurverlopen

Kleurverlopen in één tint horen bij de elegantste die je kunt maken: ze suggereren licht dat over één materiaal valt. Ze worden nooit modderig, want er is geen tweede tint om mee te botsen.

- Middernachtblauw: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Roze: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Salie: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Zand: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Violette gloed: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Grafiet (helemaal geen tint): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Zes kleurverlopen in één tint. Elk beweegt alleen in lichtheid en een beetje in verzadiging.

> **Let op banding** Omdat een monochromatisch kleurverloop langzaam verandert, heeft het minder kleurniveaus om over het scherm te verdelen en krijgt het snel zichtbare strepen, vooral in donkerblauw en grijs. Een fijne laag korrel lost dat op; zie [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

## FAQ

### Wat is een monochromatisch kleurenschema?

Een monochromatisch kleurenschema gebruikt één enkele tint in een reeks lichte varianten, donkere varianten en tonen, van heel licht tot heel donker.

### Wat is het verschil tussen een tint, een shade en een toon?

Een tint is een kleur gemengd met wit, een shade is gemengd met zwart en een toon is gemengd met grijs.

### Is zwart-wit een monochromatisch schema?

Strikt genomen zijn zwart, wit en grijs achromatisch: ze hebben geen tint. In het dagelijks gebruik noemen mensen ze vaak monochroom, en ze volgen dezelfde principes.

### Hoeveel kleuren moet een monochromatisch palet hebben?

Zo’n negen tot elf stappen van bijna wit tot bijna zwart geven genoeg bereik voor achtergronden, tekst, randen en merkkleur.

### Kan een merk maar één kleur gebruiken?

Ja, als het palet een volledig lichtheidsbereik heeft en elke stap een duidelijke rol. Veel merken met één kleur voegen één klein accent toe voor calls-to-action.