CodeKitHubWat is deze tool?
Een tintenreeks is een reeks variaties van één kleur op verschillende helderheidsniveaus, gebruikt in UI-ontwerp voor zaken als hover-states, uitgeschakelde states, randen en achtergronden die moeten aansluiten bij een merkkleur zonder er identiek aan te zijn.
Deze tool converteert je basiskleur naar HSL, houdt tint en verzadiging vast en verandert de helderheid van ongeveer 95% (bijna-witte tint) tot ongeveer 10% (bijna-zwarte schakering), waarbij je oorspronkelijke kleur op zijn natuurlijke positie in het midden van de reeks wordt geplaatst.
Waarom gebruiken?
- Genereert een designsysteem-stijl reeks (zoals Tailwind's 50/100/200.../900-schaal) vanuit elke enkele kleur, niet alleen uit een vast vooraf ingesteld palet.
- Kies 7, 9 of 11 stappen, afhankelijk van hoe fijnmazig je de reeks nodig hebt.
- Elke stap toont de exacte HEX-code en het helderheidspercentage — klik om te kopiëren.
- Houdt tint en verzadiging constant over de hele reeks, zodat alle schakeringen duidelijk verwant lijken aan de basiskleur in plaats van naar grijs af te drijven.
- Gratis, direct en volledig lokaal.
Hoe te gebruiken
- Kies je basiskleur met de kleurkiezer of door een HEX-code in te typen.
- Kies hoeveel stappen je in de reeks wilt (7, 9 of 11).
- Lees de HEX-code en het helderheidspercentage van elke schakering direct op het staal af.
- Klik op een staal om de HEX-code ervan te kopiëren.
Voorbeeld
Invoer
#3B82F6 (een middenblauw), 9 stappenUitvoer
9 schakeringen van een bijna-witte tint (~95% helderheid) tot een bijna-zwarte schakering (~10% helderheid), waarbij #3B82F6 zelf als middelste stap wordt geplaatstTint en verzadiging blijven vast over alle 9 stappen — alleen de helderheid verandert — zodat elke schakering duidelijk als onderdeel van dezelfde kleurfamilie leesbaar is.
Veelgestelde vragen
Is dit hetzelfde systeem dat Tailwind CSS gebruikt voor zijn kleurschalen?
Het is hetzelfde onderliggende idee (vaste tint/verzadiging, variërende helderheid), maar geen exacte replica van Tailwind's specifieke palet — Tailwind's 50-900-schalen zijn handmatig afgesteld door ontwerpers, niet gegenereerd door één formule. Deze tool geeft je een vergelijkbare structuur gegenereerd vanuit elke kleur die je kiest, wat handig is wanneer je basiskleur niet een van Tailwind's presets is.
Waarom lijkt mijn kleur op twee aangrenzende stappen bijna hetzelfde?
Dat kan gebeuren dicht bij de zeer lichte of zeer donkere uiteinden van de reeks, waar waargenomen helderheid langzamer verandert dan het numerieke percentage suggereert (een bekende eigenschap van menselijke kleurwaarneming, niet specifiek voor deze tool). Minder stappen kiezen (7 in plaats van 11) spreidt de helderheidswaarden verder uit elkaar en vermindert bijna-identieke stalen.
Kan ik deze schakeringen direct gebruiken als CSS custom properties?
Ja — kopieer elke HEX-code en plak deze in je CSS-variabelen (bijv. --color-brand-100 tot --color-brand-900), waarbij je de positie in de reeks laat overeenkomen met de naamgevingsschaal die je project gebruikt.
Moet ik dit of de Color Mixer gebruiken?
Als je lichtere en donkerdere versies van één kleur maakt — hover-states, subtiele achtergronden, randen die aansluiten bij een merkkleur — gebruik dan deze tintengenerator. Als je in plaats daarvan de kleur tussen twee verschillende kleuren nodig hebt (bijvoorbeeld een stap tussen je primaire blauw en een secundair oranje), gebruik dan de Color Mixer, die de RGB-kanalen van twee kleuren in elke verhouding interpoleert in plaats van de helderheid van één kleur te variëren.
Wat gebeurt er als mijn basiskleur al erg licht of erg donker is?
De basiskleur staat altijd in de middelste rij, met tinten die oplopen tot ongeveer 95% helderheid erboven en schakeringen die aflopen tot ongeveer 10% eronder. Als je basis al bijna wit is, wordt de tinthelft van de reeks samengeperst in een smal helderheidsbereik (bijna-identieke rijen), terwijl de schakeringshelft breed uitwaaiert — en omgekeerd voor een zeer donkere basis. Voor de meest gelijkmatig verdeelde reeks begin je met een versie van je kleur met gemiddelde helderheid (ongeveer 40-60% helderheid).
Kan het ook tonen genereren (de kleur gemengd met grijs)?
Nee — deze tool varieert alleen de helderheid terwijl de verzadiging vast blijft, wat tinten en schakeringen oplevert maar geen tonen. Als je een gedempter reeks wilt, verzadig dan eerst je basiskleur minder (kies een grijzere versie ervan in de kleurkiezer) en genereer de reeks daaruit; elke stap erft dan de lagere verzadiging.