color-mix()

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

<color-interpolation-method>

Gibt an, welche Interpolationsmethode zum Mischen der Farben verwendet werden soll. Sie besteht aus dem Schlüsselwort in, gefolgt von einem Farbraumnamen. 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> bezogen 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 im formal_syntax aufgeführten verfügbaren Farbräume sein.

<color>

Ein <color> Wert zum Mischen.

<percentage> Optional

Ein <percentage> Wert zwischen 0% und 100%, der den Anteil der entsprechenden Farbe zum Mischen angibt.

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

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

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

<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, mit der Funktion color-mix(). Die Quellfarben werden außen angezeigt, und die gemischte Farbe wird in der Mitte angezeigt. Sie können die Farben ändern, indem Sie darauf klicken und eine neue Farbe mit dem resultierenden Farbwähler auswählen. Sie können auch den Prozentsatz der im Mix enthaltenen Farben mithilfe der Schieberegler ändern und den Farbraum über das Dropdown-Menü ändern.

Dieses Beispiel zeigt das Mischen zweier Farben, Rot #a71e14 in unterschiedlichen Prozentsätzen und Weiß ohne Angabe eines Prozentsatzes. Je höher der Anteil von #a71e14 gemischt wird, desto mehr Rot und weniger Weiß hat 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 zunehmende Anteile von Rot zu erhöhen, bis zu 100%. Das 6. <li> enthält keinen Prozentsatz für eine der beiden Farben.

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 ist, erhält die andere Farbe implizit einen prozentualen Wert, sodass die Gesamtmenge 100% ergibt. Im letzten <li>, wo keiner Farbe ein Prozentsatz zugewiesen ist, sind beide standardmäßig 50%.

Dieses Beispiel zeigt die Verwendung der color-mix() Funktion, um Transparenz zu einer Farbe hinzuzufügen, indem eine beliebige Farbe mit transparent gemischt wird.

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 hinzuzufügen, die mit einer benutzerdefinierten Eigenschaft namens --base deklariert ist, die auf dem :root definiert ist. Das 6. <li> enthält keinen Prozentsatz, wodurch eine Ausgabefarbe erzeugt wird, die halb so undurchsichtig ist wie die --base Farbe. Wir fügen einen gestreiften Hintergrund zum <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 undurchsichtig ist (mit einem Alpha-Kanal-Wert < 1). Jedoch kann color-mix() nicht verwendet werden, um eine halbtransparente Farbe vollständig undurchsichtig zu machen. Dazu verwenden Sie eine relative Farbe mit einer CSS Farbfunktion. Relative Farben können den Wert eines beliebigen Farbkanals ändern, einschließlich der Erhöhung eines Alphakanals, um die Farbe vollständig undurchsichtig zu machen.

Dieses Beispiel zeigt die in der Funktion color-mix() verfügbaren Farbton-Interpolationsmethoden. Bei der Verwendung der Farbton-Interpolation liegt der resultierende Farbton zwischen den Farbtonwerten der beiden gemischten Farben. Der Wert wird unterschiedlich sein, je nachdem, welcher Weg auf dem Farbkreis genommen wird.

Weitere Informationen siehe <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 Farbkreis, während die longer hue Interpolationsmethode den längeren Weg nimmt. Mit increasing hue beginnt die Route mit steigenden Werten. Mit decreasing hue nimmt der Wert ab. Wir mischen zwei <named-color> Werte, um eine Serie von lch() Zwischenfarben zu erstellen, die sich basierend auf dem gewählten Weg um den Farbkreis unterscheiden. Die gemischten Farben umfassen rot, blau und gelb mit LCH-Farbtonwerten von ungefähr 41grad, 301grad, und 100grad.

Um Redundanz im Code zu reduzieren, haben wir CSS benutzerdefinierte Eigenschaften sowohl für Farben als auch für die Interpolationsmethode verwendet und unterschiedliche Werte auf jedem <ul> gesetzt.

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 sind die Inkrement- oder Dekrementwerte zwischen den Farben immer gleich oder größer als bei der Verwendung von shorter hue. Verwenden Sie increasing hue oder decreasing hue, wenn die Richtung der Änderung des Farbtonwerts wichtiger ist als die Länge zwischen den Werten.

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