Color Blender: Farben mischen & Paletten erstellen

Was ist Color Blender?

Color Blender ist ein kostenloses Online-Tool, das zwei Farben mischt und eine glatte Serie von Zwischentönen erzeugt. Wählen Sie eine Startfarbe und eine Endfarbe, legen Sie die gewünschte Anzahl von Schritten fest (1 bis 30), und das Tool rendert sofort eine vollständige Übergangspalette. Es löst das häufige Designproblem, Zwischenstufen für Farbverläufe, Datenvisualisierungsskalen oder Markenpaletten manuell zu berechnen – ohne Figma, Illustrator oder installierte Software. Alle Berechnungen laufen im Browser, ohne dass Daten an einen Server gesendet werden.

Hauptfunktionen

• Zwei Farben mischen — Hex-Werte über Textfeld oder nativen Farbwähler eingeben; beide Eingaben werden synchron aktualisiert.
• 1–30 Schritte einstellbar — Ein Schieberegler steuert die Anzahl der Farben in der Palette, einschließlich der beiden Endpunkte. Bei 2 Schritten erhalten Sie nur das ursprüngliche Paar; bei 30 entsteht ein fein abgestufter Übergang.
• Echtzeit-Palette-Vorschau — Ein Live-Verlaufsbalken und ein Raster klickbarer Farbfelder werden sofort aktualisiert, wenn Sie den Schieberegler bewegen oder eine Farbe ändern.
• Einzelne oder alle Farben kopieren — Klick auf ein Farbfeld kopiert seinen Hex-Wert in die Zwischenablage. Die Schaltfläche „Alle kopieren" kopiert die gesamte kommagetrennte Liste der Hex-Codes auf einmal.
• HEX-Ausgabe mit RGB- und HSL-Hilfsfunktionen — Jedes Farbfeld zeigt den Hex-Wert; der Quellcode verwendet hexToRgb, rgbToHex und generateBlendedPalette aus der gemeinsamen Color-Utils-Bibliothek.
• Visueller Farbwähler für Eingaben — Neben jedem Textfeld befindet sich ein natives <input type="color">, damit Sie Farben visuell auswählen oder Werte direkt eingeben können.
• Palette als JSON exportieren — Lädt eine color-blend-palette.json-Datei herunter, die color1, color2, steps und das vollständige palette-Array enthält.
• Als CSS-Variablen exportieren (Premium) — Der PremiumExportButton erzeugt eine color-blend-palette.css-Datei mit benannten benutzerdefinierten Eigenschaften.

Anleitung

Schritt 1: Basisfarben festlegen

Öffnen Sie das Demnächst verfügbar: Color Blender-Tool. Sie sehen zwei Farbeingaben nebeneinander, beschriftet mit „Farbe 1" und „Farbe 2". Jede Eingabe hat einen Farbwähler (das quadratische Feld links) und ein Hex-Textfeld.

Klicken Sie auf den Farbwähler für Farbe 1, um den nativen Farbwähler Ihres Browsers zu öffnen, oder geben Sie direkt einen Hex-Wert ein – zum Beispiel #E63946 für ein lebhaftes Rot. Machen Sie dasselbe für Farbe 2: probieren Sie #457B9D für ein Stahlblau. Ein Vorschau-Rechteck unter jeder Eingabe zeigt die ausgewählte Farbe mit überlagertem Hex-Code in einer kontrastierenden Textfarbe (das Tool erkennt automatisch, ob schwarzer oder weißer Text besser lesbar ist).

Verwenden Sie die Schaltfläche Farben tauschen, um die beiden Eingaben sofort umzukehren, oder klicken Sie auf Zufällig, um zwei neue Farben zufällig auszuwählen.

Schritt 2: Anzahl der Übergangsschritte anpassen

Unterhalb der Farbeingaben befindet sich ein „Übergangsschritte"-Schieberegler. Ziehen Sie ihn nach links in Richtung 1 für einen minimalen Übergang oder nach rechts bis 30 für eine fein abgestufte Palette. Die Beschriftung zeigt die aktuelle Schrittanzahl und eine Zeile darunter die Gesamtanzahl der Farben in der Palette.

Für einen Standard-UI-Farbverlauf eignen sich 5–7 Schritte gut. Für eine Datenvisualisierungs-Farbskala bieten 10–12 Schritte genug Variation, um Kategorien klar zu unterscheiden.

Schritt 3: Gemischte Palette prüfen

Die Karte „Gemischte Palette" erscheint unterhalb des Schiebereglers. Oben befindet sich ein kontinuierlicher Verlaufsbalken, der zeigt, wie die Farben von links nach rechts übergehen. Darunter zeigt ein Raster von quadratischen Farbfeldern – je 64×64 Pixel – jeden Schritt.

Fahren Sie mit der Maus über ein Farbfeld, um seinen Hex-Wert in einem kleinen Overlay anzuzeigen. Klicken Sie auf das Farbfeld, um den Wert in die Zwischenablage zu kopieren. Eine Toast-Benachrichtigung bestätigt das Kopieren.

Unterhalb der Farbfelder zeigt eine Listenansicht den Hex-Code jeder Farbe mit einem kleinen Vorschaufeld und einer individuellen Kopierschaltfläche.

Schritt 4: Palette exportieren

Verwenden Sie eine der drei Exportoptionen:

• Alle kopieren — Kopiert die vollständige Palette als kommagetrennte Zeichenkette (z. B. #E63946, #C25167, #9F6388, ...), bereit zum Einfügen.
• JSON exportieren — Lädt color-blend-palette.json mit der Struktur: { "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] } herunter.
• CSS (Premium) — Lädt color-blend-palette.css mit CSS-Custom-Properties namens --blend-0 bis --blend-N herunter.

Anwendungsbeispiele

Marken-Farbverlauf für einen Website-Header

Ein Designer, der eine Start-up-Landingpage erstellt, benötigt einen Farbverlauf von der Primärmarkenfarbe #6C3FF5 (Violett) zu einem sekundären Akzent #00C2CB (Blaugrün). Mit 8 Schritten ergibt sich: #6C3FF5, #5C53F2, #4C66EF, #3C7AEC, #2C8DE9, #1CA0E6, #0CB4E3, #00C2CB. Dieser Zwischensatz lässt sich direkt als CSS-Verlauf-Stops mit gleichmäßigen Abständen verwenden und vermeidet abrupte Sprünge.

Farbskala für Datenvisualisierung

Ein Entwickler, der eine Choroplethenkarte erstellt, benötigt eine Skala von Weiß #FFFFFF bis Dunkelgrün #1A6B3A für Bevölkerungsdichte. Mit 10 Schritten liefert die Palette zehn wahrnehmbar verschiedene Schattierungen. Das exportierte JSON kann direkt in eine D3.js- oder Chart.js-Konfiguration als Domain-Farbarray importiert werden.

Kontrast-Überprüfung für Barrierefreiheit

Ein UI-Team verwendet Color Blender, um herauszufinden, welche Zwischentöne zwischen zwei Markenfarben den WCAG-AA-Kontrast gegenüber weißem Text einhalten. Sie mischen #003566 (Marineblau) zu #FFC300 (Bernstein) in 12 Schritten und fügen dann jeden Hex-Wert in den Contrast Checker ein, um den sicheren Wertebereich zu ermitteln.

Tipps und Best Practices

Nutzen Sie den Zufallsknopf für Inspiration. Wenn Sie bei einer Palettenrichtung nicht weiterkommen, generiert ein Klick auf „Zufällig" zwei völlig zufällige Hex-Farben. Das gemischte Ergebnis offenbart oft unerwartete Kombinationen, die es wert sind, behalten zu werden.

Die Tauschen-Schaltfläche hilft, die Richtung zu überprüfen. Da der Farbverlauf von links nach rechts von Farbe 1 zu Farbe 2 verläuft, können Sie durch Tauschen schnell sehen, ob der Übergang in der entgegengesetzten Richtung besser aussieht.

Speichern Sie Lieblingskombinationen als Presets. Das PresetsPanel (für Unterstützer verfügbar) speichert die Werte color1, color2 und steps gemeinsam, sodass Sie eine genaue Palettenkonfiguration abrufen können, ohne Werte erneut eingeben zu müssen.

Stellen Sie frühere Mischungen über den Verlauf wieder her. Das HistoryPanel zeichnet jede „Alle kopieren"-Aktion auf. Wenn Sie einen Verlaufseintrag wiederherstellen, analysiert das Tool die kopierte Hex-Liste, setzt Farbe 1 auf den ersten Wert, Farbe 2 auf den letzten und die Schritte auf die Gesamtanzahl.

Beginnen Sie mit einer hohen Schrittanzahl und reduzieren Sie. Wenn Sie unsicher sind, wie viele Schritte Sie benötigen, beginnen Sie bei 20 oder höher, um die volle Granularität zu sehen, und reduzieren Sie dann, bis der Übergang noch glatt aussieht. Die meisten Farbverläufe sehen zwischen 5 und 10 Schritten gut aus.

Häufige Probleme und Fehlerbehebung

Ungültiger Hex-Wert manuell eingegeben. Wenn Sie eine ungültige Zeichenkette in das Hex-Textfeld eingeben (z. B. #ZZZZZZ), gibt hexToRgb null zurück und die Palette wird als leeres Array gerendert. Der Bereich für Farbfelder bleibt leer. Lösung: Stellen Sie sicher, dass das Hex-Feld genau 6 gültige Hexadezimalzeichen nach # enthält.

Palette zeigt nur eine oder zwei Farben. Dies tritt auf, wenn der Schieberegler auf seinem Mindestwert von 1 oder 2 steht. Ziehen Sie ihn nach rechts, um Zwischenschritte hinzuzufügen.

„Alle kopieren" liefert keine Ausgabe. Wenn die Palette leer ist (aufgrund einer ungültigen Farbe), wird der Schreibversuch in die Zwischenablage trotzdem ausgelöst, sendet aber eine leere Zeichenkette. Korrigieren Sie zuerst die Farbeingaben und bestätigen Sie, dass der Verlaufsbalken sichtbar ist, bevor Sie kopieren.

JSON-Export-Download startet nicht. Einige Browser blockieren programmatische Link-Klicks aus bestimmten Kontexten. Wenn der Download nicht startet, überprüfen Sie in Ihren Browser-Einstellungen, ob Pop-ups und Downloads für die Website erlaubt sind.

CSS-Export erfordert Premium. Der CSS-Variablen-Export ist hinter dem PremiumExportButton gesperrt und erfordert eine aktive Unterstützer-Aktivierung. Der JSON-Export ist kostenlos und für alle Nutzer verfügbar.

Datenschutz und Sicherheit

Color Blender läuft vollständig in Ihrem Browser. Keine Farbdaten, Palettenkonfigurationen oder exportierten Dateien werden an einen Server übertragen. Das Tool verwendet nur die Web-Clipboard-API und die Blob/URL-APIs – beides sind lokale Browser-Operationen. Preset- und Verlaufsdaten werden in der IndexedDB-Datenbank Ihres Browsers gespeichert und verlassen Ihr Gerät nie. Das Tool funktioniert nach dem ersten Laden auch offline.

Häufig gestellte Fragen

Ist Color Blender kostenlos?

Ja, Color Blender ist vollständig kostenlos ohne erforderliches Konto. Die Kernfunktionen – Farben mischen, Schritte anpassen, Hex-Werte kopieren und JSON exportieren – stehen allen Besuchern zur Verfügung. Der CSS-Variablen-Export ist eine Premium-Unterstützerfunktion, die mit einer Ko-fi-Spende von 5 $ für 30 Tage Zugang verfügbar ist.

Funktioniert Color Blender offline?

Ja. Sobald die Seite geladen wurde, funktioniert Color Blender ohne Internetverbindung. Alle Farbberechnungen laufen in JavaScript in Ihrem Browser, und während der normalen Nutzung werden keine Netzwerkanfragen gestellt. Dies macht es sicher für den Einsatz in Umgebungen mit eingeschränktem Internetzugang.

Sind meine Daten bei Color Blender sicher?

Vollständig sicher. Keine Farbwerte, Palettendaten oder Exportdateien werden jemals an einen Server gesendet. Alle Verarbeitungen finden lokal in Ihrem Browser statt, mit der Web-Clipboard-API zum Kopieren und der Blob-API für Datei-Downloads. Ihre Farbauswahl bleibt vollständig auf Ihrem Gerät.

Wie funktioniert der Misch-Algorithmus?

Das Tool verwendet lineare RGB-Interpolation. Es wandelt beide Hex-Farben in ihre RGB-Komponenten um und berechnet dann gleichmäßig verteilte Zwischenwerte entlang der geraden Linie zwischen ihnen im RGB-Farbraum. Wahrnehmungsbasierte Farbräume wie OKLab können für einige Farbpaare gleichmäßiger aussehende Farbverläufe erzeugen, aber lineare RGB-Interpolation ist rechnerisch einfach und liefert vorhersehbare, symmetrische Ergebnisse.

Umfasst die Schrittanzahl nur Zwischenwerte oder auch die Endpunkte?

Die Schrittanzahl umfasst beide Endpunkte. Eine Einstellung von 5 Schritten erzeugt genau 5 Farben: die Startfarbe, 3 Zwischentöne und die Endfarbe. Eine Einstellung von 2 ergibt nur die beiden Originalfarben ohne Mischung. Der Schieberegler reicht von 1 bis 30.

Kann ich andere Farben als Hex eingeben?

Die Texteingabefelder akzeptieren nur Hex-Werte. Wenn Sie Farben aus RGB- oder HSL-Werten mischen möchten, verwenden Sie zuerst den Color Converter, um das Hex-Äquivalent zu erhalten, und fügen Sie es dann in Color Blender ein.

Welches Format hat das exportierte JSON?

Die JSON-Datei hat vier Schlüssel: color1 (Start-Hex), color2 (End-Hex), steps (der Schiebereglerwert) und palette (ein Array von Hex-Zeichenketten von Anfang bis Ende). Für eine 5-Schritte-Mischung von #E63946 zu #457B9D enthält das Palette-Array genau 5 Hex-Werte.

Kann ich mehr als zwei Farben mischen?

Color Blender unterstützt genau zwei Eingabefarben. Um einen mehrstufigen Farbverlauf mit mehr Ankerpunkten zu erstellen, mischen Sie jedes benachbarte Farbpaar separat und kombinieren Sie die resultierenden Paletten. Der Demnächst verfügbar: Gradient Generator unterstützt nativ mehrere Farbstopps.

Wie verwende ich die Palette in CSS?

Beim JSON-Export iterieren Sie das palette-Array und weisen jeden Wert einem Verlaufs-Stop oder einer CSS-Custom-Property zu. Beim CSS-Export (Premium) enthält die heruntergeladene Datei Variablen namens --blend-0 bis --blend-N, die Sie in jedes Stylesheet importieren können.

Enthält die Palette die Originalfarben?

Ja. Die erste Farbe im Palette-Array ist immer Farbe 1 und die letzte ist immer Farbe 2. Alle Werte dazwischen sind berechnete Interpolationen.

Verwandte Tools

• Demnächst verfügbar: Color Mixer — Zwei Farben mit einem einzigen Verhältnisregler für eine schnelle Einzelmischung mischen, ohne eine vollständige Palette zu erstellen.
• Demnächst verfügbar: Gradient Generator — Mehrstufige CSS-Farbverläufe mit präziser Winkel- und Positionssteuerung erstellen.
• Color Picker — Farben von überall auf dem Bildschirm oder aus einem hochgeladenen Bild auswählen.
• Color Converter — Zwischen HEX, RGB, HSL, HSB und CMYK konvertieren.

Color Blender jetzt ausprobieren: Demnächst verfügbar: Glyph Widgets Color Blender