# Tinten, tonen en schaduwen: een kleurschaal bouwen

[Canonical HTML page](https://gradiently.design/nl/guide/tints-tones-shades)

Eén merkkleur is nooit genoeg om mee te ontwerpen. Tinten, tonen en schaduwen maken er een hele familie van, en een goede schaal is wat een palet tekst, knoppen, achtergronden en grafieken laat dragen.

## The short version

- Tinten, tonen en schaduwen zijn drie manieren om één kleur te variëren: een tint voegt wit toe, een toon voegt grijs toe en een schaduw voegt zwart toe.
- Tinten voelen lichter en zachter, tonen voelen rustiger en gedempter, en schaduwen voelen dieper en serieuzer.
- Een kleurschaal is een rij tinten en schaduwen van één kleurtoon, meestal genummerd van 50 of 100 voor de lichtste tot 900 voor de donkerste.
- Mengen in een perceptuele kleurruimte zoals OKLCH zorgt dat de stappen van een schaal er gelijkmatig verdeeld uitzien.
- Een goede schaal geeft elke stap een taak, zoals achtergronden, randen, tekst en hoverstanden, en controleert het contrast tussen de stappen die samenkomen.

**Tinten, tonen en schaduwen** zijn de drie manieren om een kleur te veranderen zonder de kleurtoon te veranderen. Een **tint** is de kleur gemengd met wit, dus lichter en zachter. Een **schaduw** is de kleur gemengd met zwart, dus dieper. Een **toon** is de kleur gemengd met grijs, dus rustiger en gedempter. Zie tinten, tonen en schaduwen als wit, grijs en zwart toegevoegd aan één kleurtoon. Zet een reeks tinten en schaduwen op volgorde en je hebt een kleurschaal: het gereedschap dat één merkkleur omzet in iets waarmee je echt kunt ontwerpen.

## Tint, toon en schaduw naast elkaar

Het makkelijkst zie je het verschil door met één kleur te beginnen en die drie kanten op te duwen. Hier is de basis een violet, `#7c3aed`, gemengd in stappen van 20 procent.

| Type | Gemengd met | Effect | Voorbeeld uit #7c3aed |
| --- | --- | --- | --- |
| Tint | Wit | Lichter, zachter, luchtiger | `#b089f4` bij 40 procent wit |
| Toon | Grijs | Gedempt, rustiger, natuurlijker | `#7e64ac` bij 60 procent grijs |
| Schaduw | Zwart | Dieper, zwaarder, serieuzer | `#4a238e` bij 40 procent zwart |

De kleurtoon blijft in elk geval violet. Alleen helderheid en verzadiging veranderen.

- Tint 90%: #f2ebfd
- Tint 60%: #cbb0f8
- Tint 20%: #9661f1
- Basisviolet: #7c3aed
- Schaduw 20%: #632ebe
- Schaduw 60%: #32175f
- Schaduw 80%: #190c2f

Tinten links, schaduwen rechts. Deze rij is al het grootste deel van een bruikbare schaal.

- Basisviolet: #7c3aed
- Toon 20%: #7d48d7
- Toon 40%: #7e56c1
- Toon 60%: #7e64ac
- Toon 80%: #7f7296

Tonen houden ongeveer dezelfde helderheid en onttrekken juist kleur, en daarom voelen paletten op basis van tonen rustig en volwassen.

## Wat tinten, tonen en schaduwen met een ontwerp doen

Elke richting verandert de sfeer net zo sterk als de kleur. Tinten lezen als zacht, jong en open, daarom bestaan [pastelkleurenpaletten](https://gradiently.design/nl/guide/pastel-color-palettes) vooral uit tinten. Schaduwen lezen als rijk, serieus en premium, het terrein van [donkere kleurenpaletten](https://gradiently.design/nl/guide/dark-color-palettes). Tonen lezen als volwassen en natuurlijk, de basis van bijna elk [gedempt kleurenpalet](https://gradiently.design/nl/guide/muted-color-palettes).

- Tinten: zacht en open: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tonen: rustig en volwassen: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Schaduwen: diep en serieus: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Hetzelfde violet drie kanten op geduwd. Tinten tillen de sfeer op, tonen dempen haar en schaduwen geven haar gewicht.

## Een kleurschaal bouwen uit één hexcode

De meeste designsystemen nummeren hun schaal van 50 of 100 (lichtst) tot 900 (donkerst), met de merkkleur ergens rond 500. Consistentie telt zwaarder dan de nummers: elke kleur in je systeem moet dezelfde stappen hebben, zodat `200` altijd een lichte achtergrond betekent en `700` altijd tekst. Vijf goed gekozen stappen verslaan elf stappen die niemand uit elkaar kan houden, en de tussenstappen voeg je toe zodra echte ontwerpen laten zien waar ze ontbreken.

1. **Plaats je merkkleur** Bepaal bij welke stap hij hoort. Een middelkleur als `#7c3aed` zit op 500; een heel donker merkmarineblauw kan op 800 zitten.
2. **Maak de lichte kant** Meng richting wit voor 400 tot 50. De lichtste stap moet bijna kleurloos zijn, licht genoeg voor een paginaachtergrond.
3. **Maak de donkere kant** Meng richting zwart voor 600 tot 900. De donkerste stap moet donker genoeg zijn voor lopende tekst op de lichtste.
4. **Maak de stappen gelijkmatig** Bekijk de rij van een afstand. Als twee buren bijna identiek lijken en een andere stap als een sprong oogt, pas ze op het oog aan.
5. **Verschuif de kleurtoon licht aan de uiteinden** Zuiver zwart kan schaduwen vuil laten lijken. Veel ontwerpers duwen donkere stappen een paar graden richting blauw of violet en lichte stappen richting warm.
6. **Controleer de paren die samenkomen** Test tekststappen op achtergrondstappen op contrast, met [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) als leidraad.

| Stap | Hex | Typische taak |
| --- | --- | --- |
| 50 | `#f2ebfd` | Pagina- of kaartachtergrond |
| 100 | `#e5d8fb` | Subtiele vlakken, geselecteerde rijen |
| 200 | `#cbb0f8` | Randen, scheidingslijnen, uitgeschakelde staten |
| 400 | `#9661f1` | Iconen, grote decoratieve vormen |
| 500 | `#7c3aed` | Merkkleur, primaire knoppen |
| 600 | `#632ebe` | Knop bij hover, links |
| 700 | `#4a238e` | Koppen op lichte achtergronden |
| 800 | `#32175f` | Lopende tekst op tinten |
| 900 | `#190c2f` | Achtergrond in donkere modus |

Een violette schaal met een taak voor elke stap. Wit op 500 is ongeveer 5,7:1 en stap 800 op stap 100 ongeveer 10,9:1, beide boven de richtlijn van 4,5:1.

## Tinten en schaduwen maken in CSS

Je hoeft niet meer elke stap met de hand te berekenen. CSS `color-mix()` mengt twee kleuren in een gekozen kleurruimte, zodat een hele schaal één variabele kan volgen. Mengen in OKLCH houdt de stappen voor het oog gelijkmatiger dan gewoon sRGB, een punt dat in [OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained) aan bod komt. De browserondersteuning is breed; bekijk [color-mix() op MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) voor details.

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Verander `--brand` en elke tint, schaduw en toon past zich mee aan.

## Tinten en schaduwen in verlopen

De schoonste verlopen zijn vaak gewoon één kleurtoon die van tint naar schaduw beweegt. Omdat er niets over het kleurenwiel loopt, ontstaat er geen grijze band in het midden, en leest het resultaat als licht dat op één materiaal valt. [Monochrome kleurenschema's](https://gradiently.design/nl/guide/monochromatic-color-scheme) gebruiken hetzelfde idee voor hele paletten.

- Violet, van tint naar schaduw: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violet, van boven belicht: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terracotta, van tint naar schaduw: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Lila tint naar violette toon: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Verlopen met één kleurtoon. Elk leent alleen uit zijn eigen schaal.

Een Gradiently Mark werkt op een vergelijkbare manier: een recept van verwante kleuren met licht erdoorheen. Als je op een Mark ontwerpt, worden de kleuren bij je woorden dieper of lichter, zodat tekst leesbaar blijft zonder vak erachter.

## FAQ

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

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

### Is een pastelkleur een tint?

Ja. Pastelkleuren zijn tinten: kleuren die met veel wit zijn opgelicht, waardoor ze zacht zijn en weinig intensiteit hebben.

### Hoeveel stappen moet een kleurschaal hebben?

De meeste designsystemen gebruiken negen tot elf stappen, genummerd van 50 of 100 tot 900. Minder stappen kan werken voor kleine projecten, zolang elke stap een duidelijke taak heeft.

### Hoe maak ik een donkerdere schaduw van een kleur in CSS?

Gebruik `color-mix(in oklch, jekleur 70%, black)` en pas het percentage aan. Lagere percentages geven donkerdere schaduwen.

### Waarom zien mijn schaduwen er modderig uit?

Mengen met zuiver zwart haalt ook verzadiging weg. Meng in OKLCH en probeer de donkerste stappen iets richting blauw of violet te duwen om ze rijk te houden.