CSS-Farbmischung()

Adam Argyle

Mit der CSS-color-mix() Funktion können Sie Farben in einem der unterstützten Farbräume direkt in Ihrem CSS-Code mischen.

Vor color-mix(), um eine Farbe dunkler, heller oder entsättigter zu machen, verwendeten Entwickler CSS-Präprozessoren oder calc() für Farb kanäle.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass hat hervorragende Arbeit geleistet, um der CSS-Farbspezifikation immer einen Schritt voraus zu sein. Es gab jedoch keine Möglichkeit, Farben in CSS zu mischen. Dazu mussten Sie mit Teilfarbwerten rechnen. Hier ist ein vereinfachtes Beispiel dafür, wie CSS heute das Mischen simulieren kann:

.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%);
}

color-mix() bringt die Möglichkeit, Farben in CSS zu mischen. Entwickler können auswählen, in welchem Farbraum sie mischen und wie dominant die einzelnen Farben in der Mischung 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);
}

Genau das wollen wir. Flexibilität, Leistung und APIs mit vollem Funktionsumfang. Gefällt mir.

Farben in CSS mischen

CSS existiert in einer Welt mit mehreren Farbräumen und Farbskalen. Daher ist es nicht optional, den Farbraum für das Mischen anzugeben. Außerdem können verschiedene Farbräume die Ergebnisse einer Mischung drastisch verändern. Wenn Sie die Auswirkungen eines Farbraums kennen, können Sie die gewünschten Ergebnisse erzielen.

Eine interaktive Einführung finden Sie in diesem color-mix()-Tool: - Auswirkungen der einzelnen Farbräume untersuchen - Auswirkungen der Farbtoninterpolation beim Mischen in einem zylindrischen Farbraum (lch, oklch, hsl, und hwb) untersuchen - Farben ändern, die gemischt werden, indem Sie auf eines der beiden oberen Farbfelder klicken - Mit dem Schieberegler das Mischungsverhältnis ändern - Generierter color-mix()-CSS-Code unten verfügbar

Mischen in den verschiedenen Farbräumen

Der Standardfarbraum für das Mischen (und für Farbverläufe) ist oklab. Er liefert konsistente Ergebnisse. Sie können auch alternative Farbräume angeben, um die Mischung an Ihre Bedürfnisse anzupassen.

Nehmen wir zum Beispiel black und white. Der Farbraum, in dem sie gemischt werden, macht keinen großen Unterschied, oder? Falsch.

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);

Er hat eine große Wirkung.

Nehmen wir als weiteres Beispiel blue und white. Ich habe diese Farben speziell ausgewählt, weil sie ein Fall sind, in dem die Form eines Farbraums die Ergebnisse beeinflussen kann. In diesem Fall werden die meisten Farbräume beim Übergang von Weiß zu Blau violett. Außerdem zeigt es, wie zuverlässig oklab als Farbraum für das Mischen ist. Er kommt den Erwartungen der meisten Nutzer an das Mischen von Weiß und Blau am nächsten (kein Violett).

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 die Auswirkungen eines Farbraums mit color-mix() kennen, ist das auch für die Erstellung von Farbverläufen nützlich. Mit der Color 4-Syntax können Sie auch den Farbraum für Farbverläufe angeben, wobei ein Farbverlauf die Mischung über einen Bereich darstellt.

.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 keine eindeutige Antwort. Deshalb gibt es so viele Optionen. Außerdem würden keine neuen Farbräume erfunden werden (siehe oklch und oklab), wenn es einen „besten“ gäbe. Jeder Farbraum kann in bestimmten Situationen die richtige Wahl sein.

Wenn Sie beispielsweise ein lebendiges Mischungsergebnis wünschen, verwenden Sie HSL oder HWB. In der folgenden Demo werden zwei lebendige Farben (Magenta und Limette) gemischt. HSL und HWB liefern beide ein lebendiges Ergebnis, während sRGB und oklab entsättigte Farben erzeugen.

Wenn Sie Konsistenz und Subtilität wünschen, verwenden Sie oklab. In der folgenden Demo, in der Blau und Schwarz gemischt werden, erzeugen HSL und HWB übermäßig lebendige und farbtonverschobene Farben, während sRGB und oklab ein dunkleres Blau erzeugen.

Wenn Sie fünf Minuten mit dem color-mix() Playground verbringen und verschiedene Farben und Farbräume testen, bekommen Sie ein Gefühl für die Vorteile der einzelnen Farbräume. Außerdem wird es mehr Anleitungen zu Farbräumen geben, da wir uns alle an ihre Möglichkeiten in unseren Benutzeroberflächen anpassen.

Methode zur Farbtoninterpolation anpassen

Wenn Sie in einem zylindrischen Farbraum mischen möchten, also in einem Farbraum mit einem h Farbtonkanal, der einen Winkel akzeptiert, können Sie angeben, ob die Interpolation shorter, longer, decreasing oder increasing sein soll. Weitere Informationen finden Sie in diesem Leitfaden zu HD-Farben.

Hier ist dasselbe Beispiel für das Mischen von Blau und Weiß, aber dieses Mal nur in den zylindrischen Farbräumen mit verschiedenen Methoden zur Farbtoninterpolation.

Hier ist ein weiteres Codepen-Beispiel, das ich erstellt habe, um die Farbtoninterpolation zu visualisieren, speziell für Farbverläufe. Ich glaube, dass Sie dadurch besser verstehen, wie die einzelnen Farbräume das Mischungsergebnis erzeugen, wenn die Farbtoninterpolation angegeben ist. Probieren Sie es aus.

Mischen mit verschiedenen Farbsyntaxen

Bisher haben wir hauptsächlich CSS-Farben mit Namen gemischt, z. B. blue und white. Mit der CSS-Farbmischung können Sie Farben aus zwei verschiedenen Farbräumen mischen. Das ist ein weiterer Grund, warum es wichtig ist, den Farbraum für das Mischen anzugeben, da er den gemeinsamen Farbraum festlegt, wenn sich die beiden Farben nicht im selben Farbraum 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. Sehr praktisch und flexibel.

Mischungsverhältnisse anpassen

Es ist unwahrscheinlich, dass Sie bei jeder Mischung gleiche Teile der einzelnen Farben verwenden möchten, wie in den meisten Beispielen bisher gezeigt. Gute Nachricht: Es gibt eine Syntax, mit der Sie angeben können, wie viel von jeder Farbe in der resultierenden Mischung zu sehen sein soll.

Hier sind einige Beispiele für Mischungen, 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, dass diese Beispiele die Grenzfälle gut veranschaulichen. Die ersten Beispiele zeigen, dass 50% nicht erforderlich sind, aber optional angegeben werden können. Das letzte Beispiel zeigt einen interessanten Fall, in dem die Verhältnisse 100% übersteigen, wenn sie addiert werden. Sie werden gleichmäßig auf insgesamt 100 % begrenzt.

Beachten Sie auch, dass wenn nur für eine Farbe ein Verhältnis angegeben wird, für die andere Farbe der Rest bis 100 % angenommen wird. Hier sind 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 % übersteigen, werden sie begrenzt und gleichmäßig verteilt. 1. Wenn nur ein Verhältnis angegeben wird, 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 sie zusammen nicht 100 % ergeben?

color-mix(in lch, purple 20%, plum 20%)

Diese Kombination von color-mix() führt zu Transparenz, 40% Transparenz. Wenn die Verhältnisse nicht 100 % ergeben, ist die resultierende Mischung nicht undurchsichtig. Keine der Farben wird vollständig gemischt.

color-mix() verschachteln

Wie bei allen CSS-Funktionen wird die Verschachtelung wie erwartet behandelt. 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 viele Funktionen verschachteln, wie Sie benötigen, um das gewünschte Ergebnis zu erzielen.

Helles und dunkles Farbschema erstellen

Erstellen wir Farbschemas mit color-mix().

Einfaches Farbschema

Im folgenden CSS-Code werden ein helles und ein dunkles Design basierend auf einer Hex-Farbe der Marke erstellt. Das helle Design erstellt zwei dunkelblaue Textfarben und eine sehr helle weiße Hintergrundfarbe. In einer Medienabfrage für dunkle Designs werden den benutzerdefinierten Eigenschaften 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 das wird erreicht, indem Weiß oder Schwarz in eine Markenfarbe gemischt wird.

Farbschema für Fortgeschrittene

Sie können noch einen Schritt weiter gehen und mehr als nur helle und dunkle Designs hinzufügen. In der folgenden Demo werden durch Änderungen an der Optionsgruppe ein Attribut für das HTML Tag [color-scheme="auto"] aktualisiert, wodurch Selektoren ein Farbschema bedingt anwenden können.

In dieser Demo für Fortgeschrittene wird auch eine Technik für Farbschemas gezeigt, bei der alle Farbschemas in :root aufgeführt sind. So können Sie sie alle zusammen sehen und bei Bedarf anpassen. Später im Stylesheet können Sie die Variablen wie definiert verwenden. So müssen Sie nicht im Stylesheet nach Farbmanipulationen suchen, da sie alle im ursprünglichen :root-Block enthalten sind.

Weitere interessante Anwendungsfälle

Ana Tudor hat eine tolle Demo mit einigen Anwendungsfällen zum Ausprobieren:

Debugging von „color-mix()“ mit den Entwicklertools

Die Chrome-Entwicklertools bieten hervorragende Unterstützung für color-mix(). Sie erkennen und heben die Syntax hervor, erstellen eine Vorschau der Mischung direkt neben dem Stil im Bereich „Stile“ und ermöglichen die Auswahl alternativer Farben.

In den Entwicklertools sieht das so aus:

Viel Spaß beim Mischen!