CSS/Funktionen/color-mix()

Browserunterstützung
caniuse.com

Die CSS-Funktion color-mix() bietet die Möglichkeit, Farben als Mischung aus zwei Ausgangsfarben darzustellen.

anwendbar auf

alle Farbangaben

Parameter

color-mix() erwartet drei Parameter, getrennt durch ein Komma.

• die zu verwendende Mischmethode
• 2 Farbwerte, jeweils optional ergänzt durch eine Prozentangabe zwischen 0% und 100%, die den Anteil dieser Farbe an der Mischung festlegt. Je nach Vorhandensein des Anteils entsteht ein unterschiedliches Verhalten:
  • Beide Farben ohne Anteil: für beide wird 50% verwendet
  • Eine Farbe mit Anteil: bei der anderen Farbe wird auf 100% ergänzt.
  • Beide Farben mit Anteil, und die Summe ist über 100%: Beide Anteile werden herunterskaliert, so dass die Summe 100% ist
  • Beide Farben mit Anteil, und 0% < Summe ≤ 100%: Die Summe der Anteile wird zum Transparentwert der Mischfarbe. Für die Farbmischung werden die Anteile hochskaliert, so dass die Summe 100% ist.

Beispiel

  /* Mischen im SRGB-Farbraum (kartesische Koordinaten) */
  background: color-mix(in srgb, red 80%, white);
  /* Mischen im HSL-Farbraum (Polarkoordinaten) */
  background: color-mix(in hsl longer hue, red 75%, blue);

Farbmischung in kartesischem und polarem Farbkoordinatenraum.

Siehe auch

• Farbe/Relative Farbangaben

Weblinks

• W3C CSS Color Module Level 5: Mixing Colors: the color-mix() Function
• Browser-Support: caniuse.com