Online Tool Store
Farbmischer
Mische zwei HEX-Farben in jedem Verhältnis mit Linear-Licht-Mischung für ein natürliches Ergebnis, mit sofortiger HEX- und RGB-Ausgabe im Browser.
🔒 Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
Beispiel gezeigt – wähle deine eigenen zwei Farben und das Verhältnis.
Erzeugte Palette
Palettenfarben
Farbe A
Mischergebnis
Farbe B
Misch-HEX
Misch-RGB
So funktioniert der Farbmischer
- Wähle oder tippe zwei HEX-Farben – Farbe A und Farbe B.
- Zieh den Verhältnisregler zu der Farbe, die die Mischung dominieren soll.
- Das Misch-Farbfeld, der HEX-Code, der RGB-Wert und die erzeugte abgestufte Palette aktualisieren sich sofort, wenn du eine Farbe oder das Verhältnis änderst.
Die Methode
Die Rot-, Grün- und Blaukanäle jeder Farbe werden von gamma-kodiertem sRGB in lineares Licht umgewandelt, anhand des Verhältnisses gemischt und dann zur Anzeige zurück in sRGB umgewandelt. Das Mischen im linearen Raum vermeidet den dunkleren, leicht grauen Look, den du beim direkten Mitteln von sRGB-Bytes bekommst.
mixed = linearToSrgb(srgbToLinear(A) × (1 − t) + srgbToLinear(B) × t)
Beispiel: #2F6FED (Blau) und #FFD166 (Gold) im Verhältnis 50/50 gemischt ergibt einen warmen, ausgewogenen Mittelton statt des flachen Graubrauns, das ein naives Byte-Mittel liefern würde. Wähle 3, 5, 7 oder 9 Palettenfarben, wenn du einen wiederverwendbaren Bereich zwischen den Endpunkten brauchst.
FAQ
Warum sieht eine 50/50-Mischung nicht wie ein einfacher Durchschnitt der beiden RGB-Werte aus?
Dieses Tool mischt Farben in linearem Licht, statt rohe sRGB-Bytes zu mitteln. sRGB-Werte sind für Displays gamma-kodiert, sodass ein direkter Durchschnitt zweier Bytes deutlich dunkler und matschiger aussieht als eine echte lichtbasierte Mischung – erst in lineares Licht umwandeln, mischen und zurück umwandeln ergibt ein natürlicheres Ergebnis.
Simuliert das physisches Farbmischen?
Nein. Farbmischen mit Pigmenten ist subtraktiv und hängt von der Pigmentchemie ab, die zwischen Farben stark variiert. Dieses Tool mischt Licht (additive Farbe), was dem entspricht, was du beim Mischen von Farben auf einem Bildschirm oder in Design-Software erhältst, nicht echter Farbe.
Kann ich einen HEX-Code eintippen, statt den Farbwähler zu nutzen?
Ja. Tippe oder füge einen 6-stelligen HEX-Code in eines der Textfelder ein, und Farbfeld und Wähler passen sich an.
Wird das Mischverhältnis gespeichert, wenn ich die Seite verlasse?
Nein. Beim Neuladen wird alles zurückgesetzt – die Berechnung läuft vollständig in deinem Browser und nichts wird gesendet oder gespeichert.
Kann ich die gemischte Palette als CSS-Variablen exportieren?
Ja. Sobald eine Palette erzeugt ist, kannst du sie als CSS-Custom-Properties kopieren oder herunterladen, fertig zum Einfügen in ein Stylesheet.
Wie viele Farben kann ich in der Palette erzeugen?
Wähle 3, 5, 7 oder 9 gleichmäßig verteilte Schritte zwischen deinen beiden Endfarben, alle im linearen Licht gemischt wie die Hauptmischung.
Im Vergleich
| Funktion | Online Tool Store | colorxs.com | Adobe Color |
|---|---|---|---|
| Einstellbares Mischverhältnis, nicht nur 50/50 | ✓ | Fester Mittelpunkt | ✓ |
| Keine Anmeldung und kein Konto | ✓ | ✓ | Adobe-Konto |
| Läuft vollständig auf deinem Gerät | ✓ | Nicht angegeben | Nicht angegeben |
Wenn du feine Kontrolle über das Mischverhältnis zweier Farben mit sofortiger, privater Vorschau willst, hält der Online Tool Store Color Mixer alles auf deinem Gerät.