Tinten lichter en donkerder maken

Zo maak je een kleur lichter en donkerder

1. Kies een Basiskleur met het kleurstaal, of typ een waarde in Kleurcode: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) of een CSS-naam zoals teal.
2. Kies een Stap: 5%, 10%, 20% of 25%. Met 10% krijg je lichtere tinten op 10%, 20% … 100% en evenveel donkere tinten.
3. Kies waarin je wilt Mengen in: OKLCH (perceptueel) of sRGB (klassiek). De twee rijen worden meteen bijgewerkt: Lichtere tinten (gemengd met wit) en Donkere tinten (gemengd met zwart), elk beginnend bij de basiskleur.
4. Klik op Kopiëren onder een kleurstaal om de HEX-code te kopiëren.
5. Kies onder Exporteren als voor CSS-variabelen, Tailwind-config (v3), Tailwind @theme (v4), SCSS-variabelen of JSON, vul een Naam in zoals primary of brand, en gebruik dan Kopiëren of Downloaden.

Tints, shades en tones

In de kleurenleer is een tint een kleur gemengd met wit, een shade een kleur gemengd met zwart en een tone een kleur gemengd met grijs. In het Nederlands spreken we meestal gewoon van lichtere en donkere tinten. Het percentage geeft aan hoeveel wit of zwart er wordt toegevoegd: een lichtere tint van 30% bestaat uit 70% basiskleur en 30% wit. Bij 100% kom je uit op zuiver wit of zuiver zwart. Daarom is het laatste kleurstaal van elke rij altijd #FFFFFF of #000000; het markeert het einde van de schaal.

Lichtere en donkere tinten zijn de snelste manier om vanuit één merkkleur een consistente schaal te bouwen: lichte achtergronden en hovertoestanden uit de lichte kant, randen, ingedrukte toestanden en donkere tekst uit de donkere kant.

Mengen in OKLCH of sRGB?

sRGB (klassiek) mengt de waarden voor rood, groen en blauw rechtstreeks. Dat doen de meeste oudere generators, en het komt overeen met CSS color-mix(in srgb, …). De formule voor een lichtere tint is eenvoudig kanaal + (255 − kanaal) × p, en voor een donkere tint kanaal × (1 − p). Dat is voorspelbaar, maar de stappen zijn voor het oog niet gelijkmatig: blauw neigt naar paars als het lichter wordt, en donkere tinten zien er vaak modderig uit.

OKLCH (perceptueel) mengt in de OKLCH-kleurruimte die Björn Ottosson in 2020 ontwierp, net als CSS color-mix(in oklch, …). Lichtheid, chroma en tint worden apart geïnterpoleerd. Wit en zwart hebben geen tint, dus de tint van de basiskleur blijft over de hele schaal behouden, en elke stap verandert de lichtheid met een visueel vergelijkbare hoeveelheid. Kleuren die buiten het sRGB-gamut zouden vallen, worden teruggebracht door de chroma te verlagen in plaats van kanalen af te kappen, zodat de tint stabiel blijft. Voor designsystemen geeft dat meestal schonere en gelijkmatigere schalen.

De export gebruiken

• CSS-variabelen levert een :root-blok op met bijvoorbeeld --primary-tint-20 en --primary-shade-40, klaar om in een stylesheet te plakken.
• Tailwind-config (v3) geeft een colors-object voor theme.extend.colors; daarna schrijf je klassen als bg-primary-tint-20 of text-primary-shade-60. DEFAULT bevat de basiskleur, dus bg-primary werkt ook.
• Tailwind @theme (v4) geeft --color-…-variabelen voor de CSS-first-configuratie van Tailwind 4.
• SCSS-variabelen en JSON passen bij andere buildtools en design tokens.

De namen in de code blijven Engels (tint, shade). Namen worden in kleine letters gezet en spaties worden koppeltekens, dus “Brand Blue” wordt brand-blue.