@@ -121,33 +121,39 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
121121
122122
123123<pre class='prod'>
124- <dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage>> ? ]#{2})
124+ <dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage [0,100] >> ? ]#{2})
125125</pre>
126126
127- The percentages are normalized as follows:
127+ Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:
128128
129129 1. Let <var> p1</var> be the first percentage and <var> p2</var> the second one.
130- 2. If both percentages are omitted, they each default to 50% (an equal mix of the two colors).
130+ 2. If both percentages are omitted, they each default to 50%
131+ (an equal mix of the two colors).
131132 3. Otherwise, if <var> p2</var> is omitted, it becomes 100% - <var> p1</var>
132133 4. Otherwise, if <var> p1</var> is omitted, it becomes 100% - <var> p2</var>
133- 5. If the percentages sum to zero <em> do something, tbd</em>
134- 6. Otherwise, if both are provided but do not add up to 100%,
135- they are scaled accordingly so that they add up to 100%.
134+ 5. If the percentages sum to zero, the function is invalid.
135+ 6. Otherwise, if both are provided and add up to greater than 100%,
136+ they are scaled accordingly so that they add up to 100%.
137+ 7. Otherwise, if both are provided and add up to less than 100%,
138+ the sum is saved as an alpha multiplier.
139+ They are then scaled accordingly so that they add up to 100%.
136140
137141 This means that
138142 <var> p1</var> becomes <var> p1</var> / (<var> p1</var> + <var> p2</var> )
139143 and
140144 <var> p2</var> becomes <var> p2</var> / (<var> p1</var> + <var> p2</var> ).
141145
142- Issue: Should we handle p1 + p2 < 100% differently? E.g. a mix with `transparent`?
143-
144146After normalizing both percentages, the result is produced via the following algorithm:
145147
1461481. Both colors are converted to the specified <<color-space>> .
147149 If the specified color space has a smaller gamut
148150 than the one in which the color to be adjusted is specified,
149151 gamut mapping will occur.
1501522. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified color space</a> .
153+ 3. If an alpha multiplier was produced during percentage normalization,
154+ the alpha component of the interpolated result is multiplied
155+ by the alpha multiplier.
156+
151157
152158The result of mixing is the color at the specified percentage along the progression
153159of the second color to the first color.
0 commit comments