palette Tint- en schaduwschaal-generator star

Hoe de schaal wordt opgebouwd

Kleurtheorie definieert drie manieren om een basiskleur systematisch te veranderen in het HSL-model: tint (mengen richting wit, Lightness verhogen — de kleur oogt bleker), shade (mengen richting zwart, Lightness verlagen — de kleur oogt donkerder en rijker), en tone (mengen richting grijs, Saturation verlagen terwijl Lightness ongeveer gelijk blijft — de kleur oogt gedempt of "stoffig"). Deze generator produceert de tint/shade-helft van dat drietal: vanaf uw basiskleur verschuift hij Lightness omhoog richting wit voor de lichtere stops en omlaag richting zwart voor de donkerdere stops, wat de tien-staps 50-900-schaal oplevert die designsystemen zoals Tailwind en Material gebruiken, met de oorspronkelijke merkkleur verankerd rond stap 500.

Een concreet voorbeeld: uitgaande van een blauw rond hsl(217, 91%, 60%) komt stap 50 uit bij ongeveer hsl(217, 91%, 97%) — bijna wit, met nog maar een zweem van de kleurtoon — terwijl stap 900 uitkomt bij ongeveer hsl(217, 60%, 20%) — zeer donker, met de verzadiging samengeperst naarmate de kleur het zwart nadert. Elke stop krijgt zowel een hexcode als een kant-en-klare CSS-variabele; klikken op een kleurvlak kopieert deze.

Het praktische voordeel van het genereren van een volledige schaal in plaats van op het oog een handvol tinten te schatten, is consistentie: elke stop wordt afgeleid van dezelfde basiskleur met dezelfde mengregel, zodat een kaartrand op stap 200 en een hover-status op stap 100 altijd aanvoelen alsof ze tot dezelfde kleurfamilie behoren — zelfs maanden later, wanneer een andere ontwerper of een ander component een nieuwe tint van dezelfde merkkleur nodig heeft.

Wat u moet weten

• Tint, shade en tone zijn niet dezelfde bewerking: deze tool voert alleen tint en shade uit — veranderingen in Lightness. Een echte tone verlaagt Saturation terwijl Lightness ongeveer vast blijft, wat een gedempte versie van de kleur oplevert in plaats van een lichtere of donkerdere — die aparte bewerking past deze generator niet toe.
• Waar elke stop wordt gebruikt: 50-100 voor pagina-achtergronden en hover-vullingen, 200-300 voor randen en scheidingslijnen, 500-600 voor knoppen en links (de merkkleur zelf), 700-900 voor lopende tekst op lichte achtergronden.
• Contrast gaat niet automatisch: het combineren van een stap ≥700 met een stap ≤100 haalt meestal WCAG AA-contrast, maar "meestal" is niet "altijd" — controleer het exacte paar dat u wilt gebruiken met een speciale contrastchecker.
• Niet identiek aan Tailwinds eigen paletten: Tailwinds ingebouwde kleuren zijn bewust per kleurtoon met de hand afgesteld, terwijl deze generator één consistente mengformule toepast op elke invoer — voorspelbaar voor eigen merkkleuren, dicht genoeg bij echte interfaces.
• Dark mode keert de schaal meestal om: een achtergrond die in light mode stap 50 gebruikt, komt in dark mode vaak overeen met iets in de buurt van stap 900, en omgekeerd — door de volledige schaal vooraf te genereren zijn beide thema's al gedekt.