Tinten en Schaduwen Genereren — Kleurvarianten Aanmaken

Een complete kleurschaal — van lichtste tint tot donkerste schaduw — is de basis van elk designsysteem. Onze generator maakt 9–11 kleurvarianten van elke invoerkleur, vergelijkbaar met Tailwind CSS-kleurenschalen.

Tint vs. schaduw

Een tint is een kleur gemengd met wit (hogere helderheid). Een schaduw is een kleur gemengd met zwart (lagere helderheid). In designsystemen worden kleuren genummerd: 50 (lichtst) t/m 900 (donkerst), met 500 als de basistint.

HSL voor kleurvarianten

De eenvoudigste methode: pas alleen de L-waarde aan in HSL terwijl H en S constant blijven. Beter resultaat: gebruik OKLCH-kleurruimte voor perceptueel uniforme helderheidsverandering. OKLCH-varianten zien er visueel gelijkmatig uit, HSL-varianten niet altijd.

Gebruik in designsystemen

Een kleurenschaal geeft ontwikkelaars en ontwerpers een gedeelde woordenschat: "gebruik primary-700 voor knoppen, primary-100 voor achtergronden". Consistentie vermindert beslissingsfatigue en versnel het ontwerpproces.