Farbmischer — Zwei Farben mischen

Zwei Bildschirmfarben ineinander überblenden

Farben zu mischen ist praktisch, wenn Sie einen Hover-Zustand zwischen zwei Tokens, den Mittelpunkt eines Verlaufs, eine Übergangsfarbe für ein Diagramm oder einen schnellen Vergleich zweier Markenfarben brauchen. Dieser Farbmischer überblendet zwei gewählte Farben, indem er ihre Rot-, Grün- und Blaukanäle interpoliert. Schieben Sie den Regler Richtung Farbe B, um deren Anteil zu erhöhen, und kopieren Sie das Ergebnis als HEX, RGB oder HSL für CSS, Dokumentation oder Design-Tokens.

RGB-Mischung beschreibt, wie Bildschirme Licht kombinieren. Das ist ideal für die Webentwicklung, entspricht aber nicht dem Mischen von Farben oder Tinten: Der Mittelpunkt zwischen Blau und Gelb am Bildschirm verhält sich nicht wie dieselbe Mischung aus physischen Pigmenten. Für das Interface-Design ist RGB-Mischung dennoch praktisch, da der Browser Farben letztlich als Bildschirmwerte darstellt. Die Vorschau aktualisiert sich sofort, sodass Sie das Ergebnis vor dem Kopieren beurteilen können.

Mischverhältnisse im Interface-Design nutzen

Das Verhältnis steuert die Gewichtung der beiden Eingaben. Bei 0 Prozent ist das Ergebnis Farbe A, bei 100 Prozent Farbe B. Werte zwischen 10 und 25 Prozent eignen sich oft für dezente Hover-Zustände oder getönte Flächen, weil die Ausgangsfarbe dominant bleibt. Werte um 50 Prozent passen besser zu Übergangspaletten, Verlaufsmittelpunkten und Diagrammskalen. Wirkt das Ergebnis matt, erhöhen Sie anschließend die Sättigung in HSL oder wählen Sie Ausgangsfarben mit größerem Abstand.

Zuverlässige Farb-Tokens kopieren

Haben Sie eine passende Mischung gefunden, kopieren Sie das Format, das am besten zu Ihrem Workflow passt. HEX ist kompakt für die Design-Übergabe, RGB hilft, wenn Sie Kanalwerte oder Alpha-Überlagerungen brauchen, und HSL lässt sich nach dem Mischen leichter nach Farbton, Sättigung oder Helligkeit anpassen. Da das Tool lokal läuft, können Sie gefahrlos mit unveröffentlichten Markenpaletten oder Kundenfarben experimentieren. Testen Sie die fertige Mischfarbe immer im Kontext, besonders hinter Text oder neben wichtigen Statusfarben.