CSS-Farbmischung()

Adam Argyle

Preisvergleichsportal color-mix() können Sie Farben in allen unterstützten Farbräumen direkt aus Ihrem CSS mischen.

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 16,2

Quelle

Vor dem color-mix() verwendeten Entwickler zum Abdunkeln, Aufhellen oder Entsättigen einer Farbe CSS-Präprozessoren oder calc() auf Farbe Kanäle.

Vorher mit SCSS

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

Sass hat das großartig gemacht. um der CSS-Spezifikation für Farbe einen Schritt voraus zu sein. Es wurde jedoch noch nicht eine Möglichkeit, Farben in CSS zu mischen. Um nah zu kommen, musst du Teilberechnungen anstellen Farbwerte. Hier ist ein reduziertes Beispiel dafür, wie CSS das Mischen heute simulieren könnte:

Vorher mit HSL

.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() bietet Farben in CSS zu mischen. Entwickler können auswählen, welchen Farbraum sie mischen möchten. und wie dominant die einzelnen Farben in der Mischung sein sollen.

Nachher

.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 voll funktionsfähige APIs ohne alles zu gucken

Farben in CSS mischen

CSS existiert in einer Welt mit mehreren Farb- und Farbgamuten. ist die Angabe des Farbraums für das Mischen nicht optional. Darüber hinaus unterscheiden sich Farbräume können die Ergebnisse einer Mischung drastisch verändern. Wenn Sie also die Effekte kennen, eines Farbraums helfen, die gewünschten Ergebnisse zu erhalten.

Eine interaktive Einführung erhalten Sie mit diesem color-mix()-Tool: - Erkunden der Effekte jedes Farbraums - Auswirkungen der Farbinterpolation beim Mischen in einer zylinderförmigen Farbe untersuchen Gruppenbereich (lch, oklch, hsl und hwb) - Ändern Sie die zu mischenden Farben, indem Sie auf eines der beiden oberen Farbfelder klicken. - Ändern Sie das Mischverhältnis mit dem Schieberegler. – Generierter CSS-Code (color-mix()) wird unten angezeigt.

Mischen der verschiedenen Farbräume

Der Standardfarbraum für das Mischen und für Verläufe ist oklab. Sie bietet konsistente Ergebnisse zu liefern. Sie können auch alternative Farbräume angeben, um Ihren Bedürfnissen anpassen.

Sehen wir uns als Beispiel black und white an. Der Farbraum, den sie sich vermischen, ist das ein großer Unterschied. 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);

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Es hat eine große Wirkung!

Nehmen wir blue und white für ein weiteres Beispiel. Ich habe diese Option gewählt, In diesem Fall kann sich die Form eines Farbraums auf die Ergebnisse auswirken. In diesem Fall dass die meisten Farbräume lila werden, während sie von Weiß nach Blau wechseln. Es dass oklab ein so zuverlässiger Farbraum zum Mischen ist, den Erwartungen der meisten Menschen an eine Mischung aus Weiß und Blau (kein Lila) am ehesten entspricht.

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

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Das Lernen der Auswirkungen eines Farbraums mit color-mix() ist ein großartiges Wissen für Verläufe erstellen . Die Farb-4-Syntax ermöglicht auch Farbverläufen die Angabe des Farbraums, wobei ein Farbverlauf zeigt die Mischung über einer Fläche.

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

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Wenn Sie wissen, welcher Farbraum "am besten" ist, gibt es keines. Deshalb Es gibt so viele Möglichkeiten! Es gäbe auch keine neuen Farbräume, (siehe oklch und oklab), wenn eines „das Beste“ war. Jede Farbe einen einzigartigen Moment zu bieten und die richtige Wahl zu sein.

Wenn Sie beispielsweise ein lebendiges Mix-Ergebnis wünschen, verwenden Sie hsl oder hwb. Im Folgenden werden zwei leuchtende Farben (Magenta und Limette) kombiniert. Beide Varianten liefern ein lebendiges Ergebnis, während srgb und Oklab ungesättigte Farben erzeugen.

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Wenn Sie Einheitlichkeit und Feinheiten wünschen, sollten Sie Oklab verwenden. In der folgenden Demo werden Blau und Schwarz erzeugen hsl und hwb übermäßig leuchtende und gefärbte Farben. Srgb und Oklab erzeugen ein dunkleres Blau.

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Fünf Minuten lang auf dem color-mix()-Playground verschiedene Farben testen und Bereiche und Sie bekommen einen Eindruck von deren Vorteilen. Ebenfalls weitere Hinweise im Hinblick auf Farbräume erwarten, während wir uns alle an ihre Farbräume gewöhnen Potenzial in unseren Benutzeroberflächen.

Farbinterpolationsmethode anpassen

Wenn Sie einen zylinderförmigen Farbraum verwenden möchten, Raum mit einem h-Farbtonkanal, der einen Winkel akzeptiert, können Sie angeben, ob der ist die Interpolation shorter, longer, decreasing und increasing. Dies ist in diesem HD-Farbleitfaden behandelt.

Hinweis: Im Playground color-mix() wird ein zusätzliches Auswahl-Drop-down-Menü hinzugefügt, wenn der Farbraum zylindrisch ist. Du kannst dort spielen, um die Effekte auf den Mix zu sehen.

Hier noch einmal das Beispiel der Blau-Weiß-Mischung, aber dieses Mal nur in der mit unterschiedlichen Farbinterpolationsmethoden.

<ph type="x-smartling-placeholder">

</ph>

Demo ausprobieren

Hier ist ein weiterer Codepen, den ich zur Visualisierung der Farbinterpolation erstellt habe. insbesondere für Farbverläufe. Ich glaube, dass Sie so besser verstehen, ein Farbraum erzeugt sein Mischergebnis, wenn eine Farbinterpolation angegeben ist. Studie durchführen!

Warnung:Bereitstellung einer Farbinterpolationsmethode für eine nicht zylindrische Der Farbraum ist ein Syntaxfehler in color-mix().

Mischen mit unterschiedlicher Farbsyntax

Bisher haben wir hauptsächlich CSS-benannte Farben wie blue und white gemischt. CSS-Farbe Mischen ist bereit, Farben zu mischen, die aus zwei verschiedenen Farbräumen stammen. Dies ist ein weiterer Grund ist es, den Farbraum für die Mischung anzugeben, da dieser wenn 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.

Mischverhältnisse anpassen

Es ist nicht sehr wahrscheinlich, dass beim Mischen die gleichen Teile wie die meisten bisherigen Beispiele gezeigt haben. Gute Nachrichten: Es gibt eine Syntax für und artikulieren, wie viel von jeder Farbe in der resultierenden Mischung zu sehen sein soll.

Um dieses Thema zu beginnen, finden Sie hier einige äquivalente Mixe (und aus den Spezifikationen):

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

Diese Beispiele verdeutlichen die Grenzfälle gut. Der erste Satz von Die Beispiele zeigen, dass 50% nicht erforderlich ist, aber optional angegeben werden können. Die letzte Das Beispiel zeigt einen interessanten Fall, wenn die Verhältnisse 100% überschreiten, sind sie gleichermaßen auf 100 % festgelegt.

Wenn nur eine Farbe ein Verhältnis angibt, wird die andere als der Rest auf 100%. Hier sind einige weitere Beispiele zur Veranschaulichung. verhalten.

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 Verhältnisse 100 % überschreiten, werden sie an eine Begrenzung angepasst und gleichmäßig verteilt. 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 geschieht, wenn Prozentsätze angegeben werden? für beide Farben und ergeben zusammen nicht 100%?

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

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

color-mix() wird verschachtelt

Wie bei allen CSS wird Verschachtelungen gut und erwartungsgemäß gehandhabt. inneren Funktionen und ihre Werte an den übergeordneten Kontext zurückgeben.

color-mix(in lch, purple 40%, color-mix(plum, white))

Du kannst so viel verschachteln, wie du benötigst, um das Ergebnis zu erzielen, auf das du hinarbeitest.

Ein helles und dunkles Farbschema erstellen

Lassen Sie uns mit color-mix() Farbschemata erstellen.

Ein grundlegendes Farbschema

Im folgenden CSS werden ein helles und ein dunkles Design anhand eines Hexadezimalwerts der Marke erstellt. Farbe. Das helle Design erzeugt zwei dunkelblaue Textfarben und ein sehr helles Weiß. die Farbe der Hintergrundfarbe. Bei einer Medienabfrage mit dunklen Präferenzen werden neue Farben zugewiesen, sodass der Hintergrund dunkel und die Textfarben sind leicht.

: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 eine Markenfarbe gemischt wird.

Farbschema für die mittlere Stufe

Sie können noch einen Schritt weiter gehen, indem Sie neben hellen und dunklen Designs noch mehr hinzufügen. In In der folgenden Demo wird bei Änderungen an der Optionsfeldgruppe ein Attribut im HTML-Code aktualisiert. Tag [color-scheme="auto"], das dann Selektoren ermöglicht, ein Farbschema.

Diese Demo für Fortgeschrittene zeigt auch eine Technik zur Farbgestaltung, bei der alle Designfarben sind in :root aufgelistet. So können sie alle zusammen angezeigt werden bei Bedarf anpassen. Später im Stylesheet können Sie die Variablen so verwenden, definiert. Das erspart Ihnen die Suche nach Farbanpassungen im Stylesheet. sind sie alle im ersten :root-Block enthalten.

Interessantere Anwendungsfälle

Ana Tudor hat eine tolle Demo mit einigen Anwendungsfällen gezeigt. Studie:

Fehler in „color-mix()“ mit den Entwicklertools beheben

Die Chrome-Entwicklertools bieten eine hervorragende Unterstützung für color-mix(). Die Funktion erkennt und hebt die Syntax hervor und erstellt eine Vorschau der Mischung direkt neben dem Stil in Stile und ermöglicht die Auswahl alternativer Farben.

In den Entwicklertools sieht das in etwa so aus:

Viel Spaß beim Mixen!