C& Color & Design

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üpload
HEX

RGB

HSL

Advertisement

Meng 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

  1. Kies twee kleurenKies de begin- en eindkleur die je wilt mengen.
  2. Stel de verhouding inBeweeg de schuifregelaar om te bepalen hoeveel van de tweede kleur wordt gebruikt.
  3. Kopieer het resultaatGebruik de HEX-, RGB- of HSL-uitvoer in CSS en designtokens.

Veelgestelde vragen

Hoe worden de kleuren gemengd?
De tool mengt de twee gekozen kleuren door hun RGB-kanalen te interpoleren met de gekozen verhouding.
Kan ik het resultaat als HEX kopiëren?
Ja. Kopieer de gemengde kleur als HEX, RGB of HSL vanaf de uitvoerkaarten.
Is RGB-mengen hetzelfde als verf mengen?
Nee. RGB is additief mengen van schermkleuren en gedraagt zich dus anders dan fysieke pigmenten.
Gebruikt de mixer een server?
Nee. Alle kleurberekeningen draaien in je browser en kopiëren gebruikt navigator.clipboard.
Advertisement