Zum Inhalt springen
Toolars
Erkunden
Fehler melden

Design · Lokal-Werkzeug

Farbmischer

Color Mixer

Mische zwei Farben im sRGB-Farbraum mit einstellbarem Gewicht und prüfe das Ergebnis als HEX, rgba() und CSS-Deklaration — Alpha bleibt erhalten.

Aufgabenpfad / von der Eingabe zum Ergebnis

Gib die beiden Farben ein

Läuft lokal · Nichts wird hochgeladen

Wie Farbmischer funktioniert, Datenschutz und verwandte Tools

Aufgabenpfad / von der Eingabe zum Ergebnis

So mischst du zwei Farben

  1. 01

    Gib die beiden Farben ein

    Fülle Erste Farbe und Zweite Farbe mit Hex-Werten — #RGB, #RGBA, #RRGGBB und #RRGGBBAA werden alle akzeptiert, transluzente Eingaben sind also in Ordnung. Der Arbeitsbereich öffnet mit #6D5EF8 gegen #22C55E.

  2. 02

    Berechnung

    Wähle die Berechnung: Gewichtete Mischung interpoliert kodierte sRGB-Kanäle mit vormultipliziertem Alpha. Überlagern legt die erste Farbe über die zweite; die Reihenfolge zählt, und in diesem Modus gibt es keinen Gewichtungsregler.

  3. 03

    Mische die Farben

    Bei Gewichteter Mischung stelle das Gewicht der zweiten Farbe von 0 % (nur die erste) bis 100 % (nur die zweite) ein und klicke Farben mischen. Bei Überlagern führt derselbe Knopf die Ebenenberechnung aus. Jede Änderung an Farbe, Methode oder Gewicht löscht das alte Ergebnis.

  4. 04

    Lies das Ergebnisfeld

    HEX, RGBA, CSS und Vorschau teilen sich 8-Bit-Kanäle und Alpha. Transparenz wird über der Seite gezeigt; die Ausgabe behält Alpha.

  5. 05

    Probiere die Beispielmischung

    Drücke Beispiel laden, um #F97316 mit #7C3AED bei einem Gewicht von 35 % zu mischen — ein warmes Orange, das Richtung Violett driftet —, damit du den ganzen Ablauf siehst. Zurücksetzen holt das Standard-Paar bei 50 % zurück.

  6. 06

    Kopiere oder lade das Ergebnis herunter

    Kopiere oder lade toolars-color-mix.json herunter mit beiden Ausgangsfarben, der Methode, dem sRGB-Farbraum, HEX, RGBA und einer CSS-Deklaration. secondColorWeight ist nur bei gewichteter Mischung enthalten. Alle Ausgabeformen teilen dasselbe 8-Bit-Ergebnis.

Tool-Fakten

Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos

Deine Eingabe bleibt im Browser.

Farbmischer nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.

Lokale Ausführung

Läuft im aktuellen Browser-Tab.

Keine versteckte Verarbeitung

Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.

Kein Konto erforderlich

Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.

Sofortiges Zurücksetzen

Leere den Tab, und die aktiven Arbeitsdaten sind weg.

Was Farbmischer tatsächlich tut

Für einen Übergang zwischen Marken-Violett und Grün wähle Gewichtete Mischung und passe den Anteil der zweiten Farbe an. Für eine transparente Ebene über einer Hintergrundfarbe nutze Überlagern: Ebene zuerst, Hintergrund danach. Prüfe Alpha und Vorschau auf dem geplanten Seitenhintergrund, bevor du JSON exportierst; beide Methoden beantworten verschiedene Fragen.

Häufige Fragen

Wie funktioniert der Gewichts-Schieberegler?
Der Regler erscheint nur bei Gewichteter Mischung. Bei 0 % gilt die erste Farbe, bei 100 % die zweite. Dazwischen werden kodierte sRGB-Kanäle mit vormultipliziertem Alpha interpoliert und auf 8 Bit gerundet. Überlagern ignoriert das Gewicht und legt die erste Farbe über die zweite.
Behandelt der Mixer Transparenz?
Ja. Gewichtetes Mischen interpoliert mit vormultipliziertem Alpha; Überlagern setzt die erste Farbe auf die zweite. Vergleichen Sie Alpha und Schichtreihenfolge auf dem vorgesehenen Hintergrund.
Wie werden die Kanäle gerundet?
HEX, RGBA, CSS und Vorschau teilen sich 8-Bit-Kanäle und Alpha. Transparenz wird über der Seite gezeigt; die Ausgabe behält Alpha.
Warum hat sich das Ergebnisfeld geleert?
Eine Änderung an einer Farbe, der Berechnungsmethode oder dem Gewicht löscht das alte Ergebnis, damit es nicht für die aktuellen Einstellungen gehalten wird. Klicke erneut auf Farben mischen.
Was genau enthält der Export?
Kopiere oder lade toolars-color-mix.json herunter mit beiden Ausgangsfarben, der Methode, dem sRGB-Farbraum, HEX, RGBA und einer CSS-Deklaration. secondColorWeight ist nur bei gewichteter Mischung enthalten. Alle Ausgabeformen teilen dasselbe 8-Bit-Ergebnis.
Werden die Daten irgendwohin gesendet?
Nein. Die Mischung wird vollständig in diesem Browser-Tab berechnet, Eingaben und Ergebnisse verlassen ihn nie, und es ist kein Konto nötig.

Weiterlesen

Weiter in Design

Verwandte Aufgaben statt Sackgasse.

Wechsle in einen anderen fokussierten Arbeitsbereich, ohne zum vollständigen Index zurückzukehren.

Generator für CSS-Ladeanimationen

CSS Loader Generator

Gestalte Ladeindikatoren als Ring oder Punkte mit 24 bis 160 px Rahmen und 0,2 bis 4 Sekunden Zyklus — mit Live-Vorschau und Code zum Kopieren.

Erstellen

CSS-Checkbox-Generator

CSS Checkbox Generator

Style eigene Checkboxen auf Basis eines nativen input-Elements — mit Fokus-Umriss, Disabled-Zustand und Reduced-Motion-Variante im kopierfertigen CSS.

Erstellen

CSS-Switch-Generator

CSS Switch Generator

Entwirf Umschalter aus reinem CSS mit frei bemessener Schiene und Regler, 180-ms-Transition und Reduced-Motion-Fallback — Code zum Kopieren.

Erstellen

CSS-clip-path-Generator

CSS Clip Path Generator

Bearbeite Polygonpunkte per Ziehen, Tastatur oder Koordinaten. Vier Vorlagen und lokaler Export als clip-path-Deklaration oder vollständiges CSS.

Erstellen