TL
Tool Lab
💰Spenden
💰Spenden

Farbmischer

Mische zwei Farben und erkunde den vollständigen Farbverlauf dazwischen. Passe das Verhältnis an.

Farbe 1
Farbe 2
Mischverhältnis — 50% Farbe 1 : 50% Farbe 2
Gemischte Farbe
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Verlaufsskala (klicken zum Kopieren)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

Über dieses Tool

Der Farbmixer mischt zwei Hex-Farben im RGB-Farbraum und erzeugt bei jedem Verhältnis zwischen 0% und 100% eine gleichmäßige Mischung. Die Verlaufsskala zeigt 7 gleichmäßige Schritte zwischen den beiden Farben.

RGB-Mischung ist dieselbe Operation, die ein Browser beim Zusammenstellen von Farben durchführt — mathematisch exakt und vorhersehbar. Die gemischte Farbe bei 50% ist der wahre Mittelpunkt beider Farben im RGB-Farbraum.

Anleitung

  1. Wählen Sie zwei Farben mit den Farbwählern oder geben Sie Hex-Codes direkt ein.
  2. Verwenden Sie die Voreinstellungsschaltflächen für klassische Farbkombinationen.
  3. Ziehen Sie den Verhältnisschieber, um die Mischung anzupassen. 0% ergibt Farbe 1; 100% ergibt Farbe 2.
  4. Klicken Sie auf ein Verlaufsfeld oder die Schaltfläche HEX kopieren, um eine Farbe zu kopieren.

Anwendungsfälle

UI-Designer mischen eine Markenfarbe mit Weiß oder Schwarz für Hover-, Aktiv- und Deaktiviert-Zustände. Motion-Designer wählen Zwischenfarben für Keyframe-Animationen. Frontend-Entwickler erstellen Verlaufsschritte ohne Grafik-Editor.

Häufige Fragen

  • Ist das dasselbe wie CSS-Verlauf?Ja. CSS linear-gradient mischt standardmäßig auch in sRGB. Die gezeigten Schritte entsprechen genau den Zwischenpunkten, die ein CSS-Verlauf durchläuft.
  • Warum ergibt Rot + Blau kein Lila?Im RGB-Raum ergibt Rot (#ff0000) und Blau (#0000ff) bei 50% #7f007f (dunkles Magenta). Für ein lebendiges Lila muss Rot mit einem Violett-Blau wie #8000ff gemischt werden.
  • Kann ich mehr Verlaufsschritte erhalten?Die Skala zeigt immer 7 Schritte. Verwenden Sie den Verhältnisschieber, um jeden spezifischen Zwischenpunkt zu prüfen.
  • Unterstützt dies Alpha/Transparenz?Nein, dieses Tool arbeitet nur mit soliden Hex-Farben.