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 zu verdunkeln, 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 immer einen Schritt voraus zu sein. Es gibt jedoch noch keine Möglichkeit, Farben in CSS zu mischen. Dazu müssen Sie die 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 Farben in CSS mischen. Entwickelnde können auswählen, in welchen Farbraum sie
einmischen und wie dominant jede Farbe im Mix sein soll.
.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 ist es, was wir wollen. Flexibilität, Leistung und APIs mit vollem Funktionsumfang Lieblingsmusik
Farben in CSS mischen
CSS hat eine Mehrfarbraum- und Farbskalawelt. Daher ist es nicht optional, den Farbraum für die Kombination anzugeben. Darüber hinaus können verschiedene Farbräume die Ergebnisse einer Kombination erheblich verändern. Wenn Sie also die Effekte eines Farbraums kennen, können Sie die gewünschten Ergebnisse erzielen.
Eine interaktive Einführung erhalten Sie mit diesem color-mix()-Tool:
– Sehen Sie sich die Effekte jedes Farbraums an.
– Untersuchen Sie die Auswirkungen der Farbinterpolation beim Mischen in einem zylindrischen Farbraum (lch, oklch, hsl und hwb).
– Klicken Sie auf eines der beiden oberen Farbfelder, um die zu mischenden Farben zu ändern.
- Verwenden Sie den Schieberegler, um das Mischverhältnis zu ändern.
– Es wurde ein CSS-Code für color-mix() generiert, der unten verfügbar ist.
Kombination 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.
Nehmen wir black und white als Beispiel. Der Farbraum, den sie einmischen,
macht keinen großen Unterschied, oder? 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 dafür entschieden, weil die
Form eines Farbraums die Ergebnisse beeinflussen kann. In diesem Fall werden die meisten Farbräume lila, während sie sich von Weiß nach Blau bewegen. Außerdem zeigt sie, dass oklab ein so zuverlässiger Farbraum für das Mischen ist. Die meisten Menschen erwarten, Weiß und Blau zu mischen (kein Lila).
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);
Wenn Sie mit color-mix() die Effekte eines Farbraums kennenlernen, können Sie auch sehr gut Verläufe erstellen. Mit der Syntax für Farbe 4 kann bei Farbverläufen auch der Farbraum angegeben werden, wobei ein Farbverlauf die Mischung in einem bestimmten 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);
}
Falls Sie sich nicht sicher sind, welcher Farbraum „der beste“ ist, gibt es keinen. Deshalb gibt es so viele Optionen! Außerdem würden keine neuen Farbräume erfunden (siehe oklch und oklab), wenn einer „der beste“ wäre. Jeder Farbraum kann einen einzigartigen Moment haben, um zu glänzen und die richtige Wahl zu sein.
Wenn Sie beispielsweise ein lebendiges Mix-Ergebnis erhalten möchten, verwenden Sie „hsl“ oder „hwb“. In der folgenden Demo werden zwei lebendige Farben (Magenta und Hellgrün) miteinander vermischt, wobei HSL und HWB zu einem lebendigen Ergebnis führen, während srgb und oklab ungesättigte Farben erzeugen.
Wenn Sie Konsistenz und Subtile möchten, verwenden Sie Oklab. In der folgenden Demo, in der Blau und Schwarz kombiniert werden, erzeugen HSL und HWB übermäßig lebendige und farbversetzte Farben, während srgb und oklab ein dunkleres Blau erzeugen.
Nehmen Sie sich fünf Minuten Zeit mit dem color-mix() Playground. Testen Sie verschiedene Farben und Abstände, um ein Gefühl für die Vorteile der einzelnen Bereiche zu entwickeln. Wenn wir uns alle an das Potenzial unserer Benutzeroberflächen anpassen, wird es noch mehr Tipps zu Farbräumen geben.
Farbtoninterpolationsmethode anpassen
Wenn Sie einen zylindrischen Farbraum mischen möchten, also im Grunde jeden Farbraum mit einem h-Farbraum, der einen Winkel akzeptiert, können Sie angeben, ob die Interpolation shorter, longer, decreasing und increasing lautet. Weitere Informationen zu diesem Thema 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, aber speziell für Farbverläufe. Ich denke aber, damit Sie verstehen, wie jeder Farbraum sein Mixergebnis erzielt, wenn die Farbinterpolation angegeben ist, sollten Sie eine Studie durchführen.
Mit unterschiedlichen Farbsyntaxen mischen
Bisher haben wir hauptsächlich CSS-Farben 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 damit der gemeinsame Bereich für den Fall festgelegt wird, dass sich die beiden Farben nicht im selben Bereich 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.
Mischverhältnisse anpassen
Es ist nicht sehr wahrscheinlich, dass Sie bei jedem Mischen die gleichen Teile jeder Farbe erhalten möchten, wie in den meisten Beispielen bisher gezeigt. Gute Neuigkeiten: Es gibt eine Syntax, mit der festgelegt wird, wie viel von jeder Farbe im resultierenden Mix zu sehen sein soll.
Zum Einstieg finden Sie hier einige Beispiele für Mixe, die alle gleichwertig sind und aus der Spezifikation stammen:
.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. Der erste Satz von Beispielen zeigt, 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 100 % ergibt.
Wenn nur eine Farbe ein Verhältnis angibt, wird angenommen, dass die andere Farbe der Rest bis 100 % ist. Im Folgenden finden Sie 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 */
Diese Beispiele veranschaulichen zwei Regeln: 1. Wenn die Verhältnisse 100 % überschreiten, gelten die Grenzen und die Verteilung. 1. Wenn nur ein Verhältnis angegeben ist, wird die andere Farbe auf 100 minus dieses Verhältnis festgelegt.
Die letzte Regel ist etwas weniger offensichtlich. Was passiert, wenn für beide Farben Prozentsätze angegeben werden und diese nicht 100 % ergeben?
color-mix(in lch, purple 20%, plum 20%)
Diese Kombination aus color-mix() ergibt Transparenz und 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 CSS wird auch die Verschachtelung gut und erwartungsgemäß verarbeitet. Die inneren 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))
Du kannst so viel wie nötig verschachteln, um das gewünschte Ergebnis zu erzielen.
Ein helles und dunkles Farbschema erstellen
Erstellen wir mit color-mix() Farbschemata!
Ein grundlegendes Farbschema
Im folgenden CSS werden ein helles und ein dunkles Design basierend auf dem Hex-Farbcode der Marke erstellt. Durch das helle Design entstehen zwei dunkelblaue Textfarben und eine sehr helle weiße Hintergrundfarbe. In 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);
}
}
All dies wird erreicht, indem Weiß oder Schwarz in einer Markenfarbe gemischt wird.
Mittleres Farbschema
Sie können noch einen Schritt weiter gehen, indem Sie mehr als helle und dunkle Designs hinzufügen. In der folgenden Demo wird durch Änderungen an der Optionsfeldgruppe ein Attribut für das HTML-Tag [color-scheme="auto"] aktualisiert. Dadurch können Selektoren bedingt ein Farbdesign anwenden.
Diese Demo für Fortgeschrittene zeigt auch ein Farbthema, bei dem alle Designfarben in :root aufgeführt sind. So können Sie alle Werte auf einen Blick sehen
und bei Bedarf anpassen. Später im Stylesheet können Sie die Variablen so verwenden, wie sie definiert sind. Dies erspart Ihnen die Suche nach Farbmanipulationen im Stylesheet, da diese alle im ersten :root-Block enthalten sind.
Interessantere Anwendungsfälle
Ana Tudor bietet eine großartige Demo mit einigen Anwendungsfällen zum Lernen:
„color-mix()“ mit den Entwicklertools debuggen
Die Chrome-Entwicklertools bieten hervorragende Unterstützung für color-mix(). Die Syntax wird erkannt und hervorgehoben, eine Vorschau des Mixes wird direkt neben dem Stil im Bereich „Stile“ erstellt und Sie können alternative Farben auswählen.
In den Entwicklertools sieht dies in etwa so aus:
Viel Spaß beim Mixen!