color-mix()
Baseline 2023
Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die color-mix()
Funktionalnotation nimmt zwei <color>
Werte und gibt das Ergebnis des Mischens in einem gegebenen Farbraum mit einer gegebenen Menge zurück.
Syntax
/* color-mix(in <polar-color-space>, <color>, <color> <percentage>) */
color-mix(in hsl, hsl(200 50 80), coral 80%)
/* color-mix(in <polar-color-space> <hue-interpolation-method>, <color>, <color>) */
color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)
/* color-mix(in <rectangular-color-space>, <color>, <color>) */
color-mix(in srgb, plum, #f00)
/* color-mix(in <rectangular-color-space>, <color> <percentage>, <color> <percentage> */
color-mix(in lab, plum 60%, #f00 50%)
/* color-mix(in <custom-color-space>, <color>, <color>) */
color-mix(in --swop5c, red, blue)
Werte
Funktionalnotation: color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])
<color-interpolation-method>
-
Gibt an, welche Interpolationsmethode verwendet werden soll, um die Farben zu mischen. Sie besteht aus dem Schlüsselwort
in
gefolgt von einem Color Space Namen. 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`. -
benutzerdefinierter Farbraum:
<dashed-ident>
bezieht sich 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 verfügbaren Farbräume sein, die in der formal_syntax aufgeführt sind. -
<color>
-
Ein
<color>
Wert zum Mischen. <percentage>
Optional-
Ein
<percentage>
Wert zwischen0%
und100%
, der die Menge der entsprechenden Farbe angibt, die gemischt werden soll.Die beiden Farbprozentsätze (wir bezeichnen sie als
p1
undp2
) werden wie folgt normalisiert:- Wenn sowohl
p1
als auchp2
weggelassen werden, dann giltp1 = p2 = 50%
. - Wenn
p1
weggelassen wird, dann giltp1 = 100% - p2
. - Wenn
p2
weggelassen wird, dann giltp2 = 100% - p1
. - Wenn
p1 = p2 = 0%
, ist die Funktion ungültig. - Wenn
p1 + p2 ≠ 100%
, dann giltp1' = p1 / (p1 + p2)
undp2' = p2 / (p1 + p2)
, wobeip1'
undp2'
die Normalisierungsresultate sind.- Wenn
p1 + p2 < 100%
, dann wird ein Alphamultiplikator vonp1 + p2
auf die resultierende Farbe angewendet. Dies ähnelt dem Mischen mittransparent
, mit dem Prozentsatzpt = 100% - p1 - p2
.
- Wenn
- Wenn sowohl
Formale Syntax
<color-mix()> =
color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )
<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
Beispiele
Farbmischer
Das folgende Live-Demo mischt zwei Farben, color-one
und color-two
, mittels der color-mix()
Funktion. Die Ausgangsfarben werden außen angezeigt, und die gemischte Farbe wird in der Mitte angezeigt. Sie können die Farben ändern, indem Sie auf sie klicken und eine neue Farbe über den eingeblendeten Farbwähler auswählen. Sie können auch den Prozentsatz jeder Farbe, die im Mix enthalten ist, mit den Schiebereglern ändern und den Farbraum über das Dropdown-Menü auswählen.
Zwei Farben mischen
Dieses Beispiel zeigt das Mischen zweier Farben, Blau #a71e14
in unterschiedlichen Prozentsätzen und Weiß ohne gegebenen Prozentsatz. Je höher der Prozentsatz von #a71e14
, desto blauer 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 color-mix()
Funktion wird verwendet, um steigende Blauanteile bis zu 100% hinzuzufügen. Das 6. <li>
schließt keinen Prozentsatz für eine der Farben ein.
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 wird, erhält die andere Farbe implizit einen Prozentsatz, damit die kombinierte Summe 100% entspricht. Im letzten <li>
, wo keiner Farbe ein Prozentsatz zugeordnet ist, werden beide auf 50% gesetzt.
Transparenz hinzufügen
Dieses Beispiel zeigt, wie die color-mix()
Funktion verwendet wird, um Transparenz zu einer Farbe hinzuzufügen, indem man eine beliebige Farbe mit transparent
mischt.
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
, die über eine benutzerdefinierte Eigenschaft namens --base
, definiert auf dem :root
, hinzuzufügen. Das 6. <li>
schließt keinen Prozentsatz ein und erzeugt eine Ausgabefarbe, die halb so opak ist wie die --base
Farbe. Wir fügen einen gestreiften Hintergrund auf dem <ul>
hinzu, um die Transparenz sichtbar zu machen.
: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 vollständig opak ist (mit einem Alphakanalwert < 1). Jedoch kann color-mix()
nicht verwendet werden, um eine halbtransparente Farbe vollständig opak zu machen. Hierfür verwenden Sie eine relative Farbe mit einer CSS Farbfunktion. Relative Farben können den Wert eines jeden Farbspektrums ändern, einschließlich der Erhöhung eines Alphakanals, um die Farbe vollständig opak zu machen.
Verwendung der Farbtoninterpolation in color-mix()
Dieses Beispiel zeigt die verfügbaren Farbtoninterpolationsmethoden der color-mix()
Funktion. Bei Verwendung der Farbton Interpolation liegt der resultierende Farbton zwischen den Farbtonwerten der beiden gemischten Farben. Der Wert unterscheidet sich je nachdem, welcher Weg um den Farbring genommen wird.
Weitere Informationen finden Sie unter <hue-interpolation-method>
.
CSS
Die shorter hue
Interpolationsmethode nimmt den kürzeren Weg um den Farbring, während die longer hue
Interpolationsmethode den längeren Weg nimmt. Mit increasing hue
beginnt der Weg mit steigenden Werten. Bei decreasing hue
nimmt der Wert ab. Wir mischen zwei <named-color>
Werte, um eine Reihe von lch()
Zwischenfarben zu erstellen, die je nach dem gewählten Weg um den Farbring variieren. Die gemischten Farben beinhalten red
, blue
und yellow
mit LCH Farbtonwerten von ungefähr 41deg, 301deg und 100deg.
Um den Codeaufwand zu reduzieren, verwenden wir CSS benutzerdefinierte Eigenschaften für beide Farben und die Interpolationsmethode, wobei wir unterschiedliche Werte auf jedem <ul>
setzen.
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 sein als bei shorter hue
. Verwenden Sie increasing hue
oder decreasing hue
, wenn die Richtung der Farbtonwertänderung wichtiger ist als die Länge zwischen den Werten.
Spezifikationen
Specification |
---|
CSS Color Module Level 5 # color-mix |
Browser-Kompatibilität
BCD tables only load in the browser