CSS/Funktionen/color-mix()
Aus SELFHTML-Wiki
CSS | Funktionen
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
<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.
Siehe auch
Weblinks
- W3C CSS Color Module Level 5: Mixing Colors: the color-mix() Function
- Browser-Support: caniuse.com