CodeKitHubWas ist dieses Tool?
Ein Farbmischer interpoliert die Rot-, Grün- und Blau-Kanäle zweier Farben linear in einem gewählten Verhältnis — dieselbe Mathematik, die intern auch ein Verlauf verwendet. Bei 0 % ist das Ergebnis Farbe A, bei 100 % Farbe B, und bei 50 % der arithmetische Mittelwert jedes RGB-Kanals.
Das unterscheidet sich vom Mischen echter Farbe (subtraktiv, abhängig vom Pigment) und ist auch nicht dasselbe wie eine Mittelung im HSL-Raum — lineare RGB-Interpolation ist das, was CSS-Verläufe, Design-Tools und die meisten „Farbe zwischen zwei Farben“-Werkzeuge verwenden, sodass das Ergebnis genau dem entspricht, was Sie in einem Browser-Verlauf zwischen denselben zwei Farben sehen würden.
Warum sollte man es nutzen?
- Finden Sie eine natürlich wirkende Hover- oder Aktiv-Farbe, die zwischen Ihrer Grundfarbe und einer Akzentfarbe liegt — statt eine zufällige Anpassung zu raten.
- Sehen Sie den exakten HEX-Code bei jedem beliebigen Verhältnis, statt einen Verlauf nur nach Augenmaß von einem Screenshot abzulesen.
- Die 11-stufige Rampe liefert mit einem Klick eine vollständige Palette von einer Farbe zur anderen — nützlich für Datenvisualisierung oder einen mehrstufigen Verlauf.
- Klicken Sie auf eine beliebige Stufe, um deren HEX-Code sofort zu kopieren.
- Kostenlos, sofort und vollständig lokal — kein Upload, kein Konto nötig.
Anleitung
- Wählen Sie Farbe A und Farbe B über die Farbwähler oder durch Eingabe eines HEX-Codes.
- Ziehen Sie den Mischverhältnis-Regler, um festzulegen, wie viel von Farbe B eingemischt wird.
- Lesen Sie die resultierenden HEX- und RGB-Werte oberhalb der Farbmuster ab.
- Klicken Sie auf ein beliebiges Muster in der 11-stufigen Rampe unten, um dessen HEX-Code zu kopieren.
Beispiel
Eingabe
Farbe A #3B82F6 (Blau), Farbe B #F59E0B (Amber), Verhältnis 50 %Ausgabe
#9B9E7D — rgb(155, 158, 125)Bei genau 50 % ist jeder RGB-Kanal der arithmetische Durchschnitt der Kanäle beider Eingabefarben.
Häufig gestellte Fragen
Warum stimmt das nicht mit dem überein, was ich beim Mischen echter Farbe bekäme?
Farbmischung ist subtraktiv (Pigmente absorbieren Licht) und hängt von den konkret beteiligten Pigmenten ab — blaue und gelbe Farbe ergeben zum Beispiel Grün. Dieses Tool mischt Licht (RGB-Kanäle) additiv/linear, so wie es Bildschirme, CSS-Verläufe und die meisten digitalen Design-Tools tun. Die beiden Systeme liefern absichtlich unterschiedliche Ergebnisse, nicht aus Versehen.
Ist das dasselbe wie ein CSS-linear-gradient zwischen den beiden Farben?
Ja — ein CSS linear-gradient(farbeA, farbeB) interpoliert die RGB-Kanäle genauso wie dieses Tool, sodass die Farbe in der Mitte dieses Verlaufs dem 50-%-Ergebnis hier entspricht.
Warum wirkt die gemischte Farbe manchmal trüb oder grau?
Das Mischen zweier gesättigter, aber sehr unterschiedlicher Farbtöne (wie Blau und Orange, die fast komplementär sind) im RGB-Raum ergibt oft einen unbunten, grau-bräunlichen Mittelton — das ist eine echte Eigenschaft der RGB-Interpolation, kein Fehler. Für eine lebendigere Mischung probieren Sie Farben, die auf dem Farbkreis näher beieinanderliegen, oder mischen Sie im HSL-Raum, indem Sie den Farbton anpassen und die Sättigung hoch halten (das kann dieser direkte RGB-Mischer nicht).
Kann ich mehr als zwei Farben gleichzeitig mischen?
Nicht in einem einzigen Schritt — das Tool mischt genau zwei Farben. Um drei zu kombinieren, mischen Sie die ersten beiden im gewünschten Verhältnis, kopieren Sie das Ergebnis und fügen Sie es als neue Farbe A gegen Ihre dritte Farbe ein. Das schrittweise Vorgehen gibt Ihnen zudem Kontrolle über die Gewichtung, die ein einzelner Dreifach-Durchschnitt nicht bieten würde.
Sollte ich dieses Tool oder den Farbabstufungs-Generator verwenden?
Wenn Sie eine Farbe brauchen, die zwischen zwei unterschiedlichen Farben liegt — etwa einen Übergangston zwischen Ihrem Markenblau und einem Amber-Akzent — nutzen Sie diesen Mischer. Wenn Sie hellere und dunklere Varianten einer einzigen Farbe brauchen (Hover-Zustände, Hintergründe, eine Tailwind-artige 50-900-Rampe), verwenden Sie stattdessen den Farbabstufungs-Generator: Er hält Farbton und Sättigung konstant und variiert nur die Helligkeit, sodass jedes Ergebnis eindeutig in derselben Farbfamilie bleibt.
Welche Farbformate kann ich in die Eingabefelder eintragen?
Die Textfelder akzeptieren 6-stellige HEX-Codes, mit oder ohne führendes # (z. B. 3B82F6 oder #3B82F6). Kurzform-3-stelliges Hex, rgb()-Notation und CSS-Farbnamen werden dort nicht erkannt — Sie können aber jede Farbe visuell über den nativen Farbwähler neben jedem Feld auswählen, und das HEX-Feld aktualisiert sich entsprechend.