Kleurtintgenerator
Genereer lichtere tinten door een kleur in gelijke stappen met wit te mengen. Voer één kleur in een willekeurig CSS-formaat in, kies 2 tot 20 stappen en een mengruimte, en krijg een tabel met HEX-, RGB-, HSL- en OKLCH-waarden voor elke tint, beginnend met de oorspronkelijke kleur. Mengen in sRGB komt overeen met klassieke tinttools en Sass, terwijl OKLab perceptueel gelijkmatige stappen oplevert. Ideaal voor achtergronden, hoverstatussen en kleurschalen.
Veelgestelde vragen
Wat is een tint?
Een tint is een kleur die met wit is gemengd. De tint blijft behouden en de kleur wordt lichter en bleker. Een kleurnuance die met zwart is gemengd, of een toon die met grijs is gemengd, werkt anders.
Hoe worden de stappen verdeeld?
Bij N stappen wordt de kleur in rij k gemengd met (k - 1) / N wit. Bij 10 stappen is dat dus 0%, 10%, 20% enzovoort, tot 90%. De eerste rij bevat altijd de oorspronkelijke kleur en zuiver wit staat nooit in de lijst.
Wat is het verschil tussen mengen in sRGB en in OKLab?
Bij mengen in sRGB worden de gamma-gecodeerde kanaalwaarden gemiddeld. Dat is wat Sass en mix() doen wanneer ze met wit mengen, net als de meeste klassieke tintgeneratoren. Bij mengen in OKLab wordt een perceptuele kleurruimte gebruikt, waardoor de lichtheidsstappen gelijkmatiger lijken en de lichte kant minder snel vervaagt.
Welke invoerformaten kan ik gebruiken?
Hex-codes met of zonder #, CSS-kleurnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() en cmyk(). Voer per bewerking één kleur in.
Hoeveel tinten kan ik genereren?
Van 2 tot 20 per bewerking, standaard 10. De telling omvat de oorspronkelijke kleur in de eerste rij.
Welke waarden toont de tabel?
Voor elke stap: het aandeel wit, de hex-code, rgb(), hsl() en oklch() in moderne CSS-syntaxis. RGB-kanalen zijn gehele getallen, HSL-percentages hebben maximaal twee decimalen en lichtheid en chroma in OKLCH maximaal vier.
Wat gebeurt er met transparante kleuren?
De alfawaarde van de invoer blijft voor elke tint behouden, omdat wit met dezelfde alfawaarde wordt gemengd. De hex-codes hebben dan 8 cijfers en de CSS-functies eindigen met de alfawaarde na een schuine streep.
Wat gebeurt er met kleuren buiten sRGB?
Bij het mengen wordt de volledige kleur gebruikt, maar HEX, RGB en HSL kunnen alleen sRGB weergeven. Kleuren buiten het kleurbereik worden daarom in die kolommen met het CSS Color 4-algoritme omgezet naar sRGB. De OKLCH-kolom behoudt de niet-omgezette waarde.
Hoe gebruik ik de tinten in CSS?
Kopieer de hex- of oklch()-waarden naar aangepaste eigenschappen, zoals --brand-100 en --brand-200. Om in plaats daarvan in de browser te mengen, levert color-mix(in oklab, var(--brand) 80%, white) dezelfde tint van 20% op als de OKLab-instelling.
Kan ik witte tekst op een lichte tint zetten?
Meestal niet, want lichte tinten hebben weinig contrast met wit. Gebruik donkere tekst op lichte tinten en controleer elk kleurenpaar met een contrastcontrole; gewone tekst heeft voor WCAG AA minstens 4.5:1 nodig.