CodeKitHubWat is deze tool?
Een kleurmixer interpoleert lineair tussen de rode, groene en blauwe kanalen van twee kleuren bij een gekozen verhouding — dezelfde berekening die een verloop intern gebruikt. Bij 0% is het resultaat Kleur A, bij 100% Kleur B, en bij 50% is het het rekenkundig gemiddelde van elk RGB-kanaal.
Dit verschilt van het mengen van echte verf (dat subtractief is en afhankelijk van pigment), en het is ook niet hetzelfde als middelen in de HSL-ruimte — lineaire RGB-interpolatie is wat CSS-verlopen, ontwerptools en de meeste hulpmiddelen voor 'kleur tussen twee kleuren' gebruiken, dus het resultaat komt overeen met wat je in een browserverloop tussen dezelfde twee kleuren zou zien.
Waarom gebruiken?
- Vind een natuurlijk ogende hover- of actieve-statuskleur die tussen je basiskleur en een accentkleur ligt — in plaats van een willekeurige aanpassing te raden.
- Zie de exacte HEX-code bij elke verhouding, in plaats van een schatting op basis van een screenshot van een verloop.
- De trap van 11 stappen geeft je met één klik een volledig palet van de ene naar de andere kleur, handig voor datavisualisatie of een verloop met meerdere stops.
- Klik op een willekeurige stap om de HEX-code direct te kopiëren.
- Gratis, direct en volledig lokaal — geen upload, geen account nodig.
Hoe te gebruiken
- Kies Kleur A en Kleur B via de kleurkiezers of door een HEX-code in te typen.
- Sleep de verhoudingsschuif om in te stellen hoeveel van Kleur B wordt gemengd.
- Lees de resulterende HEX- en RGB-waarden boven het kleurvlak af.
- Klik op een willekeurig vlak in de trap van 11 stappen hieronder om de HEX-code te kopiëren.
Voorbeeld
Invoer
Kleur A #3B82F6 (blauw), Kleur B #F59E0B (amber), verhouding 50%Uitvoer
#9B9E7D — rgb(155, 158, 125)Bij precies 50% is elk RGB-kanaal het rekenkundig gemiddelde van de kanalen van de twee invoerkleuren.
Veelgestelde vragen
Waarom komt dit niet overeen met wat ik zou krijgen bij het mengen van echte verf?
Verf mengen is subtractief (pigmenten absorberen licht) en hangt af van de specifieke gebruikte pigmenten — het mengen van blauwe en gele verf geeft bijvoorbeeld groen. Deze tool mengt licht (RGB-kanalen) additief/lineair, zoals schermen, CSS-verlopen en de meeste digitale ontwerptools dat doen. De twee systemen leveren doelbewust echt andere resultaten op, dat is geen fout.
Is dit hetzelfde als een CSS linear-gradient tussen de twee kleuren?
Ja — een CSS linear-gradient(colorA, colorB) interpoleert de RGB-kanalen op dezelfde manier als deze tool, dus de kleur die je in het midden van dat verloop zou zien komt overeen met het resultaat bij 50% hier.
Waarom ziet de gemengde kleur er soms troebel of grijzig uit?
Het mengen van twee verzadigde maar zeer verschillende tinten (zoals blauw en oranje, die bijna complementair zijn) in de RGB-ruimte levert vaak een laag verzadigd, grijsbruin middenpunt op — dit is een echte eigenschap van RGB-interpolatie, geen fout. Als je een levendiger mengkleur wilt, probeer dan kleuren te mengen die dichter bij elkaar liggen op de kleurencirkel, of meng in de HSL-ruimte door de tint aan te passen terwijl de verzadiging hoog blijft (iets wat deze simpele RGB-mixer niet doet).
Kan ik meer dan twee kleuren tegelijk mengen?
Niet in één stap — de tool mengt precies twee kleuren. Om drie kleuren te combineren, meng je eerst de eerste twee in de gewenste verhouding, kopieer je het resultaat en plak je dat als nieuwe Kleur A tegenover je derde kleur. Door het in fasen te doen, heb je ook controle over de weging, wat een enkel gemiddelde van drie kleuren niet zou bieden.
Moet ik dit gebruiken of de Kleurtinten-generator?
Als je een kleur nodig hebt die tussen twee verschillende kleuren ligt — bijvoorbeeld een overgangstint tussen je merkblauw en een accentamber — gebruik dan deze mixer. Als je lichtere en donkerdere varianten van één kleur nodig hebt (hover-statussen, achtergronden, een Tailwind-achtige 50-900-reeks), gebruik dan de Kleurtinten-generator: die houdt tint en verzadiging vast en varieert alleen de helderheid, zodat elk resultaat duidelijk in dezelfde kleurenfamilie blijft.
Welke kleurformaten kan ik in de invoervelden typen?
De tekstvelden accepteren 6-cijferige HEX-codes, met of zonder voorloop-# (bijv. 3B82F6 of #3B82F6). Verkorte 3-cijferige hex, rgb()-notatie en CSS-kleurnamen worden daar niet herkend — maar je kunt elke kleur visueel kiezen met de native kleurkiezer naast elk veld, waarna het HEX-veld automatisch wordt bijgewerkt.