Ich verbringe überraschend viel meines Tages irgendwo zwischen einer Designdatei und einem Stylesheet, stupse eine Farbe auf eine andere zu, bis ein Hover-Zustand, ein Rand oder ein Farbverlaufsstopp richtig aussieht Jahrelang habe ich die Arithmetik in meinem Kopf gemacht oder sie in einem Picker mit Augen verbunden, was so lange in Ordnung ist, bis man die genaue Farbe auf halbem Weg zwischen einem Markenblau und einem warmen Neutralbereich benötigt und man sie als Hex-Code braucht, den man einfügen kann Also habe ich ein gebaut Farbmischer auf Toolz.dev Das verbindet zwei Farben mit einem von Ihnen kontrollierten Verhältnis, bietet die gleichen Mischungsmodi, die ein Bildeditor verwendet, und gibt Ihnen das Ergebnis in HEX, RGB und HSL. Dies ist die Anleitung dazu und dazu, was & quot; mischen von Farben" bedeutet auf einem Bildschirm.
tl; dr: Ein Farbmischer mischt zwei Farben zu einer Die Toolz Farbmischer Interpoliert zwei Farben mit einem einstellbaren Verhältnis, unterstützt die W3 C-trennbaren Mischungsmodi (Mehrfach, Bildschirm, Overlay, Verdunkeln, Aufhellen, Differenz, Durchschnitt), baut einen Gradienten von Zwischenschritten zwischen den Farben auf und gibt jedes Ergebnis als HEX, RGB, und HSL aus. Es akzeptiert Hex, rgb (), hsl () und CSS-Farbnamen und läuft vollständig clientseitig.
Wie mischt man zwei Farben auf einem Bildschirm?
Die einfache Antwort ist ein gewichteter Durchschnitt der beiden Farben' rote, grüne und blaue Kanäle. Zum Mischen von Rot (255, 0, 0) und blau (0, 0, 255) Zu gleichen Teilen mittelst du jeden Kanal: rot wird (255+0)/2 = 128Grün bleibt 0Blau wird (0+255)/2 = 128Geben (128, 0, 128)(das ist das Hex #800080Ein durchgezogenes Lila Verschiebe das Gewicht in Richtung einer Seite und du rutschst entlang der Linie zwischen den beiden Farben Genau das macht der Verhältnisschieber: Bei 0 Prozent behältst du die erste Farbe, bei 100 Prozent landest du auf der zweiten, und 50 Prozent ist die gerade Aufteilung.
Dies ist die gleiche Interpolation, die ein CSS-Gradient mit zwei Stopps verwendet, weshalb der Mittelpunkt von linear-gradient(red, blue) Ist das lila Der Mixer macht die Beziehung explizit, indem er auch den Farbverlauf zwischen Ihren beiden Farben als Streifen von Mustern zeichnet, die Sie jeweils als Zwischenstopp kopieren können Wenn Sie jemals wollten & quot; drei Farben gleichmäßig zwischen diesen beiden, & quot; der Farbverlaufsstreifen ist der schnellste Weg, um sie zu erhalten.
Ein ehrlicher Vorbehalt, denn er überrascht die Leute: Mittelung der RGB-Kanäle ist nicht, wie sich Pigmente vermischen Auf einem Bildschirm sind Farben leicht und kombinieren sich additiv; in einem Farbset sind sie Pigmente und kombinieren subtraktivMischen von roten und grünen Lichttrends zu einem matten Oliv statt dem lebhaften Gelb, das man von Farbe bekommen würde, weil man Lichtwerte mittelt, kein Pigment mischt Das ist kein Fehler im Werkzeug, es liegt in der Natur von sRGB, und die Lösung, wenn man ein lebendigeres Ergebnis haben möchte, ist, Farbtöne zu mischen, die näher beieinander auf dem Rad sitzen Die Farbkonverter Handlich neben dem Mixer ist, wenn Sie die gleiche Farbe in verschiedenen Formaten sehen möchten, während Sie über Farbton nachdenken.
Was ist der Unterschied zwischen Mix und den Blendmodi?
Mix ist der oben beschriebene gewichtete Durchschnitt: er landet immer irgendwo auf der Geraden zwischen den beiden Farben Die Blendmodi sind etwas ganz anderes Es sind die Layer-Blend-Operationen von Bildbearbeitern, standardisiert für das Web im W3 C Compositing und Blending Level 1 Spezifikation, und jeder kombiniert die Kanäle mit einer anderen Formel und nicht mit einem einfachen Durchschnitt.
| Mode | Pro-Kanal-Formel (Werte 0 bis 1) | Effekt |
|---|---|---|
| Mischen | b (gewichtet nach Verhältnis) |
Gewichteter Durchschnitt, landet zwischen den beiden Farben |
| Multiplizieren | a x b |
Immer dunkler; Weiß lässt eine Farbe unverändert, Schwarz zwingt Schwarz |
| Bildschirm | a + b - a x b |
Immer leichter; die Umkehrung der Multiplikation |
| Überlagerung | Multiplizieren oder Bildschirm für Basis | Erhöht den Kontrast |
| Verdunkeln | min(a, b) |
Hält den dunkleren Kanal |
| Leichter | max(a, b) |
Hält den leichteren Kanal |
| Unterschied | abs(a - b) |
Kanalabstand; identische Farben ergeben Schwarz |
| Durchschnittlich | (a + b) / 2 |
Der ungewichtete Mittelwert beider |
Die Intuition, die es wert ist, getragen zu werden: multiplizieren verdunkelt sich immer, weil die Multiplikation zweier Brüche einen kleineren Bruch ergibt, also ist Rot mal Blau schwarz (jede Farbe fehlt der Kanal, den der andere hat).Bildschirm wird immer aufgehellt, weil er auf die invertierten Werte multipliziert wird Differenz gibt Ihnen den Kanal-für-Kanal-Abstand, weshalb das Mischen einer Farbe mit sich selbst unter Differenz reines Schwarz ergibt Im Mischer verhält sich der Verhältnisschieber dann wie Schichttrübung: Er verblasst das Mischergebnis über die erste Farbe, sodass Sie den Effekt von subtil auf voll wählen können.
Was steuert der Ratio-Slider?
Das Verhältnis stellt ein, wie stark die zweite Farbe, oder das Blended-Ergebnis des gewählten Modus, über die erste Farbe aufgetragen wird Stellen Sie sich das als Deckkraft auf der obersten Schicht vor Bei 0 Prozent ist die oberste Schicht unsichtbar und Sie sehen die erste Farbe unberührt, bei 100 Prozent ist die oberste Schicht vollständig undurchsichtig und Sie erhalten die komplette Mischung für diesen Modus Bei 50 Prozent erhalten Sie eine gleichmäßige Aufteilung Bei einfacher Mischung reduziert sich dies auf den bekannten gewichteten Durchschnitt; bei einem Modus wie Multiply lässt es Sie eher eine sanfte Verdunkelung als den vollen Effekt anwenden.
Dieses einheitliche Modell ist bewusst, denn es bedeutet, dass ein Schieberegler in jedem Modus die gleiche konzeptionelle Arbeit erledigt. In der Praxis verwende ich niedrige Verhältnisse, um eine Farbe leicht in Richtung einer anderen zu schieben (ein Schwebezustand, der & quot; die Taste, aber 15 Prozent in Richtung Black") und hohe Verhältnisse, wenn ich die vollständige Mischung möchte. Die Gradientengenerator Passt dort an, wo der Mixer aufhört, wenn Sie ein Paar Mischfarben in einen vollständigen Multi-Stop-CSS-Gradienten verwandeln möchten.
Wie bekomme ich die genaue Farbe auf halbem Weg zwischen zwei Farben?
Stellen Sie den Modus auf Mix und das Verhältnis auf 50 ein, und das Ergebnis ist der genaue Mittelpunkt. Sie können ihn auch direkt vom Farbverlaufsstreifen ablesen: Der mittlere Farbverlauf ist die halbe Farbe. Wenn Sie mehrere gleichmäßig verteilte Farben zwischen zwei Endpunkten benötigen, erhöhen Sie die Farbverlaufsschrittzahl und kopieren Sie die Farbfelder an den gewünschten Positionen. Dies ist die alltägliche Aufgabe, für die der Mischer gebaut wurde, egal ob Sie Farbtöne für eine Palette erzeugen, Datenvisualisierungsfarben ablegen oder den Neutralleiter finden, der zwischen zwei Markenfarben liegt.
Um ganze Familien einer einzigen Farbe zu bilden, anstatt zwei zu vermischen, ist die Farbschattierungen Generator Passt besser, da es eine Farbe in Richtung Weiß, Schwarz und Grau mischt, um Farbtöne, Schattierungen und Töne zu erzeugen. Und wenn Sie Farben für Text oder Benutzeroberfläche auswählen, führen Sie das Ergebnis durch Farbwähler Und eine Kontrastprüfung, denn eine Farbe, die sich schön mischt, kann trotzdem eine Lesbarkeitsschwelle nicht bestehen Der breitere Arbeitsablauf, von der Kommissionierung über die Kontrolle bis zum Versand, ist in der Webentwickler-Toolkit Führung.
Warum sehen meine Mischfarben manchmal matschig oder dunkel aus?
Zwei Dinge verursachen dies, und beide sind über den Farbraum und nicht über das Werkzeug Das erste ist die Additiv-gegen-Subtraktiv-Fehlpaarung, die bereits erwähnt wurde: Mittelung entfernter Farbtöne in RGB driftet in Richtung Grau, also entgegengesetzte Farben auf dem Rad mischen sich zu etwas Dumpfem Das zweite ist, dass sRGB-Werte gammakodiertes, nicht lineares Licht sind Ein echter physikalischer Durchschnitt des Lichts würde sich zuerst in linearen Raum umwandeln, durchschnittlich, dann zurückwandeln, was die Mittelpunkte heller hält. Die meisten Werkzeuge, CSS-Gradienten und Bildbearbeiter interpolieren direkt in Gamma-kodiertem sRGB, weil es schnell und vorhersehbar ist und mit dem Farbverlauf übereinstimmt, also dieser OK-Mischer, wenn Sie den heller-Mixt-PerSS-Mixen, um einen heller-Mixen-Mixen-Per-Mode mischen-Mix-Mode. Datenschutz Online-Tools Ratgeber erklärt, warum, ob schlammige Mittelpunkte oder nicht, diese Mathematik in Ihrem Browser statt auf einem Server zu machen, die richtige Voreinstellung für Designarbeiten ist, die Sie lieber lokal halten möchten.
Häufig gestellte Fragen
Wie mischt man zwei Farben?
Um zwei Farben zu mischen, mittelst du ihre roten, grünen und blauen Kanäle, gewichtet mit dem gewünschten Anteil jeder Farbe. Eine 50/50-Mischung aus Rot (255, 0, 0) und Blau (0, 0, 255) ergibt durchschnittlich (128, 0, 128), was lila ist. Dieses Tool führt diese Interpolation für dich durch und ermöglicht es dir, das Gewicht mit dem Verhältnisschieber zu verschieben, sodass du irgendwo zwischen den beiden Farben landen kannst, anstatt nur den genauen Mittelpunkt.
Was ist der Unterschied zwischen Mix und Multiplizieren?
Mix ist ein gewichteter Durchschnitt, der zwischen den beiden Farben landet, so ergibt das Mischen von Rot und Blau Lila Multiplizieren kombiniert sie so, wie es überlappende Tinten - oder Lichtfilter tun, multipliziert die Kanalwerte, so dass es immer eine Farbe erzeugt, die so dunkel wie oder dunkler als beide Eingänge ist Multiplizieren Rot und Blau ergibt Schwarz, denn jeder Farbe fehlt der Kanal, den die andere hat Multiplizieren ist ein Mischmodus aus der Bildbearbeitung, kein einfacher Durchschnitt.
Warum ergibt das Mischen zweier bunter Farben manchmal ein schlammiges Ergebnis?
Denn die Mittelung von RGB-Kanälen bewegt das Ergebnis immer dann in Richtung Grau, wenn die beiden Farben weit voneinander entfernt auf dem Farbkreis sitzen Rot und Grün durchschnittlich zu einem matten Olivbraun statt zu einem lebhaften Gelb, da sich Bildschirmfarben als Licht vermischen, während das lebhafte Gelb, das man erwarten könnte, durch das Mischen von Pigmenten entsteht Für eine lebendigere Mischung mischen Sie Farben, die einen engeren Farbton haben, oder versuchen Sie es mit dem Bildschirmmodus, der die Ergebnisse heller hält.
Kann ich Farben in HSL statt in RGB mischen?
Dieser Mixer interpoliert in RGB, was standardmäßig CSS-Gradienten und Bildbearbeiter tun, und meldet das Ergebnis auch in HSL. Das Mischen in RGB ist vorhersehbar und entspricht dem, was ein CSS-Gradient mit zwei Stopps ergibt. Das Interpolieren des Farbtons in HSL kann sich über weite Strecken um das Farbrad erstrecken und unerwartete Farbtöne zwischen den Farbtönen erzeugen, weshalb die RGB-Interpolation die sicherere Standardeinstellung für eine Allzweckmischung ist.
Was ändert sich der Ratio-Slider?
Das Verhältnis setzt ein, wie stark die zweite Farbe, oder das Blended-Ergebnis über die erste aufgetragen wird, bei 0 Prozent erhält man die erste Farbe unverändert, bei 100 Prozent die volle zweite Farbe oder volle Mischung für den gewählten Modus, und bei 50 Prozent erhält man eine gleichmäßige Aufteilung, bei den Blend-Modi verhält es sich wie Schichttrübung in einem Bildeditor, wobei die Blended-Farbe über der Basis eingeblendet wird.
Wie bekomme ich die Farbe auf halbem Weg zwischen zwei Farben?
Stellen Sie den Modus auf Mix und das Verhältnis auf 50 Prozent ein, und das Ergebnis ist der genaue Mittelpunkt Sie können es auch vom Verlaufsstreifen ablesen, wo der mittlere Farbverlauf die halbe Farbe ist, fügen Sie zur feineren Steuerung weitere Schritte zum Farbverlauf hinzu und kopieren Sie, welche Zwischenvariante mit der Position übereinstimmt, die Sie zwischen den beiden Farben benötigen.
Wofür werden Mischmodi wie Screen und Overlay verwendet?
Es sind die Layer-Mix-Modi von Bildbearbeitern, definiert für das Web in der W3 C Compositing and Blending Spezifikation Bildschirm hellt auf und wird für Leuchten und Lichter verwendet, Multiply verdunkelt und wird für Schatten und Tönungen verwendet, und Overlay erhöht den Kontrast, indem es die beiden kombiniert, mit der Vorschau in einem Mischer können Sie vorhersagen, wie sich zwei farbige Schichten kombinieren werden, bevor Sie es in CSS oder einem Design-Tool anwenden.
Welche Farbformate akzeptiert der Mixer?
Der Mixer akzeptiert Hex-Codes (drei, sechs oder acht Ziffern), rgb () und rgba () Werte, hsl () und hsla () Werte und gängige CSS-Farbnamen wie Koralle oder rebeccapurple Jede Eingabe hat einen nativen Farb-Swatch, den Sie klicken können, um visuell auszuwählen, und jedes Ergebnis wird in HEX, RGB und HSL angezeigt, sodass Sie kopieren können, welches Format Ihr Stylesheet benötigt.
Ist der Farbmixer kostenlos und privat?
Ja. Der Farbmixer ist völlig kostenlos ohne Anmeldung, ohne Wasserzeichen, und ohne Nutzungsbeschränkungen, und jede Berechnung geschieht in Ihrem Browser Die von Ihnen eingegebenen Farben werden nie hochgeladen, so dass nichts, was Sie mischen, Ihr Gerät verlässt, und weil die Mathematik lokal läuft, funktioniert das Tool weiter, wenn Sie Ihre Verbindung verlieren, nachdem die Seite geladen wurde.
