CSS/Funktionen/color-mix()

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

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 &leq; 100%: Die Summe der Anteile wird zum Transparentwert der Mischfarbe. Für die Farbmischung werden die Anteile hochskaliert, so dass die Summe 100% ist.
anwendbar auf	alle Farbangaben
Browsersupport	caniuse: mdn-css_types_color_color-mix

Beispiel

<syntaxhighlight lang="css">

 /* 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.

Weblinks

• W3C CSS Color Module Level 5: Mixing Colors: the color-mix() Function

Siehe auch

• Farbe/Relative Farbangaben