Softonic

Kleurtintgenerator

Stap 1 / 2
Volgende

Een tint is het resultaat van het mengen van een kleur met wit; elke stap wordt lichter. De generator neemt uw basiskleur en produceert een ladder van steeds lichtere tinten, handig voor paletbereiken van het ontwerpsysteem (100 → 400), subtiele achtergrondvullingen, zweeftoestanden op donkere primaire kleuren en badge-/waarschuwingsachtergronden waarbij de accentkleur aanwezig maar rustig moet zijn.

Hoe tinten worden gegenereerd

  1. 1

    Kies een basiskleur

    Gebruik de kleurkiezer om een basiskleur te kiezen. Basisklaren van gemiddelde lichtheid werken het best; bijna-witte basisklaren hebben weinig ruimte om lichter te worden.

  2. 2

    Kies het aantal stappen

    Tussen 3 en 20 stappen, standaard 10. Met 10 krijg je een volledige ontwerpsysteemschaal; voor snel interfacewerk volstaan minder stappen.

  3. 3

    Meng met wit in toenemende percentages

    Bij 10 stappen mengt de eerste tint ongeveer 9% wit en de laatste ongeveer 91%. De interpolatie gebeurt direct in de RGB-ruimte, waardoor de verzadiging afneemt naarmate de lichtheid toeneemt.

  4. 4

    Lees de hexwaarden af

    Elk kleurvlak toont zijn hexwaarde. Gebruik ze in uw CSS-variabelen, Tailwind-schaal of Sass-kaart.

Voorbeeld van een tintschaal vanaf #3B82F6

De onderstaande tabel toont wat het hulpmiddel produceert met de standaard 10 stappen:

Stap Hex Mengen Typische rol
0 #3B82F6 Basis Primair merk (blauw-500)
1 #4C8DF6 9,1% wit Lichte hover op donkere achtergrond
2 #5E98F7 18,2% wit equivalent van blauw-400
3 #70A4F8 27,3% wit
4 #82AFF9 36,4% wit blauw-300
5 #94BAFA 45,5% wit
6 #A5C6FA 54,5% wit
7 #B7D1FB 63,6% wit
8 #C9DCFC 72,7% wit Subtiele achtergrond (blauw-100/200)
9 #DBE8FD 81,8% wit
10 #EDF3FE 90,9% wit blauw-50

Tint + schaduw = ontwerpsysteemschaal

Combineer tinten (lichter) en schaduwen (donkerder) rond een enkele basis om een volledige schaal te vormen:

  • 50, 100, 200, 300, 400: tinten (lichtste tot iets lichter dan basis)
  • 500: basis
  • 600, 700, 800, 900: schaduwen (iets donkerder dan basis tot donkerste)

Dit komt overeen met Tailwind, Material, Open Color, Radix UI en de meeste populaire ontwerpsystemen. Schalen van 10 tot 11 stappen zijn de norm.

Waar tinten schitteren in de gebruikersinterface

  • Waarschuwings- en badge-achtergronden: fout-500-tekst op fout-50-achtergrond = onmiddellijke herkenning zonder visuele schreeuw.
  • Hover-statussen op donkere achtergronden: knoppen op een donker oppervlak worden bij hover lichter naar een lichtere tint.
  • Sequentiële schalen voor datavisualisatie: waarde-naar-kleur mapping waarbij hoge waarden verzadigd zijn en lage waarden vervagen naar wit.
  • Tijdelijke aanduidingen voor avatar-/diagramcategorie: tint van de primaire kleur wanneer er geen afbeelding/gegevens aanwezig zijn.
  • Oppervlaktelagen: kaartachtergrond licht getint met de merkkleur voor een subtiele merkaanwezigheid.

Waarom de lichtste tinten verzadiging verliezen

De generator mengt direct in de RGB-ruimte. Naarmate er wit bijkomt, daalt de verzadiging sneller dan de waargenomen lichtheid stijgt, waardoor de bovenste stappen bleek of grijsachtig ogen. Dat is normaal gedrag bij RGB-menging:

  • RGB-menging (dit hulpmiddel): eenvoudig en voorspelbaar. De verzadiging vervaagt gestaag; zeer lichte stappen zien er gedesatureerd uit.
  • OKLCH- of LAB-interpolatie: door ontwerpsoftware gebruikt om de chroma stabieler te houden bij het lichter maken. Deze generator biedt die modellen niet aan; als u tinten met een stabiele kleurtoon nodig hebt, maak ze dan in een OKLCH-compatibel ontwerpprogramma.
  • Lichter maken in HSL: verhoogt de lichtheid zonder wit te mengen; het resultaat kan pastelliger ogen dan verfachtig.

Tintvloer voor bruikbare gebruikersinterface

Zeer lichte tinten (stap 8+) benaderen puur wit en worden op een witte achtergrond visueel niet meer te onderscheiden. Nuttig als:

  • Subtiele selectie highlights achter tekst.
  • Bijna onzichtbare rijstrepen in dichte tabellen.

Maar niet geschikt voor knoppen of labels waarbij de gebruiker een duidelijke kleur moet zien. Combineer lichte tinten met een donkerder element (rand, tekst) om ze te aarden.

Veelgestelde vragen

De generator mengt direct in RGB, en RGB-interpolatie trekt de verzadiging omlaag naarmate de lichtheid stijgt, zodat de bovenste stappen naar wit neigen. Interpoleren in OKLCH of LAB houdt daarentegen een zichtbaar spoor van de basistint over; gebruik een OKLCH-compatibel ontwerpprogramma wanneer dat ertoe doet.

Gelijkaardig maar niet identiek. Door te mengen met wit worden zowel de verzadiging als de lichtheid proportioneel verminderd; HSL-lichtheidsaanpassing verhoogt L onafhankelijk. Tinten voelen natuurlijker aan (verfachtig); HSL-lichtheid kan doorslaan naar onrealistische pasteltinten.

Ja – de donkere modus heeft meestal een andere ‘lichtheidsladder’ nodig omdat de achtergronden al donker zijn. Veel systemen draaien de schaal om (de 50 in de donkere modus is het wit-op-donker-equivalent van de 900 in de lichte modus).

Genereer een 5-staps tintladder (50-500) en een 5-staps schaduwladder (500-900) vanaf dezelfde basis. Aaneenschakelen voor een volledige ontwerpsysteemschaal van 10-11 stappen.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Binair naar hex-converter

Converteer binaire invoer naar een gewone hexwaarde in hoofdletters. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.