# Kleurtoongenerator

Genereer tinten van een kleur door deze in gelijke stappen met neutraal grijs te mengen. Zo wordt de verzadiging lager terwijl de kleurtint behouden blijft. Voer één kleur in een willekeurig CSS-formaat in, kies 2 tot 20 stappen en een kleurruimte, en bekijk een tabel met HEX-, RGB-, HSL- en OKLCH-waarden voor elke tint, vanaf de oorspronkelijke kleur. Handig voor gedempte paletten, uitgeschakelde statussen, subtiele oppervlakken en rustigere merkvarianten.

## Veelgestelde vragen

### Wat is een toon?

Een toon is een kleur die met grijs is gemengd. De kleurtint blijft behouden en de kleur wordt gedempter, in tegenstelling tot een tint die met wit wordt gemengd of een schaduw die met zwart wordt gemengd.

### Welk grijs wordt gebruikt?

Het middelste grijs van sRGB #808080, rgb(128 128 128). Lichte kleuren worden daardoor iets donkerder en donkere kleuren iets lichter naarmate ze dit grijs naderen. Gebruik Color Mixer met je eigen grijs om met een ander grijs te mengen.

### Hoe worden de stappen verdeeld?

Bij N stappen mengt rij k de kleur met (k - 1) / N grijs. Bij 10 stappen krijg je dus 0%, 10%, 20% enzovoort tot 90%. De eerste rij is altijd je oorspronkelijke kleur; gewoon grijs staat nooit in de lijst.

### Waarin verschilt een toon van het verlagen van de verzadiging van HSL?

Als je de verzadiging van HSL verlaagt, blijft de lichtheid van HSL gelijk. Mengen met grijs trekt de lichtheid ook naar het midden. Tinten zien er daardoor uit alsof je de kleur door een grijsfilter bekijkt. Dat is geschikt voor gedempte achtergronden en uitgeschakelde statussen.

### Wat is het verschil tussen mengen in sRGB en in OKLab?

Bij mengen in sRGB worden de gamma-gecodeerde kanaalwaarden gemiddeld, de klassieke aanpak van verfachtige toondiagrammen en Sass mix(). Bij mengen in OKLab gebeurt dit in een perceptuele kleurruimte, waardoor de chroma gelijkmatiger afneemt bij elke stap.

### 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 grijs, de hex-code, rgb(), hsl() en oklch() in moderne CSS-syntaxis. RGB-kanalen zijn gehele getallen, HSL-percentages hebben maximaal twee decimalen en de lichtheid en chroma van OKLCH maximaal vier.

### Wat gebeurt er met transparante kleuren en kleuren met een breed kleurbereik?

De alfawaarde van de invoer blijft behouden voor elke tint, waardoor hex-codes 8 cijfers hebben. Stappen buiten het gamut worden met het CSS Color 4-algoritme naar sRGB omgezet in de kolommen HEX, RGB en HSL. De kolom OKLCH behoudt de niet-omgezette waarde.

### Hoe maak ik een toon opnieuw in CSS?

Kopieer de hex- of oklch()-waarde, of laat de browser de kleur mengen met color-mix(in oklab, var(--brand) 70%, #808080) voor de toon van 30% met de OKLab-instelling. color-mix() werkt in alle huidige grote browsers.

Hier adverteren?

[E-mail ons](mailto:hi@dennn.is?subject=Adverteren%20op%20OneClick%20Pro)

[Advertentie De plug-insuite voor agents van WordPress.](https://sleekwp.com/?ref=oneclickpro)