Tinten & Schaduwen-generator
21 kleuren
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Technische details
Hoe de Tinten- en Schaduwengenerator werkt
Wat de tool doet
De Tinten- en Schaduwengenerator maakt lichtere tinten (gemengd met wit) en donkerdere schaduwen (gemengd met zwart) van elke basiskleur. Voer een kleur in en kies het aantal stappen om een vloeiende gradiënt van variaties te genereren. Elke stap toont HEX- en RGB-waarden en het mengpercentage, waardoor je eenvoudig consistente kleurschalen kunt opbouwen voor UI-ontwerp, branding en datavisualisatie.
Veelvoorkomende use-cases voor ontwikkelaars
Ontwikkelaars gebruiken tint- en schaduwengeneratoren bij het opbouwen van design token-schalen (bijv. blue-100 tot en met blue-900), het maken van hover- en active-states voor interactieve elementen, het ontwerpen van toegankelijke kleurhiërarchieën en het produceren van consistente achtergrond- en oppervlaktekleuren voor lichte en donkere thema’s. De tool is essentieel voor het bouwen van Tailwind CSS-aangepaste kleurenpaletten of Material Design-kleursystemen.
Hoe tinten en schaduwen werken
Een tint ontstaat door een kleur met wit te mengen, waardoor de lichtheid toeneemt. Een schaduw ontstaat door met zwart te mengen, waardoor de lichtheid afneemt. De formule voor tinten is: new = base + (255 - base) × factor. Voor schaduwen: new = base × (1 - factor). Stappen worden gelijkmatig verdeeld tussen de basiskleur en puur wit (tinten) of puur zwart (schaduwen), wat een lineaire gradiënt van kleurwaarden oplevert.
Veelvoorkomende valkuilen en edge-cases
Lineair mengen met wit of zwart kan voor sommige tinten fletse tinten of modderige schaduwen opleveren. Geel kan groenig lijken wanneer het wordt verdonkerd, en blauw kan levendigheid verliezen wanneer het wordt verlicht. Voor perceptueel uniforme schalen kun je overwegen OKLCH- of CIELAB-kleurruimten te gebruiken. Controleer altijd of je lichtste tinten en donkerste schaduwen voldoende contrast behouden ten opzichte van de beoogde achtergronden.
Wanneer je deze tool gebruikt vs code
Gebruik deze browsertool voor snelle verkenning en het genereren van kleurschalen tijdens ontwerpwerk. Voor productie-designsystemen genereer je tinten en schaduwen programmatisch met kleurlibraries zoals chroma.js of culori, die perceptueel uniforme kleurruimten ondersteunen en designtokens in elk formaat kunnen uitgeven.