Tinten, tonen en schaduwen: een kleurschaal bouwen

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.

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 vooral uit tinten. Schaduwen lezen als rijk, serieus en premium, het terrein van donkere kleurenpaletten. Tonen lezen als volwassen en natuurlijk, de basis van bijna elk gedempt kleurenpalet.

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. 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. 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. 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. 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. 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. 6

   Controleer de paren die samenkomen

   Test tekststappen op achtergrondstappen op contrast, met kleurcontrast en toegankelijkheid als leidraad.

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 aan bod komt. De browserondersteuning is breed; bekijk color-mix() op MDN voor details.

: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);
}

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 gebruiken hetzelfde idee voor hele paletten.

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.