Farbmischer

Farben mit Messbechern visuell mischen. Farben auswählen, Mengen anpassen und das Mischergebnis als RGB-, HSL- und HEX-Werte sehen.

Mischstation

Becher 1

5

Becher 2

5

Mischergebnis

Eingabeverhältnisse

50%

RGB-Aufschlüsselung

Rot: 142 (35.9%)

Grün: 114 (28.8%)

Blau: 140 (35.4%)

Gemischte Farbe

Farbdetails

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

Farbmischer – Funktionsweise

Warum funktioniert Farbmischung?

Farben lassen sich auf zwei grundlegende Arten mischen:

Additive Farbmischung kommt bei Bildschirmen und lichtbasierten Systemen zum Einsatz. Wenn farbiges Licht überlagert wird, addieren sich die Lichtstrahlen. Rot + Grün = Gelb, Rot + Blau = Magenta, Grün + Blau = Cyan. Werden alle drei Farben mit voller Intensität kombiniert, entsteht Weiß.

Subtraktive Farbmischung gilt für Farben, Tinte und Pigmente. Materialien absorbieren bestimmte Wellenlängen und reflektieren den Rest. Die subtraktiven Grundfarben sind Cyan, Magenta und Gelb (CMY). Bei starker Mischung entsteht ein Farbton, der sich Schwarz annähert.

Dieses Tool verwendet das additive RGB-Modell, das der Standard für digitale Bildschirme und Webdesign ist.

Das RGB-Farbmodell

RGB definiert eine Farbe mit drei Kanälen:

Rot (R): 0–255
Grün (G): 0–255
Blau (B): 0–255

Jedes Pixel auf einem Bildschirm enthält rote, grüne und blaue Subpixel. Durch Variation der Intensität jedes Kanals kann ein Display mehr als 16,7 Millionen Farben darstellen ( $256^3 = 16{,}777{,}216$ ).

Gängige Farbformate

Format	Beispiel	Beschreibung
HEX	#FF6B35	6-stelliges hexadezimales Format, häufig in CSS verwendet
RGB	rgb(255, 107, 53)	Rot-, Grün- und Blauwerte als Dezimalzahlen
HSL	hsl(16, 100%, 60%)	Farbton, Sättigung und Helligkeit – intuitiv anzupassen

Berechnung des Mischergebnisses

Der Mischer berechnet das Ergebnis als gewichteten Durchschnitt jedes RGB-Kanals. Bei $N$ Eingangsfarben mit den Mengen $a_1, a_2, \ldots, a_N$ und den RGB-Werten $(r_i, g_i, b_i)$ gilt:

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

Kurz gesagt: Farben mit einem höheren Pegel haben einen stärkeren Einfluss auf das Ergebnis.

Beispiel: 3 Teile Rot (#FF0000) mit 1 Teil Blau (#0000FF):

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

Die gemischte Farbe ergibt etwa #BF0040 – ein tiefes Rotviolett.

Praktische Anwendungsgebiete

Webdesign & UI

Nutzen Sie die Farbmischung, um Farbpaletten zu erstellen, transparente Überlagerungen zu testen und Akzentfarben aus einer Basisfarbe abzuleiten.

Bildung & Lehre

Ein anschaulicher Einstieg in die Zusammenhänge zwischen Licht, menschlicher Farbwahrnehmung und Farbmathematik.

Digitale Kunst

Hilft Künstlerinnen und Künstlern dabei, vorherzusagen, wie sich Farben am Bildschirm in Illustration, Design und Bildbearbeitung verhalten.

Tipps für bessere Farbmischungen

Mit Grundfarben beginnen — Rot, Grün und Blau sind das Fundament der RGB-Mischung.
Pegel anpassen — Je höher der Pegel, desto stärker wirkt sich eine Farbe auf das Mischergebnis aus.
Ausgabeformate vergleichen — Wählen Sie je nach Anwendungsfall HEX, RGB oder HSL – ob für CSS, Design-Tools oder Code.
Gleiche RGB-Werte ergeben Grau — Sind Rot, Grün und Blau identisch, entsteht ein neutrales Grau.

Häufig gestellte Fragen

Was ist der Unterschied zwischen additiver und subtraktiver Farbmischung? Bei der additiven Mischung wird Licht überlagert – es wird heller und endet in Weiß. Bei der subtraktiven Mischung werden Pigmente kombiniert – es wird dunkler und nähert sich Schwarz an.

Warum sieht die Mischung anders aus als beim Malen mit Farbe? Weil dieses Tool das RGB-Lichtmodell verwendet, nicht die Farbstoffmischung. Auf einem Bildschirm ergibt Rot + Blau = Magenta. Bei Pigmenten absorbieren die Stoffe Licht, weshalb das Ergebnis anders aussieht.

Kann ich die Farbcodes im Ergebnis direkt in CSS verwenden? Ja. Die ausgegebenen HEX-, RGB- und HSL-Werte können direkt in CSS und den meisten Design-Tools verwendet werden.

Was bedeutet der „Pegel" an jedem Glas? Er gibt die relative Menge dieser Farbe in der Mischung an. Ein Glas mit Pegel 8 trägt doppelt so viel zur Mischung bei wie dasselbe Glas mit Pegel 4.