Kleurenmixer — Meng twee kleuren
Meng twee kleuren met een zelfgekozen RGB-verhouding en kopieer de resulterende HEX-, RGB- en HSL-waarden direct in je browser.
🔒 Draait volledig in uw browser — niets wordt geüploadMeng twee schermkleuren
Kleuren mengen is handig als je een hover-status tussen twee tokens nodig hebt, het middelpunt van een kleurverloop, een overgangskleur voor een grafiek of een snelle verkenning van hoe twee merkkleuren zich tot elkaar verhouden. Deze kleurenmixer mengt twee gekozen kleuren door hun rode, groene en blauwe kanalen te interpoleren. Schuif de verhouding richting kleur B om de bijdrage ervan te vergroten en kopieer het resultaat als HEX, RGB of HSL voor CSS, documentatie of designtokens.
RGB-mengen beschrijft hoe schermen licht combineren. Dat maakt het perfect voor webwerk, maar het is niet hetzelfde als verf of inkt mengen: een middelpunt tussen blauw en geel op een scherm gedraagt zich niet als dezelfde mengeling in fysiek pigment. Voor interfaceontwerp is RGB-mengen echter praktisch, omdat de browser kleuren uiteindelijk als schermwaarden weergeeft. Het voorbeeld wordt direct bijgewerkt, zodat je het resultaat kunt beoordelen voordat je het kopieert.
Verhoudingen gebruiken in interfaceontwerp
De verhouding bepaalt de balans tussen de twee invoerkleuren. Bij 0 procent is het resultaat kleur A, bij 100 procent kleur B. Waarden van rond de 10 tot 25 procent zijn vaak nuttig voor subtiele hover-statussen of getinte vlakken, omdat de oorspronkelijke kleur dominant blijft. Waarden rond 50 procent zijn beter voor overgangspaletten, middelpunten van verlopen en kleurreeksen in grafieken. Ziet het resultaat er dof uit, verhoog dan achteraf de verzadiging in HSL of kies uitgangskleuren die verder uit elkaar liggen.
Betrouwbare kleurtokens kopiëren
Heb je een bruikbare mengeling gevonden, kopieer dan het formaat dat het best bij je workflow past. HEX is compact voor overdracht van ontwerpen, RGB is handig als je kanaalwaarden of alfa-overlays nodig hebt, en HSL is na het mengen makkelijker aan te passen op tint, verzadiging of lichtheid. Omdat de tool lokaal draait, kun je veilig experimenteren met ongepubliceerde merkpaletten of klantkleuren. Test de uiteindelijke mengkleur altijd in context, vooral als die achter tekst of naast belangrijke statuskleuren komt.
Hoe te gebruiken
- Kies twee kleurenKies de begin- en eindkleur die je wilt mengen.
- Stel de verhouding inBeweeg de schuifregelaar om te bepalen hoeveel van de tweede kleur wordt gebruikt.
- Kopieer het resultaatGebruik de HEX-, RGB- of HSL-uitvoer in CSS en designtokens.