[css-color-5] Add prose about how to normalize percentages now that more than 1 is allowed

Related to w3c#6064

Author: LeaVerou

css-color-5/Overview.bs

@@ -124,23 +124,33 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
 	<dfn>color-mix()</dfn> = color-mix( in <<colorspace>> , [ <<color>> && <<percentage>>? ]#{2})
 </pre>
 
-If a percentage is omitted, it defaults to 50% (an equal mix of the two colors).
+	The percentages are normalized as follows:
 
-The result is produced via the following algorithm:
+	1. Let <var>p1</var> be the first percentage and <var>p2</var> the second one.
+	2. If both percentages are omitted, they each default to 50% (an equal mix of the two colors).
+	3. Otherwise, if <var>p2</var> is omitted, it becomes 100% - <var>p1</var>
+	4. Otherwise, if <var>p1</var> is omitted, it becomes 100% - <var>p2</var>
+	5. Otherwise, if both are provided but do not add up to 100%,
+	they are scaled accordingly so that they add up to 100%.
+	This means that
+	<var>p1</var> becomes <var>p1</var> / <var>p1</var> + <var>p2</var>
+	and
+	<var>p2</var> becomes <var>p2</var> / <var>p1</var> + <var>p2</var>.
 
-1. If a percentage is omitted, it defaults to 50% (an equal mix of the two colors).
-If the color space is omitted, it defaults to 'lch'.
-2. Both colors are converted to the specified [=colorspace=].
+Issue: Should we handle p1 + p2 &lt; 100% differently? E.g. a mix with `transparent`?
+
+After normalizing both percentages, the result is produced via the following algorithm:
+
+1. Both colors are converted to the specified [=colorspace=].
 If the specified colorspace has a smaller gamut
 than the one in which the color to be adjusted is specified,
 gamut mapping will occur.
-3. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified colorspace</a>.
+2. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified colorspace</a>.
 The result of mixing is the color at the specified percentage along the progression
 of the second color to the first color.
 
-Note: As a corrollary, 0% just returns the second color converted to the specified colorspace,
-100% returns the first color converted to the specified colorspace,
-and 50% produces an equal mix of both.
+Note: As a corrollary, a percentage of 0% just returns the other color converted to the specified colorspace,
+and a percentage of 100% returns the same color converted to the specified colorspace.
 
 <div class="example">
 	This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru