Mit der CSS-Funktion color-mix() können Sie Farben in einem der unterstützten Farbräume direkt über den CSS-Code mischen.
Vor dem color-mix() haben Entwickler CSS-Präprozessoren oder calc() für Farbkanäle verwendet, um eine Farbe abzudunkeln, aufzuhellen oder zu entsättigen.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass hat großartige Arbeit geleistet, um der CSS-Spezifikation für Farben einen Schritt voraus zu sein. Es gibt jedoch keine wirkliche Möglichkeit, Farben in CSS zu mischen. Dazu müssen Sie die partiellen Farbwerte berechnen. Hier ist ein reduziertes Beispiel dafür, wie CSS heute eine Kombination simulieren könnte:
.color-mixing-with-vanilla-css-before {
--lightness: 50%;
--red: hsl(0 50% var(--lightness));
/* add "white" to red
by adding 25% to the lightness channel
*/
--lightred: hsl(0 50% calc(var(--lightness) + 25%);
}
Mit color-mix() können Sie in CSS Farben mischen. Entwickelnde können auswählen, in welchen Farbraum sie
mischen und wie dominant die einzelnen Farben sein sollen.
.color-mixing-after {
/* equally mix red with white */
--red-white-mix: color-mix(in oklab, red, white);
/* equally mix red with white in srgb */
--red-white-mix-srgb: color-mix(in srgb, red, white);
}
Das wollen wir. Flexibilität, Leistung und APIs mit vollem Funktionsumfang Lieblingsmusik
Farben in CSS mischen
CSS ist in einem mehreren Farbraum und Farbraum vorhanden. Daher ist es nicht optional, den Farbraum für den Misch festzulegen. Darüber hinaus können verschiedene Farbräume die Ergebnisse einer Mischung drastisch ändern. Wenn Sie also die Auswirkungen eines Farbraums kennen, können Sie die gewünschten Ergebnisse erzielen.
Eine interaktive Einführung bietet dieses color-mix()-Tool:
– Sehen Sie sich die Auswirkungen jedes Farbraums an.
– Untersuchen Sie die Auswirkungen der Farbinterpolation beim Mischen in einem zylindrischen Farbraum (lch, oklch, hsl und hwb).
– Ändern Sie die zu mischenden Farben, indem Sie auf eines der beiden oberen Farbfelder klicken.
- Verwenden Sie den Schieberegler, um das Mischverhältnis zu ändern.
– Der CSS-Code von color-mix(), der unten verfügbar ist, wurde generiert.
Das Abmischen der verschiedenen Farbräume
Der Standardfarbraum für Mischungen und Farbverläufe ist oklab. Sie liefert konsistente Ergebnisse. Sie können auch alternative Farbräume angeben, um den Mix an Ihre Anforderungen anzupassen.
Sehen wir uns z. B. black und white an. Der Farbraum, den sie kombinieren,
macht keinen großen Unterschied. Das stimmt nicht.
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
Es hat einen großen Effekt!
Ein weiteres Beispiel sind blue und white. Ich habe mich für dieses Beispiel entschieden, weil
sich die Form eines Farbraums auf die Ergebnisse auswirken kann. In diesem Fall werden die meisten Farbräume lila, während sie von Weiß nach Blau wechseln. Sie zeigt auch, dass oklab ein so zuverlässiger Farbraum zum Mischen ist. Damit kommen die meisten Menschen am ehesten von einer Mischung aus Weiß und Blau (kein Lila) erwartet.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
Auch zum Erstellen von Farbverläufen ist es hilfreich, mit color-mix() die Effekte eines Farbraums zu erlernen. Mit der Syntax für Farbe 4 kann bei Farbverläufen auch der Farbraum angegeben werden, wobei ein Farbverlauf die Mischung über einen Bereich des Raums anzeigt.
.black-to-white-gradient-in-each-space {
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
Wenn Sie sich fragen, welcher Farbraum „der beste“ ist, gibt es hier keinen. Deshalb gibt es so viele
Optionen! Außerdem werden keine neuen Farbräume erfunden (siehe oklch und oklab), wenn einer der „besten“ wäre. Jeder Farbraum kann einen einzigartigen Moment haben, um zu glänzen und die richtige Wahl zu sein.
Wenn Sie beispielsweise ein lebhaftes Mix-Ergebnis erhalten möchten, verwenden Sie „hsl“ oder „hwb“. In der folgenden Demo werden zwei kräftige Farben (Magenta und Hellgrün) miteinander gemischt. „HsL“ und „HWB“ erzeugen beide ein lebendiges Ergebnis, während „srgb“ und „oklab“ ungesättigte Farben erzeugen.
Wenn Sie Konsistenz und Subtilität wünschen, verwenden Sie Oklab. In der folgenden Demo, in der Blau und Schwarz kombiniert werden, erzeugen HSL und HWB übermäßig leuchtende Farben und Farbveränderungen, während srgb und Oklab ein dunkleres Blau erzeugen.
Probieren Sie den color-mix() Playground fünf Minuten lang aus und testen Sie verschiedene Farben und Bereiche. So bekommen Sie ein Gefühl für die Vorteile der einzelnen Bereiche. Außerdem wird es noch weitere Hinweise zu Farbräumen geben, wenn wir uns alle an das Potenzial unserer Benutzeroberflächen anpassen.
Methode zur Farbinterpolation anpassen
Wenn Sie sich für einen zylindrischen Farbraum entschieden haben, also praktisch jeden Farbraum mit einem h-Farbraum, der einen Winkel akzeptiert, können Sie angeben, ob die Interpolation auf shorter, longer, decreasing und increasing eingestellt wird. Weitere Informationen dazu findest du in diesem HD-Farbleitfaden.
Hier ist das gleiche Beispiel für eine Blau-Weiß-Mischung, dieses Mal jedoch nur in den zylindrischen Räumen mit unterschiedlichen Farbinterpolationsmethoden.
Hier ist ein weiterer Codepen, den ich erstellt habe, um die Farbinterpolation zu visualisieren, insbesondere für Farbverläufe. Ich glaube, damit Sie besser verstehen, wie jeder Farbraum sein Mischergebnis erzielt, wenn die Farbinterpolation angegeben ist, sollten Sie eine Studie durchführen.
Mischung mit unterschiedlichen Farbsyntaxen
Bisher haben wir hauptsächlich Farben mit CSS-Namen wie blue und white gemischt. Mit der CSS-Farbmischung können Sie Farben aus zwei verschiedenen Farbräumen mischen. Dies ist ein weiterer Grund, warum es wichtig ist, den Farbraum für die Mischung anzugeben, da so der gemeinsame Raum für den Fall festgelegt wird, dass sich die beiden Farben nicht im selben Raum befinden.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
Im vorherigen Beispiel werden hsl und display-p3 in oklch konvertiert und dann gemischt. Ziemlich cool und flexibel.
Anpassung der Mischverhältnisse
Es ist nicht sehr wahrscheinlich, dass Sie beim Mischen dieselben Teile jeder Farbe erhalten möchten, wie die meisten bisher Beispiele gezeigt haben. Gute Neuigkeiten: Es gibt eine Syntax, mit der festgelegt wird, wie viel von jeder Farbe im resultierenden Mix zu sehen sein soll.
Zu Beginn dieses Themas finden Sie hier ein Beispiel für Mixe, die alle äquivalent sind und der Spezifikation entsprechen:
.ratios-syntax-examples {
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
}
Ich finde diese Beispiele, um die Grenzfälle gut zu verdeutlichen. Die ersten Beispiele zeigen, dass 50% nicht erforderlich sind, aber optional angegeben werden können. Das letzte Beispiel zeigt einen interessanten Fall, bei dem die Verhältnisse in der Summe 100% überschreiten und die Summe gleich 100 % beträgt.
Wenn nur eine Farbe ein Verhältnis angibt, wird von der anderen angenommen, dass es sich um den Rest von 100 % handelt. Hier einige weitere Beispiele, um dieses Verhalten zu veranschaulichen.
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */
In diesen Beispielen werden zwei Regeln veranschaulicht: 1. Wenn die Verhältnisse 100 % überschreiten, werden sie eingeschränkt und gleichmäßig verteilt. 1. Wenn nur ein Verhältnis angegeben ist, wird die andere Farbe auf 100 abzüglich dieses Verhältnisses festgelegt.
Die letzte Regel ist etwas weniger offensichtlich. Was passiert, wenn Prozentsätze für beide Farben angegeben werden und die Summe nicht 100 % ergibt?
color-mix(in lch, purple 20%, plum 20%)
Diese Kombination von color-mix() ergibt Transparenz, 40% Transparenz.
Wenn die Verhältnisse nicht 100 % ergeben, ist der resultierende Mix nicht undurchsichtig.
Keine der Farben wird vollständig gemischt.
color-mix() wird verschachtelt
Wie bei allen CSS wird die Verschachtelung gut und erwartungsgemäß verarbeitet. Innere Funktionen werden zuerst aufgelöst und geben ihre Werte an den übergeordneten Kontext zurück.
color-mix(in lch, purple 40%, color-mix(plum, white))
Sie können so viel wie nötig einbauen, um das gewünschte Ergebnis zu erzielen.
Ein helles und dunkles Farbschema erstellen
Erstellen wir mit color-mix() ein Farbschema!
Ein grundlegendes Farbschema
Im folgenden CSS wird basierend auf dem Hex-Farbcode der Marke ein helles und ein dunkles Design erstellt. Durch das helle Design werden zwei dunkelblaue Textfarben und eine sehr helle weiße Hintergrundfarbe erstellt. Bei einer Medienabfrage mit dunklen Einstellungen werden den benutzerdefinierten Eigenschaften dann neue Farben zugewiesen, sodass der Hintergrund dunkel und die Textfarben hell sind.
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
Dazu wird Weiß oder Schwarz zu einer Markenfarbe gemischt.
Zwischenfarbschema
Sie können noch einen Schritt weiter gehen, indem Sie mehr als helle und dunkle Designs hinzufügen. In der folgenden Demo wird bei Änderungen an der Optionsfeldgruppe ein Attribut für das HTML-Tag [color-scheme="auto"] aktualisiert. Dadurch können Selektoren ein Farbschema bedingt anwenden.
Diese Zwischendemo zeigt auch ein Farbdesignverfahren, bei dem alle Designfarben in :root aufgeführt sind. So sind sie leicht zu sehen und
bei Bedarf anzupassen. Später im Stylesheet können Sie die definierten Variablen verwenden. Dies erspart Ihnen die Suche nach Farbänderungen im Stylesheet, da diese alle im ersten :root-Block enthalten sind.
Interessantere Anwendungsfälle
Ana Tudor bietet eine gute Demo mit einigen Anwendungsfällen zum Lernen:
Fehler bei „color-mix()“ mit Entwicklertools beheben
color-mix() wird von den Chrome-Entwicklertools hervorragend unterstützt. Die Syntax wird erkannt und hervorgehoben, erstellt eine Vorschau des Mixes direkt neben dem Stil im Bereich „Stile“ und ermöglicht die Auswahl alternativer Farben.
In den Entwicklertools sieht dies in etwa so aus:
Viel Spaß beim Mixen!