[css-color-4] Added an HTML-Compatible hex serialization for sRGB, ##10550

Author: svgeesus

css-color-4/Overview.bs

@@ -6006,6 +6006,10 @@ In this section, the strings used in the specification and the corresponding cha
 		<td>" "</td>
 		<td>U+0020 SPACE</td>
 	</tr>
+	<tr>
+		<td>"#"</td>
+		<td>U+0023 NUMBER SIGN</td>
+	</tr>
 	<tr>
 		<td>","</td>
 		<td>U+002C COMMA</td>
@@ -6192,6 +6196,67 @@ Serializing sRGB values</h3>
 	the declared, computed and used value
 	is the corresponding sRGB value.
 
+	<h4 id="HTML-compatible-serialization-of-srgb">HTML-compatible serialization of sRGB values</h4>
+
+	If the following conditions are all true:
+
+	<ol>
+		<li>The color space is sRGB</li>
+		<li>The alpha is 1</li>
+		<li>There are no [=missing=] values</li>
+		<li>The RGB component values are internally represented as integers between 0 and 255 inclusive (i.e. 8-bit unsigned integer)</li>
+		<li>HTMLCompatible serialization is requested</li>
+	</ol>
+
+	Then corresponding sRGB values are serialized in 6-digit [=hex color notation=] as follows:
+
+	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:
+
+		<pre lang-js>
+			imageData = context.getImageData(0, 0, 1, 1);
+			console.log(imageData.colorSpace);  // "srgb"
+			console.log([...imageData.data]);   // [37, 164, 87, 255]
+		</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 HTML-compatible serialization is the string "#25a457" (not "#25A457").
+	</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:
+
+		<pre lang-js>
+			imageData = context.getImageData(0, 0, 1, 1);
+			console.log(imageData.colorSpace);  // "display-p3"
+			console.log([...imageData.data]);   // [80, 162, 95, 255]
+		</pre>
+
+		The CSS serialization is the string "color(display-p3 0.3137 0.6353 0.3725)".
+	</div>
+
+	<div class="example" id="ex-srgb-alpha">
+		For example, a color picker has returned the following values, 
+		in the sRGB colorspace:
+
+		<pre lang-js>
+			[37, 164, 87, 237]
+		</pre>
+
+		The alpha is not 1, so the CSS serialization is the string 
+		"rgba(37, 164, 87, 0.93)".
+	</div>
+
+	<h4 id="css-serialization-of-srgb">CSS serialization of sRGB values</h4>
+
 	Corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form
 	(depending on whether the (clamped) alpha is exactly 1, or not),
 	with all <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a>