color-mix()

Funktionalnotation: color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])

<color-interpolation-method>

Gibt an, welche Interpolationsmethode verwendet werden soll, um die Farben zu mischen. Sie besteht aus dem Schlüsselwort in gefolgt von einem Color Space Namen. Die folgenden drei Typen sind verfügbar:

• <rectangular-color-space>: `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `lab`, `oklab`, `xyz`, `xyz-d50`, und `xyz-d65`.
• <polar-color-space>: hsl, hwb, lch, und oklch.
• benutzerdefinierter Farbraum: <dashed-ident> bezieht sich auf ein benutzerdefiniertes @color profile

Hinweis: Wenn Browser @color-profile unterstützen, können benutzerdefinierte Farbräume unterstützt werden. Derzeit muss der Farbraum einer der verfügbaren Farbräume sein, die in der formal_syntax aufgeführt sind.

<color>

Ein <color> Wert zum Mischen.

<percentage> Optional

Ein <percentage> Wert zwischen 0% und 100%, der die Menge der entsprechenden Farbe angibt, die gemischt werden soll.

Die beiden Farbprozentsätze (wir bezeichnen sie als p1 und p2) werden wie folgt normalisiert:

• Wenn sowohl p1 als auch p2 weggelassen werden, dann gilt p1 = p2 = 50%.
• Wenn p1 weggelassen wird, dann gilt p1 = 100% - p2.
• Wenn p2 weggelassen wird, dann gilt p2 = 100% - p1.
• Wenn p1 = p2 = 0%, ist die Funktion ungültig.
• Wenn p1 + p2 ≠ 100%, dann gilt p1' = p1 / (p1 + p2) und p2' = p2 / (p1 + p2), wobei p1' und p2' die Normalisierungsresultate sind.
  • Wenn p1 + p2 < 100%, dann wird ein Alphamultiplikator von p1 + p2 auf die resultierende Farbe angewendet. Dies ähnelt dem Mischen mit transparent, mit dem Prozentsatz pt = 100% - p1 - p2.

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

Das folgende Live-Demo mischt zwei Farben, color-one und color-two, mittels der color-mix() Funktion. Die Ausgangsfarben werden außen angezeigt, und die gemischte Farbe wird in der Mitte angezeigt. Sie können die Farben ändern, indem Sie auf sie klicken und eine neue Farbe über den eingeblendeten Farbwähler auswählen. Sie können auch den Prozentsatz jeder Farbe, die im Mix enthalten ist, mit den Schiebereglern ändern und den Farbraum über das Dropdown-Menü auswählen.

Dieses Beispiel zeigt das Mischen zweier Farben, Blau #a71e14 in unterschiedlichen Prozentsätzen und Weiß ohne gegebenen Prozentsatz. Je höher der Prozentsatz von #a71e14, desto blauer und weniger weiß wird die Ausgabefarbe.

HTML

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

Die color-mix() Funktion wird verwendet, um steigende Blauanteile bis zu 100% hinzuzufügen. Das 6. <li> schließt keinen Prozentsatz für eine der Farben ein.

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 3px solid #a71e14;
  text-align: center;
}

li:nth-child(1) {
  background-color: color-mix(in oklab, #a71e14 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in oklab, #a71e14 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in oklab, #a71e14 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in oklab, #a71e14 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in oklab, #a71e14 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in oklab, #a71e14, white);
}

Ergebnis

Der Gesamtwert beider Farben in einer color-mix() Funktion beträgt 100%, selbst wenn die vom Entwickler festgelegten Werte nicht 100% ergeben. In diesem Beispiel, da nur einer Farbe ein Prozentsatz zugewiesen wird, erhält die andere Farbe implizit einen Prozentsatz, damit die kombinierte Summe 100% entspricht. Im letzten <li>, wo keiner Farbe ein Prozentsatz zugeordnet ist, werden beide auf 50% gesetzt.

Dieses Beispiel zeigt, wie die color-mix() Funktion verwendet wird, um Transparenz zu einer Farbe hinzuzufügen, indem man eine beliebige Farbe mit transparent mischt.

HTML

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

Die color-mix() Funktion wird verwendet, um steigende Anteile von red, die über eine benutzerdefinierte Eigenschaft namens --base, definiert auf dem :root, hinzuzufügen. Das 6. <li> schließt keinen Prozentsatz ein und erzeugt eine Ausgabefarbe, die halb so opak ist wie die --base Farbe. Wir fügen einen gestreiften Hintergrund auf dem <ul> hinzu, um die Transparenz sichtbar zu machen.

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid var(--base);
  text-align: center;
}

:root {
  --base: red;
}

ul {
  background: repeating-linear-gradient(
    45deg,
    chocolate 0px 2px,
    white 2px 12px
  );
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--base) 0%, transparent);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--base) 25%, transparent);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--base) 50%, transparent);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--base) 75%, transparent);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--base) 100%, transparent);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, var(--base), transparent);
}

Ergebnis

Auf diese Weise kann die color-mix() Funktion verwendet werden, um Transparenz zu jeder Farbe hinzuzufügen, selbst wenn die Farbe bereits nicht vollständig opak ist (mit einem Alphakanalwert < 1). Jedoch kann color-mix() nicht verwendet werden, um eine halbtransparente Farbe vollständig opak zu machen. Hierfür verwenden Sie eine relative Farbe mit einer CSS Farbfunktion. Relative Farben können den Wert eines jeden Farbspektrums ändern, einschließlich der Erhöhung eines Alphakanals, um die Farbe vollständig opak zu machen.

Dieses Beispiel zeigt die verfügbaren Farbtoninterpolationsmethoden der color-mix() Funktion. Bei Verwendung der Farbton Interpolation liegt der resultierende Farbton zwischen den Farbtonwerten der beiden gemischten Farben. Der Wert unterscheidet sich je nachdem, welcher Weg um den Farbring genommen wird.

Weitere Informationen finden Sie unter <hue-interpolation-method>.

<p>longer</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>shorter</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>increasing</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>decreasing</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>

CSS

Die shorter hue Interpolationsmethode nimmt den kürzeren Weg um den Farbring, während die longer hue Interpolationsmethode den längeren Weg nimmt. Mit increasing hue beginnt der Weg mit steigenden Werten. Bei decreasing hue nimmt der Wert ab. Wir mischen zwei <named-color> Werte, um eine Reihe von lch() Zwischenfarben zu erstellen, die je nach dem gewählten Weg um den Farbring variieren. Die gemischten Farben beinhalten red, blue und yellow mit LCH Farbtonwerten von ungefähr 41deg, 301deg und 100deg.

Um den Codeaufwand zu reduzieren, verwenden wir CSS benutzerdefinierte Eigenschaften für beide Farben und die Interpolationsmethode, wobei wir unterschiedliche Werte auf jedem <ul> setzen.

body {
  font-family: monospace;
}
ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  padding: 10px;
  margin: 0;
}

li {
  padding: 10px;
  flex: 1;
  outline: 1px solid var(--base);
  text-align: center;
}

ul:nth-of-type(1) {
  --distance: longer; /* 52 degree hue increments */
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(2) {
  /* 20 degree hue decrements */
  --distance: shorter;
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(3) {
  /* 40 degree hue increments */
  --distance: increasing;
  --base: yellow;
  --mixin: blue;
}
ul:nth-of-type(4) {
  /* 32 degree hue decrements */
  --distance: decreasing;
  --base: yellow;
  --mixin: blue;
}

li:nth-child(1) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 100%,
    var(--mixin)
  );
}

li:nth-child(2) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 80%,
    var(--mixin)
  );
}

li:nth-child(3) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 60%,
    var(--mixin)
  );
}

li:nth-child(4) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 40%,
    var(--mixin)
  );
}

li:nth-child(5) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 20%,
    var(--mixin)
  );
}

li:nth-child(6) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 0%,
    var(--mixin)
  );
}

Ergebnis

Mit longer hue werden die Inkremente oder Dekremente zwischen den Farben immer gleich oder größer sein als bei shorter hue. Verwenden Sie increasing hue oder decreasing hue, wenn die Richtung der Farbtonwertänderung wichtiger ist als die Länge zwischen den Werten.

• <color>
• <color-interpolation-method>
• <hue>
• CSS relative Farben