color-mix()

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

<color-interpolation-method>

Gibt an, welche Interpolationsmethode zur Mischung der Farben verwendet werden soll. Sie besteht aus dem in-Schlüsselwort 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.
• custom-color-space: <dashed-ident>, das sich auf ein benutzerdefiniertes @color profile bezieht.

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

<color>

Ein <color>-Wert, der gemischt werden soll.

<percentage> Optional

Ein <percentage>-Wert zwischen 0% und 100%, der angibt, wie viel von der entsprechenden Farbe gemischt werden soll.

Die beiden Farbanteile (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 Alphamultiplikator von p1 + p2 auf die resultierende Farbe angewendet. Dies ist vergleichbar mit dem Mischen von transparent, mit dem Anteil 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 Ausgangsfarben werden außen angezeigt, und die gemischte Farbe wird in der Mitte angezeigt. Sie können die Farben ändern, indem Sie darauf klicken und im erscheinenden Farbwähler eine neue Farbe auswählen. Sie können auch den Prozentsatz jeder Farbe, die in der Mischung enthalten ist, mit den Schiebereglern ändern und den Farbraum über das Dropdown-Menü auswählen.

Dieses Beispiel zeigt, wie zwei Farben gemischt werden: Rot #a71e14 mit unterschiedlichen Prozentsätzen und Weiß ohne angegebenen Prozentsatz. Je höher der Prozentsatz von #a71e14 in der Mischung ist, desto röter 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 Funktion color-mix() wird verwendet, um zunehmende Anteile von Rot bis zu 100% hinzuzufügen. 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%, auch wenn die vom Entwickler festgelegten Werte nicht das Gesamt von 100% erreichen. In diesem Beispiel wird, da nur einer Farbe ein Prozentsatz zugewiesen ist, der anderen Farbe automatisch ein Prozentsatz zugeteilt, sodass die gesamte Summe 100% ergibt. Im letzten <li>, wo keiner Farbe ein Prozentsatz zugewiesen ist, wird für beide standardmäßig 50% angenommen.

Dieses Beispiel zeigt, wie die Funktion color-mix() verwendet wird, um einer Farbe Transparenz 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 Funktion color-mix() wird verwendet, um zunehmende Anteile von red hinzuzufügen, das mit einer benutzerdefinierten Eigenschaft namens --base deklariert ist, die auf :root definiert ist. Der 6. <li> enthält keinen Prozentsatz und erzeugt eine Ausgabefarbe, die halb so undurchsichtig ist wie die --base-Farbe. Wir fügen einen gestreiften Hintergrund auf die <ul> ein, 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 Funktion color-mix() verwendet werden, um jeder Farbe Transparenz hinzuzufügen, selbst wenn die Farbe bereits nicht vollständig deckend ist (mit einem Alphakanalwert < 1). Allerdings kann color-mix() nicht verwendet werden, um eine semitransparente Farbe vollständig deckend zu machen. Dafür verwenden Sie eine relative Farbe mit einer CSS-Farb-Funktion. Relative Farben können den Wert eines beliebigen Farbkanals ändern, einschließlich der Erhöhung des Alphakanals einer Farbe, um diese vollständig deckend darzustellen.

Dieses Beispiel zeigt die Hue-Interpolationsmethoden der Funktion color-mix() auf. Bei Verwendung der Hue-Interpolation liegt der resultierende Farbton zwischen den Farbtonwerten der beiden gemischten Farben. Der Wert unterscheidet sich je nach dem gewählten Weg um den Farbkreis.

Für 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 Interpolationsmethode shorter hue nimmt den kürzeren Weg um den Farbkreis, während die Methode longer hue den längeren Weg nimmt. Mit increasing hue beginnt der Weg mit zunehmenden Werten. Bei decreasing hue nimmt der Wert ab. Wir mischen zwei <named-color>-Werte, um eine Serie von lch() Zwischenfarben zu erzeugen, die sich basierend auf der gewählten Route um den Farbkreis unterscheiden. Die gemischten Farben umfassen red, blue und yellow mit LCH-Farbtonwerten von ungefähr 41 Grad, 301 Grad und 100 Grad.

Um Code-Redundanz zu reduzieren, haben wir CSS-Benutzereigenschaften sowohl für die Farben als auch für die Interpolationsmethode verwendet, wobei unterschiedliche Werte auf jede <ul> gesetzt wurden.

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 als bei der Verwendung von shorter hue sein. Verwenden Sie increasing hue oder decreasing hue, wenn die Richtung der Änderung des Farbtonwerts wichtiger ist als der Abstand zwischen den Werten.

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