Kleurtinten-generator

Wat is Kleurtinten-generator?

De Kleurtinten-generator is een gratis online tool die één HEX-basiskleur omzet in een complete tint-en-schaduwschaal, genummerd van 50, 100, 200 tot en met 900 en 950, net als de kleurtokens van Tailwind CSS. De schaal wordt opgebouwd door je basiskleur lineair naar wit te mengen voor de lichtere stappen (50-400) en naar zwart voor de donkerdere stappen (600-950), waarbij 500 de basiskleur zelf blijft. Ontwerpers en front-enddevelopers gebruiken het om een consistente kleurschaal voor een designsysteem te genereren, CSS-custom-properties of Tailwind-themakleuren in te stellen, en toegankelijke lichte/donkere varianten van een merkkleur te kiezen. Elke stap wordt getoond als een staal naast zijn HEX-waarde met een kopieerknop in één klik.

Kleurtinten-generator gebruiken

1. Typ een basiskleur in het veld Basiskleur (HEX) in het formaat #rrggbb of #rgb, of klik op het grote kleurkiezer-staal om er visueel een te kiezen.
2. De schaal 50-950 wordt direct bijgewerkt: lichte tinten (50-400) worden naar wit gemengd, 500 is je basiskleur, en donkere tinten (600-950) worden naar zwart gemengd.
3. Lees elke rij om het stapnummer (50 … 950), het kleurstaal en de HEX-waarde naast elkaar te zien.
4. Klik op de kopieerknop aan het einde van een willekeurige rij om de HEX-waarde van die stap naar je klembord te kopiëren.
5. Kopieer de HEX van de basiskleur met de kopieerknop naast het invoerveld wanneer je alleen stap 500 nodig hebt.

Voorbeelden

#4f86f7

#f6f9ff

#4f86f7

#0b1323

Veelgestelde vragen

Welke kleurformaten kan ik invoeren?

De basiskleur wordt ingevoerd als een HEX-waarde in het formaat #rrggbb (zes cijfers) of in de verkorte vorm #rgb (drie cijfers). Als de waarde geen geldige HEX-kleur is, verschijnt de melding 'Invalid HEX color' en wordt er geen schaal gegenereerd. Elke stap in de uitvoer wordt getoond als een #rrggbb-HEX-waarde.

Hoe worden de tinten berekend?

Elke stap is een lineaire menging tussen je basiskleur en zuiver wit of zuiver zwart. De stappen 50-400 worden in afnemende mate naar wit gemengd, stap 500 is de onveranderde basiskleur, en de stappen 600-950 worden in toenemende mate naar zwart gemengd. De nummering komt overeen met de kleurschalen van Tailwind CSS.

Waarom is stap 500 soms niet precies het nummer van mijn basiskleur?

Stap 500 is altijd precies je basiskleur. De tool hercentreert je kleur niet op een perceptuele helderheidscurve, dus als je invoer erg licht of erg donker is, heeft de lichtere of donkerdere helft van de schaal minder bereik — kies een basis met een middentoon voor de gelijkmatigste schaal.

Kan ik een kleur visueel kiezen in plaats van HEX te typen?

Ja. Klik op het grote staal met de ingebouwde kleurkiezer om een kleur te kiezen; het HEX-veld wordt automatisch bijgewerkt en de hele schaal 50-950 wordt direct herberekend terwijl je hem wijzigt.

Worden mijn kleurgegevens ergens geüpload?

Nee. Alles draait volledig in je browser met lokale kleurberekeningen — er wordt nooit een kleurwaarde naar een server gestuurd, dus het werkt offline en houdt je palet privé.