Tinten en Schakeringen
De tints & shades generator maakt lichtere tints (gemengd met wit) en donkerdere shades (gemengd met zwart) van elke basiskleur in 5, 10 of 20 stappen, met output als CSS-variabelen.
Over deze tool
De tints & shades generator maakt lichtere tints (gemengd met wit) en donkerdere shades (gemengd met zwart) van elke basiskleur in 5, 10 of 20 stappen, met output als CSS-variabelen.
Zo gebruik je het
- Kies een basiskleur.
- Kies 5, 10 of 20 stappen.
- Klik op een kleurstaal om de hexwaarde te kopiëren.
- Klik op Copy as CSS Variables om de hele schaal te exporteren.
Goed om te weten
- Een tint is een kleur gemengd met wit; een shade is een kleur gemengd met zwart.
- De generator mengt in gelijke RGB-stappen, dus elke stap verandert de kleur evenveel.
- Design systems zoals Tailwind gebruiken een schaal van 50–900, opgebouwd uit tints en shades van elke merkkleur.
- Controleer het contrast van tekstkleuren uit een schaal, want middelste stappen zakken op wit vaak voor WCAG AA.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Wat is het verschil tussen een tint en een shade?
Een tint maakt een kleur lichter door wit toe te voegen; een shade maakt hem donkerder door zwart toe te voegen. Een tone voegt grijs toe.
Hoeveel stappen moet een kleur in een design system hebben?
Ongeveer 10 stappen is gebruikelijk, bijvoorbeeld 50, 100 … 900 in Tailwind. Dat geeft genoeg bereik voor achtergronden, randen, tekst en hover-states.
Hoe gebruik ik de schaal in CSS?
Kopieer de schaal als custom properties en gebruik ze met var(--color-name), bijvoorbeeld voor achtergronden, randen of hover-states.
Waarom zien sommige tints er flets uit?
Mengen met wit verlaagt de verzadiging en verhoogt tegelijk de lichtheid. Voor levendigere lichte varianten pas je de verzadiging apart aan in HSL.