Farbmischer: Zwei Farben mit Verlaufsschritten mischen | Kostenlos

A Weder noch. Öffne das Tool und leg los. Alles läuft lokal in deinem Browser, nichts wird auf unseren Servern gespeichert. Letzte Woche zog ich einen 12-Stufen-Verlauf von Dunkelblau zu Hellgold, kopierte die HEX-Codes direkt in meine CSS-Datei. Keine Registrierung, kein Spam, kein Stress.

A Beides. Mehr Schritte erzeugen weichere Übergänge, aber jede Zwischenfarbe verschiebt sich leicht. Probieren Sie 5 Schritte für kräftige, kontrastreiche Farben, 20 für einen fast nahtlosen Verlauf. Ich nehme 8-10 Schritte für Hero-Bereiche und kopiere jedes zweite Feld für UI-Elemente. Tipp: Weniger Schritte eignen sich besser für flache Designpaletten.

A Leider nein – du klickst jedes Farbfeld einzeln an, um den HEX-Code zu kopieren. Bei 20 Stufen sind das 20 Klicks. Ein Trick: Stelle die Stufenanzahl niedrig ein (z.B. 5), kopiere diese Codes, dann generiere mit mehr Stufen für feinere Abstufungen. Manche machen einen Screenshot und nutzen eine Pipette, aber das ist weniger genau.

A Dieses Tool mischt Farben im RGB-Farbraum mit HEX-Codes. Für Bildschirme, Webseiten und Apps ist das perfekt. Aber bei Druckprojekten wie Broschüren oder Visitenkarten weichen die gemischten Farbtöne vom CMYK-Ergebnis ab. Das habe ich schmerzhaft gelernt, als ein sanfter Lavendelverlauf auf einem Kundenflyer matschig aussah. Mische deine Farben hier, konvertiere dann jeden HEX-Code einzeln mit einem separaten Tool. Noch besser: Arbeite von Anfang an direkt in CMYK-Software.

A Die Mischung erfolgt im RGB-Farbraum, nicht in HSL. Deshalb entsteht bei manchen Verläufen eine gräuliche Zone in der Mitte, besonders bei Komplementärfarben wie Blau und Orange. Wenn du einen satteren mittleren Farbton willst, wähle manuell einen Zwischenpunkt und mische in zwei Durchgängen. Ich mache das bei Markenverläufen, wenn die mittlere Farbe auf einem Button landet. Kostet 30 Sekunden extra, aber die Farbqualität zahlt es zurück.

A Einen eingebauten Export gibt es noch nicht, aber ein simpler Trick hilft. Erzeuge deinen Verlauf und füge die HEX-Codes manuell in einen CSS-linear-gradient()-String ein. Bei 10 Schritten dauert das ungefähr 60 Sekunden Kopierarbeit. Alternativ machst du einen Screenshot und ziehst die Farben in Figma mit der Pipette ab. Ich exportiere den Verlauf als PNG und schneide die Swatches für Styleguides zurecht. Für SVG rechnest du jeden HEX-Wert in RGB um und weist ihn einem Stopp-Offset zu.

A Nein, und das ist eine Falle, in die Designer ständig tappen. Da das Tool im RGB-Raum mischt, verläuft der Pfad nicht durch den Farbton, sondern als gerade Linie durch den RGB-Würfel. Wenn du reines Rot mit reinem Grün mischst, entsteht eine matschige Braun-Gelb-Zone statt sattem Gelb. Deshalb empfehle ich, Farben mit ähnlicher Helligkeit oder Sättigung zu wählen, wenn du vorhersehbare Ergebnisse willst. Füge stattdessen eine dritte Zwischenfarbe hinzu und mische in zwei Durchgängen. Das ergibt eine kontrollierte Kurve ohne Grauschleier.

A Meiden Sie Paare von gegenüberliegenden Seiten des Farbkreises mit stark unterschiedlicher Helligkeit. Blau #0033CC und Orange #FF8800 laufen bei einem 12-Schritt-Verlauf um Schritt 6 herum durch einen matten Braunton. Besser funktionieren Töne mit ähnlicher Helligkeit: Petrol #008080 zu Koralle #FF7F50 ergibt einen saubereren Pfad. Bei hohem Kontrastbedarf eine dritte Farbe als Zwischenstation einfügen und zweimal blenden. Kostet 30 Sekunden extra, rettet aber den Hero-Bereich.

A Ja, du kannst jeden kopierten HEX-Code sofort in dein Stylesheet einfügen. Der Dunkelmodus verlangt oft nach feinen Abstufungen, daher stelle ich die Schritte meistens auf 10 und nutze Schritt 4 und 8 für Oberflächen. Teste die Werte am besten direkt im Browser-Inspector, bevor du alles live stellst.

A Meistens ja, aber die Verteilung der Zwischenstufen verändert sich je nach Ausgangston spürbar. Wenn du ein helles Gelb an den Anfang setzt und ein dunkles Lila ans Ende, verschiebt sich das optische Gewicht über die 10 Farbfelder. Letzte Woche habe ich die Startwerte getauscht und gemerkt, dass die helleren Nuancen zu früh dominieren. Vertausche einfach die Eingaben, falls dein Verlauf zu einseitig wirkt.