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.

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 die trennbaren Mischungsmodi, die in der W3 C Compositing and Blending Spezifikation definiert sind: multiplizieren, screen, overlay, dunklen, aufhellen, different, and average Dies sind die gleichen Operationen, die Bildbearbeiter wie Photoshop und GIMP zwischen den Schichten anwenden, multiplizieren immer dunkler (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 gemischte Ergebnis über die erste Farbe angewendet 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.