Genereer een volledig spectrum van tinten en schaduwen vanuit één kleur — kies je verduister-/verlicht-stap en het aantal schaduwen, kopieer dan elke waarde direct.

Basiskleur
Stap
%
Hoeveel lichter/donkerder elke schaduw wordt, per stap (1–25%).
Schaduwgetal
Hoeveel tinten en schaduwen aan elke kant van de basiskleur worden gegenereerd.
Verloop
Gegenereerde schaduwen

Kies een basiskleur, een stap-percentage en een getal — elke tint en schaduw wordt direct in je browser berekend.


Over Kleurschaduw-generator

De Kleurtinten Generator breidt één kleur uit tot een compleet bereik van tinten en schakeringen. Geef een basiskleur op en de tool produceert steeds lichtere tinten aan de ene kant en steeds donkerdere schakeringen aan de andere kant: de klassieke 50-tot-900-reeks die in moderne designsystemen wordt gebruikt.

Twee instellingen bepalen de uitvoer: het stappercentage stelt in hoeveel lichter of donkerder elke tint wordt (1-25% per stap), en het aantal bepaalt hoeveel tinten en schakeringen aan elke kant van de basis verschijnen, tot tien. Een gradiëntstrook toont in één oogopslag een preview van de hele reeks.

Genereren gebeurt direct in je browser terwijl je typt: er wordt niets naar een server gestuurd. Kopieer een enkele waarde, de volledige lijst, of de hele reeks als CSS-variabelen, klaar om in een design-tokenbestand of een Tailwind-achtige kleurschaal te plaatsen.

Hoe gebruik je Kleurschaduw-generator

  1. Kies een basiskleur met de kiezer of typ een waarde; klik op "Willekeurige kleur" voor inspiratie.
  2. Stel het stappercentage in om te bepalen hoe sterk elke tint lichter of donkerder wordt.
  3. Kies het aantal tinten om te bepalen hoeveel tinten en schakeringen aan elke kant verschijnen.
  4. Klik op een staaltje om het te kopiëren, of gebruik "Alles kopiëren" en "CSS-variabelen kopiëren" voor de hele reeks.

Veelgestelde vragen

Ja, volledig. Alle tinten en schakeringen worden live in je browser berekend, dus er zijn geen kosten, geen account en geen limiet op het aantal reeksen dat je genereert.

Een tint is je basiskleur gemengd richting wit (lichter), terwijl een schakering de basis gemengd richting zwart (donkerder) is. De generator produceert beide richtingen tegelijk, gelabeld als "Tinten (lichter)" en "Schakeringen (donkerder)" rond je basiskleur.

Zet het aantal op 4 of 5 per kant zodat je negen tot elf stalen in totaal krijgt, met je basis in het midden. Een stap van ongeveer 8-10% geeft meestal een spreiding vergelijkbaar met de 50-900-schalen die populaire frameworks gebruiken.

Kleine stappen (3-6%) geven subtiele hover- en randvariaties; middelgrote stappen (8-12%) passen bij volledige designsysteemreeksen; grote stappen (15-25%) creëren contrastrijke, posterachtige sets. Let op de gradiëntpreview: een goede reeks moet gelijkmatig donkerder worden zonder banden.

Ja. "CSS-variabelen kopiëren" geeft de hele reeks als benoemde CSS custom properties, en "Alles kopiëren" geeft je een platte lijst met waarden die je overal kunt plakken, van SCSS-maps tot JavaScript-themaobjecten.


Populaire zoekopdrachten
kleurtinten generator tinten en schakeringen kleur lichter en donkerder tinten van een kleur kleurtint generator kleurtinten maken
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.
Een probleem melden

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.