Farbmischer

Ein Farbmischer mischt zwei Farben zu einer neuen und zeigt Ihnen das Ergebnis in HEX, RGB und HSL an. Sie geben ihm eine erste Farbe und eine zweite Farbe in jeder gängigen Syntax (einen Hex-Code wie #4466EE, einen rgb () oder hsl () Wert oder einen CSS-Namen wie Koralle), wählen aus, wie viel von der zweiten Farbe eingeklappt werden soll, und es berechnet die gemischte Farbe sofort Es baut auch einen Gradienten von Zwischenschritten zwischen den beiden Farben auf, sodass Sie den gesamten Übergang und nicht einen einzelnen Mittelpunkt sehen können.

Der Farbverlaufsstreifen dient gleichzeitig als Farbmixerdiagramm Geben Sie #FF0000 und #0000FF ein, stellen Sie Gradient-Schritte auf 3 ein und drücken Sie Mix Colors: Der Streifen zeigt fünf Farbfelder, #FF0000, #BF0040, #800080, #4000BF und #0000FF, und das gemischte Ergebnis bei einem Verhältnis von 50% ist #800080. Als primärer Farbmischer mischt er Licht, nicht Farbe. Rot und Gelb ergeben orange #8000, aber blau und gelb geben Sie graue Farbe ein #80808080800 Da ist die Farbe da ist nicht nur die Farbe.

Die geradlinige Mischung ist ein gewichteter Durchschnitt: bei einem Verhältnis von 50 Prozent trägt jede Farbe gleichermaßen bei, und das Werkzeug interpoliert jeden roten, grünen und blauen Kanal linear zwischen den beiden Eingängen Schieben Sie das Verhältnis in Richtung 0 und Sie behalten die erste Farbe; schieben Sie es in Richtung 100 und Sie landen auf der zweiten Dies ist die gleiche Mathematik, die CSS für einen Two-Stop-Gradienten verwendet, weshalb der Mittelpunkt eines Rot-zu-Blau-Gradienten das Lila ist, das dieses Tool meldet.

Über eine einfache Mischung hinaus bietet der Mixer sechs trennbare Mischungsmodi, die in der W3 C Compositing and Blending Spezifikation definiert sind (Multiplizieren, Bildschirm, Überlagern, Verdunkeln, Aufhellen und Differenz) plus einen einfachen Durchschnitt Dies sind die gleichen Operationen, die Bildbearbeiter wie Photoshop und GIMP zwischen den Schichten anwenden, Multiplizieren Sie immer verdunkelt (Rot mal Blau ist Schwarz), Bildschirm hellt immer auf (Rot auf Blau ist Magenta), und Differenz gibt Ihnen den Kanal-für-Kanal-Abstand zwischen zwei Farben Das Verhältnis wirkt dann wie Schichttrübung, wobei gesteuert wird, wie stark das Mischergebnis über die erste Farbe aufgetragen wird.

Alles läuft clientseitig in Ihrem Browser Die Farben, die Sie eingeben, verlassen niemals die Registerkarte, und weil die Farbmathematik reine Arithmetik ist, funktioniert das Tool offline, sobald die Seite geladen wurde Designer greifen nach einem Mixer, um eine Farbe auf halbem Weg zwischen einer Markenprimär - und einer Neutral, Tönungs - und Akzentskala zu erstellen, oder um eine Vorschau anzuzeigen, wie sich zwei Ebenen kombinieren lassen, bevor sie sich in eine Designdatei festlegen Entwickler verwenden es, um Gradientenstopps zu generieren, Hover-Zustände zu berechnen und ein gemischtes Ergebnis direkt in einen HEX - oder HSL-Wert zu übersetzen, den sie in CSS einfügen können.