[css-color-5] Improve hue-rotate diagram, #7690

w3c · Sep 5, 2022 · 8c50dff · 8c50dff
1 parent 46aa862
commit 8c50dff
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
@@ -1161,15 +1161,21 @@ However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 	which is <span class="swatch" style="--color: rgb(0% 64.2% 66.3%)"></span> rgb(0% 64.2% 66.3%). The difference in chroma (37.5, instead of 90) is huge.
 
 	<figure id="fig-LCH-rotation-oog">
-		<img src="images/LCH-rotation-oog.svg"
-			width="540" height="520"
-			alt="Diagram of CH plane showing relative color manipulation">
+		<object data="images/LCH-rotation-oog.svg"
+			width="540" height="520"></object>
+			<p>Diagram of CIE CH plane showing relative color manipulation.
+				The <em>a</em> and <em>b</em> axes are labelled,
+				and cross in the middle.
+				We are looking down the central Lightness axis.
+				The maximal gamut of the sRGB color space
+				is shown as an irregular, convex polygon.
+			</p>
 		<figcaption>
 			This diagram shows the sRGB gamut, in the CIE ab plane.
 			Small circles indicate the primary and secondary color.
 			The <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span>
 			origin color, shown as a large circle, is in gamut for sRGB;
-			becomes <span class="swatch oog" style="--color: #AAA"></span> out of gamut (shown as a grey fill and red border)
+			but becomes <span class="swatch oog" style="--color: #AAA"></span> out of gamut (shown as a grey fill and red border)
 			when the LCH hue is rotated -120°.
 			The gamut-mapped <span class="swatch" style="--color: rgb(0% 64.2% 66.3%)"></span> result has much lower chroma.
 		</figcaption>

diff --git a/css-color-5/images/LCH-rotation-oog.svg b/css-color-5/images/LCH-rotation-oog.svg