Kleurenmenger

Wat betekent kleuren mengen?

Twee kleuren mengen blendt ze langs een rechte lijn in een kleurruimte en produceert elke tussenkleur. De keuze van ruimte telt: blenden in ruwe sRGB (de waarden in een hex-code) voelt intuïtief maar geeft saaie, grijze middens — omdat sRGB gamma-gecodeerd is, niet lineair. Blenden in lineair-licht RGB — wat deze tool standaard doet — geeft heldere, accurate middens die overeenkomen met hoe licht in de echte wereld optelt. Het verschil is het sterkst zichtbaar bij het mengen van een verzadigde kleur met wit of een andere verzadigde kleur: lineair mengen houdt het midden levendig, naïef sRGB plat het.

Hoe gebruik je deze menger

Pak twee kleuren met de pickers (of plak hex-codes), sleep dan de verhoudings-slider om te kiezen hoeveel van B in A wordt gemengd. Het resultaat-blok werkt live bij en toont hex, RGB en HSL. Vink 11 mid-stops tonen aan voor een 11-staps-gradient-strip tussen de twee — handig voor geïnterpoleerde kleuren voor diagram-assen of animatie-frames. Klik op een stop om de hex te kopiëren.

Wanneer wat

Gebruik deze menger om merkkleuren te blenden voor hover/active-states, geïnterpoleerde diagramreeksen op aangepaste posities af te leiden, data-binding-gradiënten te bouwen (heatmap van koel naar warm), of snel te checken of twee kleuren een modder-midden geven voordat je je vastlegt. Voor UI-states geven mid-stops op 25%, 50% en 75% een coherente schaal zonder visuele gaten. Voor dataviz passen 11 stops bij een typische 0-100-schaal (elke 10%) — geen extra rekenwerk.

Hoe de menging wordt berekend

Elke invoerkleur wordt gamma-gedecodeerd naar lineaire sRGB: waarden onder 0.04045 worden door 12.92 gedeeld, de rest gaat door ((c + 0.055) / 1.055)2.4. De twee lineaire waarden worden dan per kanaal lineair geïnterpoleerd: uit = A·(1−t) + B·t, met t als sliderpositie. Tot slot wordt het resultaat gamma-gecodeerd terug naar sRGB en gemapt naar het 0-255-byte-bereik. Dezelfde pijplijn die moderne image editors gebruiken voor accurate gradient-rendering.

Mengen in verschillende kleurruimtes

Naïef sRGB: snel, intuïtief, maar geeft donkere/modderige middens — vermijd voor levendige blends. Lineaire sRGB (wat we gebruiken): fysisch accurate lichtoptelling; middens blijven helder. HSL: goed voor tint-schalen maar interpoleert slecht door laag-verzadigde gebieden. OKLCH: perceptueel uniform; de gouden standaard voor design tokens maar complexer om te berekenen. Voor dagelijks kleur-blenden treft lineaire sRGB de juiste balans tussen accuratesse en eenvoud.

Veelgestelde vragen