Kleurtinten-generator

Wat is Kleurtinten-generator?

De Kleurtinten-generator zet één HEX-basiskleur om in een complete tint-en-schaduwschaal voor een designsysteem. In plaats van alleen lineair in RGB te mengen, kan hij in OKLCH of HSL interpoleren zodat de tint stabiel blijft en de helderheid gelijkmatig verdeeld is, wat een perceptueel gebalanceerde reeks geeft zonder vuile of verwassen stappen. Je kiest hoeveel stappen hij maakt — van 2 tot 24, of een eigen door komma's gescheiden lijst met labels —, verschuift de tint of schaalt de verzadiging, en leest per stap een WCAG-contrasttip die laat zien welke tinten werken als tekst op wit en op zwart. De voltooide schaal kopieer je met één klik als CSS-custom-properties, een Tailwind-kleurconfiguratieobject of JSON.

Kleurtinten-generator gebruiken

1. Typ een basiskleur in het veld Basiskleur (HEX) in het formaat #rrggbb of #rgb, of klik op het grote staal om er visueel een te kiezen.
2. Kies een kleurruimte: OKLCH of HSL voor een perceptueel gelijkmatige reeks met stabiele tint, of RGB voor de klassieke lineaire menging.
3. Stel in hoeveel stappen je wilt (2–24), of open Instellingen om een eigen door komma's gescheiden stappenlijst in te voeren, de tint te verschuiven, de verzadiging te schalen en de exportkleurnaam in te stellen.
4. Lees de twee contrastcellen van elke rij — de letter A op wit en op zwart —, gemarkeerd wanneer die tint de WCAG AA voor tekst haalt.
5. Kopieer de HEX van één stap, of kopieer de hele schaal als CSS-variabelen, een Tailwind-config of JSON met de kopieerknoppen.

Voorbeelden

Veelgestelde vragen

Wat is het verschil tussen de opties RGB, HSL en OKLCH?

RGB mengt je kleur lineair naar wit en zwart, wat snel is maar in de middentonen ongelijkmatig kan ogen. HSL en OKLCH houden de tint juist stabiel en verdelen de helderheid gelijkmatig; OKLCH is perceptueel uniform, dus elke stap lijkt een even grote sprong in helderheid. Kies OKLCH voor de meest gebalanceerde reeks.

Hoeveel tinten kan ik genereren en kan ik ze benoemen?

Stel een willekeurig aantal stappen in van 2 tot 24. Een aantal van 11 gebruikt de bekende Tailwind-nummering (50, 100…900, 950); andere aantallen worden gelijkmatig verdeeld van 50 tot 950. In Instellingen kun je ook een eigen door komma's gescheiden lijst met labels typen, die het aantal stappen overschrijft en elke stap precies zo benoemt als je hem schrijft.

Hoe wordt de WCAG-contrasttip berekend?

Voor elke tint berekent de tool de WCAG-contrastverhouding tegen zuiver wit en zuiver zwart op basis van de relatieve luminantie. De twee kleine cellen in elke rij tonen de letter A op wit en op zwart en worden gemarkeerd wanneer de verhouding 4,5:1 bereikt (AA voor normale tekst); beweeg de muis erover voor de exacte verhouding en of het AA of AAA is.

Worden mijn kleurgegevens ergens geüpload?

Nee. De kleurberekeningen, de contrastcontroles en alle drie de exports draaien volledig in je browser, dus er wordt nooit een kleurwaarde naar een server gestuurd. Het werkt offline en houdt je palet privé.