Softonic

Kleurschaduwgenerator

Stap 1 / 2
Resultaten

Een schaduw (shade) is het resultaat van het mengen van een kleur met zwart; elke stap wordt donkerder. De generator neemt een HEX-basiskleur en produceert 3 tot 20 stappen (standaard 10) van steeds donkerdere schaduwen, plus de lichtere tinten van dezelfde basiskleur. Handig voor paletladders van ontwerpsystemen (500 → 900), ingedrukte/actieve statussen, tekstkleuren die leesbaar blijven en schaduwoverlays. Elke stap wordt als kleurstaal weergegeven met zijn hex-waarde, klaar om te kopiëren.

Hoe schaduwgeneratie werkt

  1. 1

    Kies een basiskleur

    Gebruik de kleurkiezer of geef in de stappenmodus een hex-waarde via de pagina-URL. De basis ligt tussen het tintbereik en het schaduwbereik.

  2. 2

    Kies het aantal stappen

    3 tot 20 stappen, standaard 10. Meer stappen geven een zachtere ladder; minder stappen sterkere sprongen.

  3. 3

    Meng met zwart in gelijkmatige stappen

    Elke stap vermenigvuldigt de rode, groene en blauwe kanalen met dezelfde factor, wat neerkomt op mengen met zwart (of wit voor tinten) in gelijkmatige stappen. Met 10 stappen is elke stap ongeveer 9 % donkerder of lichter. De kleurtint blijft identiek aan de basis.

  4. 4

    Lees de schaal af

    Elk staal toont zijn hex-waarde. Selecteer de tekst om hem te kopiëren naar CSS, een Tailwind-thema of een design-tokenbestand.

Schaduw, tint en toon

  • Schaduw (shade): kleur + zwart → donkerder.
  • Tint (tint): kleur + wit → lichter.
  • Toon (tone): kleur + grijs → minder verzadigd.

Deze generator maakt zowel schaduwen als tinten uit dezelfde basiskleur. Het paar tint + schaduw vormt gewoonlijk een palet van een ontwerpsysteem (bijvoorbeeld brand-100 tot en met brand-900, waarbij 500 de basis is).

Voorbeeldschaal: #3B82F6 (Tailwind blue-500)

Stap HEX Mengsel Rol in ontwerpsysteem
0 #3B82F6 Basis Primaire merkkleur (bijv. blue-500)
1 #316CCD 17% zwart Hover-status
2 #2756A4 33% zwart Ingedrukte/actieve status (blue-600)
3 #1D417B 50% zwart blue-700
4 #132B52 67% zwart blue-800
5 #091528 83% zwart blue-900

De tabel toont een schaal van 5 stappen: elke stap is een zesde van de weg naar zwart.

Zo worden de stappen berekend

De tool vermenigvuldigt de rode, groene en blauwe kanalen van de basiskleur in elke stap met dezelfde factor. Dat komt neer op mengen met zwart voor het schaduwbereik en met wit voor het tintbereik, in gelijkmatige stappen. Met 10 stappen is elke stap ongeveer 9 % donkerder of lichter dan de vorige.

Omdat alle kanalen evenveel worden vermenigvuldigd, blijft de kleurtint van de basis exact behouden: een blauwe basis blijft blauw, een groene basis blijft groen. Mengen met zwart verlaagt ook de verzadiging samen met de helderheid, waardoor donkere stappen er natuurlijk uitzien in plaats van te gloeien. Alleen de helderheid verlagen zonder de verzadiging aan te raken, laat donkere kleuren oververzadigd achter.

Schaduwen gebruiken in de UI

  • Knop: basis voor de ruststatus, 1-2 stappen donkerder voor hover, 2-3 stappen donkerder voor actief/ingedrukt.
  • Bodytekst: 2-3 stappen donkerder dan de basis zorgt voor leesbaarheid op wit; lichter voor secundaire tekst.
  • Rand/scheidingslijn: 1-2 stappen donkerder dan de achtergrond, genoeg om af te bakenen zonder te overheersen.
  • Schaduwen: de donkerste stap (of donkerder) met een verlaagde alfa, in plaats van een nieuw grijs.
  • Datavisualisatie: gebruik schaduwen van één kleurtint voor een sequentiële schaal (waardegroottes), of combineer schaduwen van twee kleurtinten voor divergerende schalen (positief versus negatief).

Veelvoorkomende valkuilen

  • Te veel stappen vallen samen tot niet te onderscheiden banden. Schalen met 10 stappen werken goed omdat elke stap ongeveer 9 % donkerder is; bij 20 stappen worden de verschillen subtiel. Voor sterke contrasten kies je beter 3-5 stappen.
  • Kleurtintverschuiving is hier onmogelijk: elke stap vermenigvuldigt alle kanalen evenveel, dus een rood blijft rood en een groen blijft groen. Kleurtintverschuiving ontstaat bij het interpoleren tussen twee verschillende kleuren, en dat doet deze tool niet.
  • Toegankelijkheid negeren: schaduwen die er harmonieus uitzien, kunnen het WCAG-contrast met de achtergrond niet halen. Controleer altijd het contrast bij elke stap.
  • Schalen met alleen schaduwen voelen beklemmend op donkere achtergronden. Combineer ze met een tintschaal voor een bruikbare donkere modus.

Veelgestelde vragen

Voor een ontwerpsysteem is 5 schaduwstappen + 5 tintstappen (10 in totaal rond de basis) de gebruikelijke conventie. Voor snelle UI-statuskleuren (hover, actief) volstaan 3 stappen.

Het gelijkmatige mengen dat hier wordt gebruikt houdt elke stap op een rechte lijn tussen de basis en zwart, dus de stappen in het midden blijven helder. Een modderig midden komt meestal van een tool die tussen twee verschillende kleuren interpoleert, of die de helderheid verlaagt zonder de verzadiging te verlagen.

Donkere kleuren hebben al weinig ruimte om donkerder te worden voordat ze zwart worden; een donkerpaarse basis levert slechts 2-3 onderscheidende stappen op voordat de schaal instort. Kies een basis met gemiddelde helderheid voor rijkere schalen.

Vergelijkbaar qua opzet, maar mengen met zwart verlaagt de verzadiging samen met de helderheid, wat er meestal natuurlijker uitziet. Alleen de helderheid verlagen houdt de verzadiging hoog en kan oververzadigde donkere kleuren opleveren.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Binair naar hex-converter

Converteer binaire invoer naar een gewone hexwaarde in hoofdletters. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.