Farbmischer

Zwei Farben mit einem Verhältnis-Schieberegler mischen und gemischtes Ergebnis sehen

Was ist das und wie funktioniert es?

Ein Farbmischer kombiniert zwei oder mehr Farben und zeigt die resultierende Mischfarbe. Im Gegensatz zu einem Farbwähler simuliert ein Farbmischer das Ergebnis der Kombination von Pigmenten oder Licht und hilft Designern, Künstlern und Entwicklern vorauszusagen, welche Mischung erscheinen wird.

Dieses Tool unterstützt RGB-Mischung (Standard für Bildschirme), HSL-Interpolation (erzeugt wahrnehmbar glattere Verläufe) und optionale RYB-Mischung (das traditionelle Malermodell).

Anwendungsfälle

• Markenfarb-Variationen: Primärfarbe mit Weiß (Tönung) oder Schwarz (Schattierung) in verschiedenen Verhältnissen mischen.
• Gradientenmittelpunkt: Start- und Endfarbe für einen CSS-Gradienten mischen, um die ideale Mittelpunktfarbe zu finden.
• UI-Zustandsfarben: Basis-Button-Farbe mit dunklem Overlay mischen, um die Hover-Farbe vorherzusagen.

Häufige Fragen

Warum ergibt das Mischen von Rot und Blau auf dem Bildschirm andere Ergebnisse als bei Farbe?

Bildschirme nutzen additives RGB: Rot + Blau = Magenta. Pigmente nutzen subtraktive Mischung, was ein dunkleres Lila-Braun ergibt. Das RYB-Modell ist eine vereinfachte Näherung der Farbmischung in der Kunstausbildung.

Was ist der Unterschied zwischen Tönung, Schattierung und Ton?

Tönung = Farbe + Weiß (heller). Schattierung = Farbe + Schwarz (dunkler). Ton = Farbe + Grau (gedämpft).

Wie funktioniert 50/50 RGB-Mischung mathematisch?

Jeder RGB-Kanal wird unabhängig gemittelt: mix(rot1, rot2) = (rot1 + rot2) / 2.

Ist native Farbmischung in CSS möglich?

CSS color-mix() wird seit 2023 in allen großen Browsern unterstützt: color-mix(in srgb, red 50%, blue 50%).

Farbe

Farbpaletten-Generator · CSS-Verlauf-Generator · Kontrast-Prüfer · Farbnamen-Finder