Tints en Shades: Kleurschalen Bouwen voor Design Systemen

Genereer systematische kleurenpaletten — van 50 tot 900 — die consistente, toegankelijke design systemen aandrijven.

6 min leestijd Kleur · CSS · Design 6 secties + FAQ

Elk volwassen design systeem — Tailwind, Material Design, Chakra UI — gebruikt een systematische kleurschaal in plaats van een handvol handgekozen kleuren. Deze schalen laten designers en ontwikkelaars het juiste helderheidsniveau kiezen voor elke context.

Een tint voegt wit toe aan een basiskleur, waardoor deze lichter wordt. Een shade voegt zwart toe, waardoor deze donkerder wordt. De wiskundige benadering gebruikt het HSL-kleurmodel om de helderheid aan te passen met behoud van tint en verzadiging van de oorspronkelijke kleur.

Wat zijn tints en shades

In kleurtheorie is een tint een kleur gemengd met wit, wat een lichtere versie oplevert. Een shade is een kleur gemengd met zwart, wat een donkerdere versie oplevert. In digitaal design produceren tint-en-shade-generatoren doorgaans een reeks helderheidswaarden van bijna wit tot bijna zwart.

Gratis Tool Tint & Schaduw Generator Genereer een volledige 50–900 kleurenschaal vanuit elke basiskleur

HSL-kleurmodel voor manipulatie

HSL (Tint, Verzadiging, Helderheid) is het voorkeursmodel voor het genereren van tints en shades omdat helderheid een onafhankelijke as is. Om een tint te maken, verhoog L terwijl H en S constant blijven. Om een shade te maken, verlaag L.

Een 9-staps schaal bouwen (100-900)

De standaard design systeem schaal loopt van 50 (bijna wit) tot 900 (bijna zwart), met de basiskleur verankerd op 500. Stappen 100-400 zijn tints met toenemende helderheid. Stappen 600-900 zijn shades met afnemende helderheid.

Gratis Tool Kleurenpalet Generator Genereer harmonieuze paletten vanuit elke basiskleur

Toegankelijkheidsoverwegingen

Bij het bouwen van een kleurschaal moet je WCAG-contrastverhoudingen controleren op elk niveau dat je voor tekst wilt gebruiken. Schaalstap 700 op een witte achtergrond bereikt doorgaans 4.5:1 (AA-conformiteit). Stap 900 bereikt 7:1+ (AAA).

Tailwind en Material Design paletten

Tailwind CSS gebruikt een 50-900 schaal voor al zijn ingebouwde kleuren. Material Design 3 gebruikt een andere benadering en genereert een compleet kleurschema vanuit één enkele "zaadkleur" met de HCT-kleurruimte.

CSS custom properties

Exporteer je kleurschaal als CSS custom properties. Definieer ze op :root-niveau. Noem ze semantisch: --color-blue-500, --color-blue-600.

Gratis Tool Kleurcontrast Checker Controleer WCAG-contrastverhoudingen tussen twee kleuren

Veelgestelde Vragen

Wat is het verschil tussen een tint en een shade? +
Een tint is een kleur gemengd met wit (lichter). Een shade is een kleur gemengd met zwart (donkerder). In digitale kleurschalen worden beide gegenereerd door de helderheidswaarde in HSL aan te passen.
Waarom HSL gebruiken in plaats van RGB voor tint/shade-generatie? +
RGB heeft geen speciale helderheidas. De Helderheidsparameter van HSL regelt direct de helderheid zonder de tint te beïnvloeden.
Hoeveel stappen moet een design systeem kleurschaal hebben? +
De industriestandaard is 9-11 stappen (50, 100-900). Dit biedt voldoende granulariteit voor tekst, achtergronden, randen en interactieve staten.
Wat is de basiskleur in een kleurschaal? +
De basiskleur wordt doorgaans op stap 500 geplaatst. Het is de kleur zoals oorspronkelijk gedefinieerd — niet lichter of donkerder gemaakt.
Hoe zorg ik voor toegankelijkheid in mijn kleurschaal? +
Controleer WCAG-contrastverhoudingen tussen je schaalstappen en de achtergronden waarop ze worden gebruikt. Tekstkleuren (doorgaans stap 700+) moeten minimaal 4.5:1 bereiken.
Kan ik OKLCH gebruiken in plaats van HSL voor kleurschalen? +
Ja, en OKLCH produceert perceptueel uniformere stappen. OKLCH wordt nu ondersteund in CSS.
Hoe genereert Tailwind CSS zijn kleurenpalet? +
De ingebouwde kleuren van Tailwind zijn handgemaakt door het Tailwind-team. Voor aangepaste Tailwind-kleuren kun je een tint/shade-generator gebruiken.