Softonic

Farbmischer

Schritt 1 / 2
Ergebnisse

Gib zwei HEX-Farben ein, wähle die Anzahl der Schritte, und der Farbmischer zeigt die Startfarbe, die Zielfarbe und die gleichmäßig dazwischen verteilten Farbtöne. Das ist praktisch für schnelle UI-Farbskalen, Gradientenplanung, Icon-Zustände und die Kontrolle exakter HEX-Stopps vor der Weiterarbeit in CSS oder einem Design-Tool.

So wird die HEX-Mischung berechnet

  1. 1

    Zwei HEX-Farben eingeben

    Nutze 3- oder 6-stellige HEX-Werte, mit oder ohne #. Beispiele: #FF6B35, #1E3A8A, F60.

  2. 2

    2-20 Schritte wählen

    Das erste Farbfeld ist die erste Farbe und das letzte Farbfeld die zweite; die mittleren Farbfelder werden dazwischen berechnet.

  3. 3

    RGB-Kanäle interpolieren

    Das Tool wandelt HEX in rote, grüne und blaue Kanalwerte um, interpoliert jeden Kanal linear und rundet auf die nächste ganze Zahl.

  4. 4

    HEX-Schritte ablesen

    Jedes Farbfeld wird mit einem 6-stelligen HEX-Code in Großbuchstaben angezeigt, den du auswählen und in Design oder Stylesheet weiterverwenden kannst.

Was dieses Tool macht

Der Farbmischer arbeitet nur mit standardmäßiger HEX-Farbnotation. Er akzeptiert Kurz-HEX wie #F60 und vollständige HEX-Werte wie #FF6B35, normalisiert die Werte intern und gibt jedes Ergebnis als 6-stelligen HEX-Code in Großbuchstaben aus.

Die Mischung ist eine einfache lineare Interpolation in RGB/sRGB-Kanälen:

  1. Jede HEX-Farbe in R-, G- und B-Werte von 0 bis 255 umwandeln.
  2. Für jeden Schritt t von 0 bis 1 berechnen.
  3. Für jeden Kanal Start + (Ende - Start) * t verwenden.
  4. Jeden Kanal auf die nächste ganze Zahl runden und das Ergebnis zurück in HEX umwandeln.

Da die Endpunkte enthalten sind, bedeuten 2 Schritte “nur Start und Ende”. Mit 7 Schritten von #FF6B35 zu #1E3A8A lautet die Ausgabe:

Schritt Position HEX
1 0 % #FF6B35
2 16,67 % #DA6343
3 33,33 % #B45B51
4 50 % #8F5360
5 66,67 % #694A6E
6 83,33 % #44427C
7 100 % #1E3A8A

Gute Einsatzfälle

  • UI-Zustandsskalen: Erstelle Zwischenfarben für Hover, Aktiv, Ausgewählt oder Deaktiviert.
  • Gradientenplanung: Lege exakte HEX-Stopps fest, bevor du in einem anderen Tool einen CSS-Gradienten schreibst.
  • Icon- und Illustrationsvarianten: Halte eine kleine Gruppe verwandter Farben konsistent.
  • Design-QA: Vergleiche den kanalbasiert berechneten Mittelpunkt statt ihn nach Augenmaß zu schätzen.

Wichtige Grenzen

Dieser Mischer akzeptiert kein rgb(), hsl(), Farbnamen, Alpha-Werte oder 8-stellige HEX-Codes. Er exportiert kein RGB, HSL, LAB, LCH, keine CSS-Snippets, Kontrastprüfungen oder Barrierefreiheitsbewertungen. Wenn du das brauchst, verwende nach den HEX-Stopps einen Konverter, Kontrastchecker oder Gradientengenerator.

Häufig gestellte Fragen

Nur HEX: 3 oder 6 Stellen, mit oder ohne führendes #. Das Tool liest kein rgb(), hsl(), keine Alpha-Kanäle und keine Farbnamen.

Ja. Der erste Schritt ist die erste Farbe und der letzte Schritt die zweite Farbe. Alle übrigen Schritte sind die dazwischen interpolierten Farben.

Die Mischung wird Kanal für Kanal in RGB/sRGB berechnet. Das ist vorhersehbar und gut in Code wiederverwendbar, aber nicht identisch mit wahrnehmungsbezogener LAB- oder LCH-Interpolation.

Nein. Es zeigt nur Farbfelder und HEX-Codes. Nutze die erzeugten HEX-Werte in deinem CSS oder prüfe sie mit einem Kontrastchecker, wenn Barrierefreiheitswerte wichtig sind.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen, dekodiert 8 Bits auf einmal.