Tint-, toon- & shade-generator
Genereer tien lichtere tints, tien donkerdere shades en tien grijs-geblende tonen vanuit elke basiskleur. Klik op een swatch om de hex te kopiëren.
Tints, tonen en shades — wat is het verschil?
Alle drie zijn afleidingen van een basistint, maar trekken die in verschillende richtingen. Een tint is de basiskleur gemengd met wit, wat een lichtere, zachtere versie produceert — denk pastel. Een shade is de basis gemengd met zwart, voor een donkerdere, dramatischere versie. Een toon is de basis gemengd met grijs, wat zowel verzadiging als intensiteit verlaagt zonder lichter of donkerder te kiezen — handig voor gedempte, verfijnde paletten. Samen vormen ze een complete woordenschat voor monochromatische schalen.
Hoe gebruik je deze generator
Pak een basiskleur of plak een hex-code. De pagina genereert tien gelijk verdeelde tints (rijen worden lichter), tien tonen (rijen worden meer gedempt) en tien shades (rijen worden donker). Het percentage op elke swatch is de meng-hoeveelheid met de doelkleur (wit, grijs of zwart). Klik op een swatch om de hex te kopiëren — handig voor het invullen van een design-token-tabel of een Tailwind-config.
Schalen bouwen die in productie werken
Verzend niet alle 30 swatches — designers hebben zelden die granulariteit nodig. Pak 5-7 goed-verdeelde stappen en label ze als een typografische schaal (50, 100, 200... 900) zodat engineers kunnen voorspellen waar elk nieuw kleurslot uitkomt. Pair tints en shades voor achtergronden en nadruk; grijp naar tonen wanneer je gedempte UI-accenten wilt die niet vechten met de merkkleur. Check altijd het contrast tegen het oppervlak waarop je ze gebruikt — lichtere tints falen vaak WCAG tegen witte oppervlakken en donkere shades tegen zwarte.
Hoe elke variant wordt berekend
Elke uitvoer is een lineaire interpolatie in sRGB-ruimte: tint(c, t) = mix(c, wit, t), shade(c, t) = mix(c, zwart, t), toon(c, t) = mix(c, grijs, t), waarbij mix(a, b, t) = a·(1−t) + b·t per kanaal. We kiezen elf gelijk verdeelde t-waarden van 1/11 tot 10/11, en laten de basiskleur zelf uit de strip — zijn positie zit impliciet tussen de sterkste tint en de sterkste shade.
Wanneer welke
Tints zijn de juiste keuze voor hover-achtergronden, zachte callouts en pastel-illustraties — ze warmen een lay-out en signaleren rust. Shades horen bij actieve states, diepe headers en accent-gebieden — ze projecteren zwaarte en gewicht. Tonen zijn het geheime wapen voor editorial design, museumsites en elk palet dat afgewogen moet voelen in plaats van levendig; ze overbruggen merk en neutraal zonder een van beide plat te slaan.