Tailwind-tinten generator
Genereer een Tailwind-achtige kleurschaal van 11 tinten (50-950) vanuit een HEX-basiskleur, met kopieerbare CSS-variabelen en JSON.
🔒 Draait volledig in uw browser — niets wordt geüploadMaak een praktische kleurschaal
Eén merkkleur is zelden genoeg voor een complete interface. Knoppen hebben hoverstatussen nodig, kaarten lichte achtergronden, randen een rustiger tint en tekst soms een donkerdere metgezel. Deze Tailwind-tinten generator verandert één HEX-waarde in een vertrouwde 50-950-reeks, zodat je snel kunt zien hoe die kleur zich gedraagt op lichte en donkere vlakken. De gegenereerde waarden zijn deterministisch en makkelijk te kopiëren, waardoor ze handig zijn voor prototypes, designreviews, CSS custom properties en documentatie van design tokens.
De tool gebruikt HSL-helderheidsstappen om de tint herkenbaar te houden, terwijl de kleur richting zeer lichte tinten en diepe schaduwen wordt geduwd. Het is geen officieel Tailwind-algoritme en het probeert de met de hand afgestelde paletten van Tailwind niet exact na te bootsen. In plaats daarvan krijg je een nette startpunt dat je in context kunt bijstellen. Is je basiskleur al erg licht of erg donker, bekijk dan de middelste waarden goed en bepaal of de schaal handmatig verfijnd moet worden.
Gegenereerde tinten gebruiken in CSS
Kopieer de CSS-uitvoer als je browserklare variabelen wilt zoals --brand-500 en --brand-700. Kopieer de JSON-uitvoer als je tokens voorbereidt voor een configuratiebestand, een style dictionary of een documentatiepagina. In een typische interface werken 50 en 100 goed voor zachte vlakken, 200 en 300 voor randen of badges, 500 voor de hoofdactiekleur en 600 tot en met 800 voor hover-, ingedrukte of tekststatussen. De waarden 900 en 950 zijn het sterkst, dus bewaar ze voor donkere thema's of elementen met veel nadruk.
Controleer het contrast voordat je publiceert
Kleurschalen zijn handig, maar ze garanderen niet automatisch toegankelijke tekst. Een kleur die als staal evenwichtig oogt, kan bij contrast tekortschieten achter kleine labels of uitgeschakelde bedieningselementen. Test na het kopiëren van een schaal de combinaties die je interface echt gebruikt: primaire tekst op lichte achtergronden, witte tekst op actieknoppen, focusringen rond invoervelden en randen tegenover aangrenzende vlakken. Zie deze generator als een eerste stap in de workflow van een kleursysteem en controleer de uiteindelijke combinaties met een contrastchecker voordat je publiceert.
Hoe te gebruiken
- Kies een basisKies de merk- of accentkleur die de schaal moet verankeren.
- Bekijk de schaalControleer elk staal van 50 tot 950 en kijk of het lichte en donkere uiteinde bruikbaar aanvoelt.
- Kopieer de tokensKopieer de schaal als CSS custom properties of als JSON voor je project.