Was ist Farbmischer?

Mische zwei Farben mit einem Verhältnisregler und sieh das Ergebnis in Echtzeit. Gibt HEX-, RGB- und HSL-Werte aus, die du direkt in deinen Code oder dein Design-Tool kopieren kannst.

Wähle zwei Farben, einen Mischmodus — RGB, RYB, LAB, LCH, HSL oder OKLCH — und ziehe den Regler zwischen 0% und 100%. RGB mittelt direkt im Bildschirmraum, ist am schnellsten, kann aber matschige Mittelwerte erzeugen. RYB mischt wie echte Farbe, sodass Blau und Gelb Grün ergeben und Rot und Gelb Orange. LAB und LCH mischen wahrnehmungsbasiert und ergeben weichere Verläufe über Farbfamilien hinweg; OKLCH ist das neueste, an die CSS-color-mix-Spezifikation angelehnte Wahrnehmungsmodell und liefert meist den natürlich wirkendsten Mittelwert. Ausgaben gibt es als HEX, RGB, HSL, CMYK sowie den nächstgelegenen Farbnamen, dazu einen WCAG-Kontrastwert auf Weiß und Schwarz und einen kopierbaren linearen CSS-Verlauf. Die Schnellbuttons 25, 50 und 75 Prozent springen sofort zu gängigen Mischpunkten, ohne den Regler exakt ziehen zu müssen.

Anleitung

1. Schritt 1 — Wählen Sie die erste Farbe über den Farbwähler oder geben Sie ihren HEX-Wert ein.
2. Schritt 2 — Wählen Sie die zweite Farbe und stellen Sie den Mischverhältnis-Regler ein (0 % = reine erste Farbe, 100 % = reine zweite Farbe).
3. Schritt 3 — Sehen Sie das Mischergebnis mit den zugehörigen Farbcodes und kopieren Sie die benötigten Werte.

Wann verwenden

• Hover- und Disabled-Zustände bauen, indem du eine Markenfarbe mit Weiß oder Grau mischst.
• Zwischenstopps für einen CSS-Verlauf erzeugen, der in der Mitte nicht matschig wird.
• Eine ruhigere Akzentfarbe holen, indem du zwei Markenfarben mit geringer Quote für sanfte Hinweise mischst.

Ergebnis

Ein Designer mischt Markenblau (#2196F3) mit Weiß (#FFFFFF) bei 30 %, um einen dezenten Farbton (#A1C9F8) für Hover-Zustände in einem UI-Kit zu erzeugen.

Häufige Fragen

Welchen Mischmodus nimmt man meistens?

Wenn deine Pipeline es unterstützt, nimm OKLCH — wahrnehmungsmäßig der ausgewogenste Modus und im Einklang mit der modernen CSS-color-mix-Spezifikation. LAB ist die nächstbeste Wahl und in Designtools breit verfügbar. RGB reicht, wenn beide Farben ähnliche Helligkeit haben; LCH erhält die Sättigung am besten; HSL nutzt du eher für Farbtonrotation als für glatte Interpolation.

Warum wirkt der Mittelpunkt in RGB manchmal grau oder schmutzig?

RGB mittelt Zahlen, nicht Wahrnehmung. Komplementärfarben wie Blau und Orange heben sich in den R-, G- und B-Kanälen auf und die Mitte landet in einem entsättigten Grau. In LAB oder LCH bleibt der Mittelpunkt gesättigter. Für ein Ergebnis wie beim Mischen echter Farbe nutze den RYB-Modus: Er mischt Blau und Gelb zu Grün statt zu Grau.

Worin unterscheidet sich das von CSS `color-mix()`?

color-mix() liefert sich mit modernen Browsern aus und kennt srgb, lab, oklab, lch oder oklch. Dieses Tool gibt HEX zurück, das in ältere Stylesheets passt, und bietet einen optischen Regler zum exakten Einstellen der Quote, statt den Prozentsatz zu schätzen.

Kann ich mehr als zwei Farben mischen?

In einem Schritt nicht, aber verkettet: mische A und B zu C und dann C mit D. Für einen weicheren Dreifarbverlauf mische A→B bei 50% und B→C bei 50% und setze die beiden Mittelpunkte als Stopps neben das ursprüngliche B.

Was bedeutet 0% gegenüber 100%?

0% ergibt reines Color 1, 100% reines Color 2, 50% liegt in der Mitte. Der Regler schrittet in 1% — so lässt sich ein Tint oder Shade fein einstellen, und gerade in UI-Zuständen wirkt 10% Mischung anders als 15%.

Ähnliche Tools