[css-color-5] add syntactic equivalence example

Author: svgeesus

css-color-5/Overview.bs

@@ -143,6 +143,30 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
 	and
 	<var>p2</var> becomes <var>p2</var> / (<var>p1</var> + <var>p2</var>).
 
+<div class="example">
+	These syntactic forms are thus all equivalent:
+
+	<pre class="lang-css">
+		color-mix(in lch, purple 50%, plum 50%)
+		color-mix(in lch, purple 50%, plum)
+		color-mix(in lch, purple, plum 50%)
+		color-mix(in lch, purple, plum)
+		color-mix(in lch, plum, purple)
+		color-mix(in lch, purple 80%, plum 80%)
+	</pre>
+
+	All produce a 50-50 mix of <span class="swatch" style="--color: purple"></span> purple and <span class="swatch" style="--color: plum"></span> plum,
+	in lch: <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%)"></span> lch(51.51% 52.21 325.8) which is <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%)"></span> rgb(68.51% 36.01% 68.29%).
+
+	However, this form is <em>not</em> the same, as the alpha is less than one:
+
+	<pre class="lang-css">
+		color-mix(in lch, purple 30%, plum 30%)
+	</pre>
+
+	This produces <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%, 0.6)"></span> lch(51.51% 52.21 325.8 / 0.6) which is <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%, 0.6)"></span> rgb(68.51% 36.01% 68.29% / 0.6).
+</div>
+
 After normalizing both percentages, the result is produced via the following algorithm:
 
 1. Both colors are converted to the specified <<color-space>>.