Color
Mixer
Mische zwei Farben und erhalte das gemischte Ergebnis sofort — mit HEX-, RGB- und HSL-Werten.
① Farbe A und Farbe B wählen ② Schieberegler für das Verhältnis ziehen ③ Gemischtes Ergebnis kopieren
Farbe A
Farbe B
Farbpaar-Vorlagen:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
Wie funktioniert Farbmischung?
Farbmischung im digitalen Design nutzt lineare RGB-Interpolation: Ergebnis = Farbe1 + (Farbe2 − Farbe1) × Verhältnis, unabhängig für jeden Kanal. Bei 50% erhält man den Durchschnitt; bei 25% neigt das Ergebnis zu 75% zu Farbe A. Dies ist derselbe Algorithmus hinter CSS
color-mix() und mix-blend-mode sowie dem Blending-Engine in Figma. Kopiere das Ergebnis als HEX, RGB oder HSL direkt in den Code. Für Design-Tokens und Brand-Paletten: Ergebnisse verketten.Häufig gestellte Fragen
Der Mischer verwendet lineare Interpolation im RGB-Farbraum. Jeder Kanal (R, G, B) wird mit der Formel gemischt: Ergebnis = Farbe1 + (Farbe2 - Farbe1) × Verhältnis. Bei 0% erhält man Farbe A, bei 100% Farbe B, bei 50% das arithmetische Mittel.
RGB-Mischung ist additiv und arbeitet mit Licht. Das Mischen von rotem und grünem Licht ergibt Gelb, während das Mischen roter und grüner Farbe ein trübes Braun ergibt. Der digitale Mischer verwendet RGB (additiv).
Bei der Mischung im RGB-Raum durchläuft der Mittelpunkt zweier gesättigter Komplementärfarben oft einen niedrig gesättigten (grauen) Bereich, da die lineare RGB-Interpolation den Farbton-Pfad nicht erhält.
Das Tool gibt drei Formate aus. Verwende den HEX-Code direkt in CSS-Eigenschaften. Verwende RGB mit der rgb()-Notation. In modernem CSS kannst du auch color-mix() verwenden: color-mix(in srgb, #farbe1 50%, #farbe2).
Dieses Tool mischt genau zwei Farben. Um mehrere Farben zu mischen, verkette die Ergebnisse: Mische zuerst Farbe A und B, dann das Ergebnis mit Farbe C.
Der Schieberegler geht von 0% (100% Farbe A) bis 100% (100% Farbe B). Bei 50% tragen beide Farben gleichermaßen bei. Bei 25% neigt das Ergebnis zu 75% zu Farbe A.
Häufige Anwendungsfälle: Übergänge zwischen Brand-Farben erstellen, Zwischenzustände für interaktive Elemente generieren, Farbrampen für Datenvisualisierungen aufbauen.