Wat is het verschil tussen een tint en een schaduw?

Een tint is een kleur gemengd met wit, waardoor deze lichter wordt. Een schaduw is een kleur gemengd met zwart, waardoor deze donkerder wordt. Beide behouden de oorspronkelijke kleurtoon, maar tinten lijken pastelachtig terwijl schaduwen dieper en meer verzadigd lijken.

Hoe worden tinten en schaduwen berekend?

De tool gebruikt lineaire RGB-interpolatie. Voor een tint bij p%: elk kanaal = basis + (255 − basis) × p. Voor een schaduw bij p%: elk kanaal = basis × (1 − p). Dit geeft een wiskundig gelijkmatige progressie.

Waarom ziet een 90%-tint er bijna wit uit?

Omdat een 90%-tint betekent dat je 90% wit mengt met 10% basiskleur. De resulterende kleur wordt gedomineerd door wit. Voor subtiel lichter maken, gebruik 10–30% tinten.

Zijn deze tinten en schaduwen geschikt voor WCAG-toegankelijkheid?

Tinten en schaduwen alleen garanderen geen toegankelijkheid. Je moet het contrastverhouding verifiëren (minimaal 4,5:1 voor normale tekst onder WCAG AA). Gebruik de Contrast-tool om te verifiëren.

Hoe kan ik de geëxporteerde CSS-variabelen gebruiken?

Klik op "Exporteer CSS" om alle 19 kleuren als CSS custom properties te kopiëren (--color-tint-90 tot --color-shade-90 en --color-base). Plak ze in je :root-blok en verwijs ernaar met var(--color-tint-30) enz.

Dekt de tool alle mogelijke kleuren?

Ja — de tool werkt met elke geldige 6-cijferige HEX-code (#000000 tot #FFFFFF), wat alle 16+ miljoen kleuren in het 8-bit RGB-model omvat. Alle berekeningen gebeuren direct in de browser.

Tint & Shade Generator

Genereer een volledige schaal van tinten en schaduwen vanuit elke basiskleur. 9 tinten, 9 schaduwen — kopieer individuele HEX-codes of exporteer alles als CSS-variabelen.

9 tinten · 9 schaduwenCSS-variabelen exporterenKopiëren in 1 klik

① Voer een HEX-code in of kies een kleur ② Genereer 9 tinten en 9 schaduwen ③ Klik op een staal om te kopiëren

Basiskleur

Merkvoorinstellingen:

Hoe het werkt

Voer een HEX-kleur in en de tool genereert 9 tinten (lichter) en 9 schaduwen (donkerder) door de basiskleur wiskundig met wit en zwart te mengen. Klik op een staal om de HEX-code te kopiëren.

Tinten (Tints)

Een tint wordt gemaakt door de basiskleur met wit te mengen. Het percentage geeft aan hoeveel wit wordt toegevoegd — 90% is bijna wit, 10% is slechts iets lichter dan het origineel.

Schaduwen (Shades)

Een schaduw wordt gemaakt door de basiskleur met zwart te mengen. Het percentage geeft aan hoeveel zwart wordt toegevoegd — 90% is bijna zwart, 10% is slechts iets donkerder dan het origineel.

Tinten en schaduwen — hoe kleurschalen werken

Tinten: kanaal = basis + (255 − basis) × p. Schaduwen: kanaal = basis × (1 − p). Lineaire RGB-interpolatie die een ramp van 9 tinten / 9 schaduwen genereert — 19 stappen — compatibel met de Tailwind CSS 100–900-schaal en Material Design tokens. Exporteer de 19 waarden als CSS custom properties in een :root {}-blok. Ideaal voor design system tokens. Controleer altijd het contrast — WCAG AA vereist 4,5:1.

Veelgestelde vragen

Een tint is een kleur gemengd met wit (lichter). Een schaduw is een kleur gemengd met zwart (donkerder). Beide behouden de oorspronkelijke tint: tinten lijken pastel, schaduwen dieper.

De tool gebruikt lineaire RGB-interpolatie. Tint bij p%: kanaal = basis + (255 − basis) × p. Schaduw bij p%: kanaal = basis × (1 − p). Dit geeft een wiskundig uniforme progressie.

90% tint betekent 90% wit mengen met 10% basiskleur. Het resultaat wordt gedomineerd door wit. Voor subtiel lichter maken, gebruik tinten van 10–30%.

Systemen zoals Tailwind CSS en Material Design gebruiken een 9-staps schaal waarbij 100 de lichtste tint is en 900 de donkerste schaduw, met 500 (of 600) typisch de basiskleur.

Tinten en schaduwen garanderen op zichzelf geen toegankelijkheid. Je moet de contrastverhouding controleren (minimaal 4,5:1 voor normale tekst onder WCAG AA). Gebruik de Contrast-tool om te controleren.

Klik op "CSS Exporteren" om de 19 kleuren als CSS custom properties te kopiëren. Plak ze in het :root-blok en gebruik ze met var(--color-tint-30).

Ja — werkt met elke geldige 6-cijferige HEX-code (#000000 tot #FFFFFF), wat de meer dan 16 miljoen kleuren van het 8-bit RGB-model dekt. Alles wordt in de browser berekend zonder gegevens te verzenden.

Tinten en schaduwen — hoe kleurschalen werken

Veelgestelde vragen

Ontdek ons netwerk