Skip to content

Commit 7b4f860

Browse files
committed
[css-color-5] Add algorithm for color-mix()
1 parent a431644 commit 7b4f860

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

css-color-5/Overview.bs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,9 +126,19 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
126126

127127
If a percentage is omitted, it defaults to 50% (an equal mix of the two colors).
128128

129+
The result is produced via the following algorithm:
130+
131+
1. If a percentage is omitted, it defaults to 50% (an equal mix of the two colors).
132+
2. Both colors are converted to the specified [=colorspace=].
129133
If the specified colorspace has a smaller gamut
130134
than the one in which the color to be adjusted is specified,
131135
gamut mapping will occur.
136+
3. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified colorspace</a>.
137+
The result of mixing is the color at the specified percentage along the progression.
138+
139+
Note: As a corrollary, 0% just returns the first color converted to the specified colorspace,
140+
100% returns the second color converted to the specified colorspace,
141+
and 50% produces an equal mix of both.
132142

133143
<div class="example">
134144
This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru

0 commit comments

Comments
 (0)