Farbmisch-Rechner

Bewegen Sie den Schieberegler, um zwischen zwei digitalen Farben zu interpolieren.

Farbmisch-Rechner

Ein browserbasierteres Ergebnis zur Planung und als Referenz.

Farbe AFarbe B Mischverhältnis

CSS / HEX

RATGEBER

Was vor der Verwendung zu prüfen ist

Wann dieses Tool nützlich ist

Verwenden Sie dieses Tool, um eine Zwischenfarbe für die Benutzeroberfläche zu finden oder einen Übergangsschritt zwischen zwei Zuständen zu erstellen. Wählen Sie die Farben A und B aus, dann bewegen Sie den Schieberegler, um festzulegen, wie viel von B im Ergebnis enthalten ist.

Wie das Ergebnis erzeugt wird

Das Tool interpoliert jeden 0-255-sRGB-Kanal linear und gibt den resultierenden RGB-Wert als HEX zurück. Dabei handelt es sich um eine numerische Bildschirmfarbmischung, nicht um Pigmentmischung oder ein gamma-korrigiertes Compositing-Modell.

Praxisbeispiel und Interpretation

Mischen Sie #3366FF und #FF6655 zu 50 Prozent, um den Mittelpunkt ihrer drei Kanäle zu erhalten. Fügen Sie das resultierende HEX in einen Hover-Zustand ein, und führen Sie dann eine separate Kontrastprüfung gegen den echten Hintergrund durch.

Anwendungsbereich und Einschränkungen

Eine Design-App kann einen anderen Mittelpunkt liefern, wenn sie einen anderen Farbraum oder Mischmodus verwendet. Behandeln Sie dieses Ergebnis nicht als CMYK-, Spot-Color-, Opazitäts- oder physikalische Farbformel.

Häufig gestellte Fragen

Wie übertrage ich eine Farbe vom Farb-Mixing-Rechner in eine andere App?

Verwenden Sie die Kopfschaltfläche unter dem Ergebnis, um CSS-, HEX- oder HSL-Text zu kopieren. Stellen Sie sicher, dass die Ziel-App dasselbe Farbformat interpretiert.

Entspricht eine Bildschirmfarbe aus dem Farbmischungsrechner dem Druck?

Nicht automatisch. Emissive RGB-Bildschirme sowie reflektierendes Papier und Tinte verwenden unterschiedliche Gamuts und Mischmodelle, daher werden weiterhin Druckprofile und Proofs benötigt.

Kann ich ein Design-Token allein auf Basis des Farbmischungsrechners freigeben?

Nutzen Sie es als Kandidaten, testen Sie anschließend den echten Hintergrund, den Dark Mode, Interaktionszustände und den Textkontrast, bevor Sie einen Token benennen und freigeben.