Color
Mixer
Meng twee kleuren en krijg het resultaat direct — met HEX-, RGB- en HSL-waarden.
① Kies Kleur A en Kleur B ② Versleep de schuifregelaar voor de verhouding ③ Kopieer het gemengde resultaat
Kleur A
Kleur B
Kleurpaar-voorinstellingen:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
Hoe werkt kleurmenging?
Kleurmenging in digitaal ontwerp gebruikt lineaire RGB-interpolatie: resultaat = kleur1 + (kleur2 − kleur1) × verhouding, onafhankelijk toegepast op elk R-, G-, B-kanaal. Bij 50% krijg je het rekenkundig gemiddelde; bij 25% neigt het resultaat 75% naar Kleur A. Dit is hetzelfde algoritme als de CSS
color-mix()-functie en mix-blend-mode, en weerspiegelt de blending-engine van Figma. Kopieer het resultaat als HEX, RGB of HSL direct in je code. Voor design tokens en merkpaletten, keten resultaten.Veelgestelde vragen
De mixer gebruikt lineaire interpolatie in de RGB-kleurruimte. Elk kanaal (R, G, B) wordt onafhankelijk gemengd met de formule: resultaat = kleur1 + (kleur2 - kleur1) × verhouding. Bij 0% krijg je Kleur A, bij 100% Kleur B, bij 50% het rekenkundig gemiddelde.
RGB-menging is additief en werkt met licht. Rood en groen licht mengen geeft geel, terwijl rode en groene verf een modderig bruin geven. De digitale mixer gebruikt RGB (additieve) menging.
Bij RGB-menging passeert het middelpunt van twee verzadigde complementaire kleuren vaak een gebied met lage verzadiging (grijs), omdat lineaire RGB-interpolatie het tintpad niet behoudt.
De tool levert drie formaten. Gebruik de HEX-code direct in CSS. Gebruik RGB met rgb()-notatie. In modern CSS kun je ook color-mix() gebruiken: color-mix(in srgb, #kleur1 50%, #kleur2).
Deze tool mengt precies twee kleuren. Om meerdere kleuren te mengen, keten de resultaten: meng eerst Kleur A en B, dan het resultaat met Kleur C.
De schuifregelaar gaat van 0% (100% Kleur A) tot 100% (100% Kleur B). Bij 50% dragen beide kleuren gelijkelijk bij. Bij 25% neigt het resultaat 75% naar Kleur A.
Veelvoorkomende toepassingen: overgangskleuren tussen merkkleuren genereren, tussentoestanden voor interactieve elementen maken, kleurrampen voor datavisualisaties bouwen.