[css-color-5] Add example, w3c#8499

Author: svgeesus

css-color-5/Overview.bs

@@ -974,6 +974,39 @@ so it has meaningful values for the channels.</p>
 	which determines how "colorful" the color is.)
 </div>
 
+<div class="example" id="ex-no-percentage-magic">
+	<p>Beware when using components outside their normal position;
+		when percentages are resolved,
+		there is no "magic scaling"
+		to account for the changed position.
+		For example,</p>
+
+	<pre>
+		color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);
+	</pre>
+
+	<p>The alpha component is resolved as a <<number>>,
+		giving 0.6; thus the resulting color is
+		<span class="swatch" style="--color: rgb(60% 60% 60% / 0.9)"></span> ''color(srgb 0.6 0.6 0.6 / 0.9)''.
+	</p>
+
+	<p>However, in this second example, again the alpha resolves to 0.6,
+		giving a very different color due to the color component range in
+		legacy rgb() syntax:
+	</p>
+
+	<pre>
+		color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);
+	</pre>
+
+	<p>which results in 
+	<span class="swatch" style="--color: rgb(0.235% 60% 60% / 0.9)"></span> ''rgb(0.6 153 153 / 0.9)''
+	and not
+	<span class="swatch" style="--color: rgb(153 153 153 / 0.9)"></span> ''rgb(153 153 153 / 0.9)''.
+	</p>
+	
+</div>
+
 Missing components are handled the same way as with 
 [[css-color-4#interpolation-missing]]:
 the origin colorspace and the relative function colorspace