[css-color-4] Add corrected examples for HTML-compatible serialization …

…#10550

Co-authored-by: Anne van Kesteren <[email protected]>

css-color-4/Overview.bs

@@ -6216,37 +6216,46 @@ Serializing sRGB values</h3>
 	A seven-character string consisting of the character "#", followed immediately by the two-digit hexadecimal representations of the red component, the green component, and the blue component, in that order, using <a href="https://infra.spec.whatwg.org/#ascii-lower-hex-digit">ASCII lower hex digits</a>. No spaces are permitted.
 
 	<div class="example" id="ex-canvas-srgb">
-		For example, the pixel value from a canvas 2D context 
-		using the sRGB colorspace is returned as a Uint8ClampedArray:
+		For example, fill style is set to <span class="swatch" style="--color: rgb(255, 0, 255)"></span> magenta:
 
 		<pre lang-js>
-			imageData = context.getImageData(0, 0, 1, 1);
-			console.log(imageData.colorSpace);  // "srgb"
-			console.log([...imageData.data]);   // [37, 164, 87, 255]
+			context.fillStyle = "rgb(255, 0, 255)"
+			console.log(context.fillStyle); // "#ff00ff"
 		</pre>
 
-		The color space is sRGB, the representation is 8 bits per component, the data format does not produce ''none'' values nor does it support extended range values, and the alpha is 1 (255/255).
+		The color space is sRGB, the representation is 8 bits per component, 
+		the data format does not produce ''none'' values nor does it support extended range values, 
+		and the alpha is 1.
 
-		The HTML-compatible serialization is the string "#25a457" (not "#25A457").
+		The HTML-compatible serialization is the string "#ff00ff" (not "#FF00FF").
 	</div>
 
 	Otherwise, for sRGB the <a href="#css-serialization-of-srgb">CSS serialization of sRGB values is used</a> and for other color spaces, the relevant <a href="#serializing-color-values">serialization</a> of the <<color>> value.
 
 	<div class="example" id="ex-canvas-p3">
-		For example, the pixel value from a canvas 2D context, 
-		this time using the display-p3 colorspace is returned,
-		again as a Uint8ClampedArray:
+		For example, fill style is set to <span class="swatch" style="--color: rgb(48.63% 13.85% 15.73%)"></span>  a dark brown, in CIE Lab:
 
 		<pre lang-js>
-			imageData = context.getImageData(0, 0, 1, 1);
-			console.log(imageData.colorSpace);  // "display-p3"
-			console.log([...imageData.data]);   // [80, 162, 95, 255]
+			context.fillStyle = "lab(29% 39 20)";
+			console.log(context.fillStyle); // "lab(29 39 20)"
 		</pre>
 
-		The CSS serialization is the string "color(display-p3 0.3137 0.6353 0.3725)".
+		The CSS serialization is the string "lab(29 39 20)".
 	</div>
 
 	<div class="example" id="ex-srgb-alpha">
+		For example, fill style is set to <span class="swatch" style="--color: #ff00ffed"></span> semi-transparent magenta:
+
+		<pre lang-js>
+			context.fillStyle = "#ff00ffed";
+			console.log(context.fillStyle); // "rgba(255, 0, 255, 0.93)"
+		</pre>
+
+		The alpha is not 1, so the CSS serialization is the string 
+		"rgba(255, 0, 255, 0.93)".
+	</div>
+
+	<!-- <div class="example" id="ex-srgb-alpha">
 		For example, a color picker has returned the following values, 
 		in the sRGB colorspace:
 
@@ -6256,7 +6265,7 @@ Serializing sRGB values</h3>
 
 		The alpha is not 1, so the CSS serialization is the string 
 		"rgba(37, 164, 87, 0.93)".
-	</div>
+	</div> -->
 
 	<h4 id="css-serialization-of-srgb">CSS serialization of sRGB values</h4>