Kleurnuancegenerator
Genereer donkerdere kleurnuances door een kleur in gelijke stappen met zwart 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 nuance, beginnend met de oorspronkelijke kleur. Mengen in sRGB komt overeen met klassieke tools voor kleurnuances en Sass, terwijl OKLab perceptueel gelijkmatige stappen oplevert. Ideaal voor het maken van UI-kleurenschalen.
Veelgestelde vragen
Wat is een kleurnuance?
Een kleurnuance is een kleur die met zwart is gemengd. De tint blijft behouden en de kleur wordt donkerder. Een tint die met wit 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 zwart. Bij 10 stappen is dat dus 0%, 10%, 20% enzovoort, tot 90%. De eerste rij bevat altijd de oorspronkelijke kleur en zuiver zwart 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 zwart mengen, net als de meeste klassieke nuancegeneratoren. Bij mengen in OKLab wordt een perceptuele kleurruimte gebruikt, waardoor de stappen qua lichtheid gelijkmatiger lijken en de donkere nuances meer van hun kleur behouden.
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 kleurnuances 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 zwart, 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 nuance behouden, omdat zwart 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 kleurnuances in CSS?
Kopieer de hex- of oklch()-waarden naar aangepaste eigenschappen, zoals --brand-600 en --brand-700. Om in plaats daarvan in de browser te mengen, levert color-mix(in oklab, var(--brand) 80%, black) dezelfde nuance van 20% op als de OKLab-instelling.
Zijn donkerdere kleurnuances automatisch toegankelijk?
Nee. Controleer de tekst tegen elke nuance met een contrastcontrole, want een donker ogende nuance kan nog steeds onder 4.5:1 uitkomen tegenover een andere donkere kleur of gekleurde tekst.