[css-color-5] Add diagram showing hue-rotated color going oog

Author: svgeesus

css-color-5/Overview.bs

@@ -608,6 +608,22 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 	contrast = (Y<sub>l</sub> + 0.05) / (Y<sub>d</sub> + 0.05)
 	where Y<sub>d</sub> is the luminance of the darker color in the pair
 	and Y<sub>l</sub> is the luminance of the lighter color.
+	The factor 0.05 represents the luminance contribution of the viewing flare.
+
+	<div class="example">
+		Suppose that the single color was
+
+		<pre class="lang-css">color(display-p3 0.38 0.11 0.05)</pre>
+
+		while the first color in the list was
+
+		<pre class="lang-css">yellow</pre>
+
+		The calculation is as follows:
+		* <span class="swatch" style="--color: rgb(41.482% 7.941% 1.375%)"></span> color(display-p3 0.38 0.11 0.05) is <span class="swatch" style="--color: rgb(41.482% 7.941% 1.375%)"></span> color(xyz 0.06191 0.03568 0.00463) so the relative luminance is <b>0.03568</b>
+		* <span class="swatch" style="--color: yellow"></span> yellow is <span class="swatch" style="--color: yellow"></span> rgb(100% 100% 0%) which is <span class="swatch" style="--color: yellow"></span> color(xyz 0.76998 0.92781 0.13853) so the relative luminance is <b>0.92781</b>
+		* the contrast is (0.92781 + 0.05) / (0.03568 + 0.05) = <b>11.4123</b>
+	</div>
 
 
 	It then selects from that list
@@ -1103,6 +1119,20 @@ However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 
 	The closest color inside the sRGB gamut would be <span class="swatch" style="--color: rgb(0% 64.2% 66.3%)"></span> lch(60.71% 37.56 201.1)
 	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>
+		<img src="images/LCH-rotation-oog.svg"
+			alt="Diagram of CH plane showing relative color manipulation">
+		<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)
+			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>
+	</figure>
 </div>
 
 <h3 id="relative-OKLCH">Relative OKLCH colors</h3>

css-color-5/images/LCH-rotation-oog.svg

@@ -0,0 +1,26 @@
+<script>
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+  var angleInRadians = (angleInDegrees) * Math.PI / 180.0;
+
+  return {
+    x: centerX + (radius * Math.cos(angleInRadians)),
+    y: -1 * (centerY + (radius * Math.sin(angleInRadians)))
+  };
+}
+
+function describeArc(x, y, radius, startAngle, endAngle){
+
+    var start = polarToCartesian(x, y, radius, endAngle);
+    var end = polarToCartesian(x, y, radius, startAngle);
+
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+
+    var d = [
+        "M", start.x, start.y,
+        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
+    ].join(" ");
+
+    return d;
+}
+console.log(describeArc(0,0, 60, 200, 320));
+</script>