[css-color-4] Fix #4703 & improve diagram

svgeesus · svgeesus · commit ef3269f02232 · 2020-02-07T00:46:39.000-05:00
diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
@@ -1966,12 +1966,11 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 	but doesn't map hues to angles in the same way
 	because they are evenly spaced perceptually.
 	Instead, ''0deg'' points along the positive "a" axis (toward purplish red),
+	(as does ''360deg'', ''720deg'', etc.);
 	''90deg'' points along the positive "b" axis (toward mustard yellow),
 	''180deg'' points along the negative "a" axis (toward greenish cyan),
 	and ''270deg'' points along the negative "b" axis (toward sky blue).
-	If the provided value is negative,
-	or is greater than or equal to ''360deg'',
-	it is set to the value modulo 360.
+
 
 	<!-- add diagram showing hue angles in LCH for RGB primaries and secondaries in sRGB, P3, and Rec.2020 -->
 
diff --git a/css-color-4/images/CH-plane-wheel.svg b/css-color-4/images/CH-plane-wheel.svg
@@ -1,16 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-80 -80 160 160" overflow="visible">
 <desc>Show the L=50 plane of the CIE Lab colorspace.
       20 degree increments in CIE LCH are converted to Lab,
       then displayed as circles with the cx coordinate = CIE a and
       the cy coordinate = CIE (-b) to give a Y-up coordinate system.
-      Two levels of Chroma are displayed, 20 and 40.
-      All the C=20 fit inside sRGB gamut, some of C=40 are outside.
+      Three levels of Chroma are displayed: 20, 40 and 60.
+      All the C=20 fit inside sRGB gamut, some of C=40 and C=60 are outside.
       The colors are converted to sRGB which is used to fill the circles
       The out of gamut circles are visualized as grey with a red warning outer stroke.
 </desc>
 <g fill="none" stroke="black" stroke-width="0.3">
-  <polyline points="0 -50 0 50"/>
-  <polyline points="-50 0 50 0"/>
+  <polyline points="0 -70 0 70"/>
+  <polyline points="-70 0 70 0"/>
+</g>
+<!-- tic marks -->
+<g stroke="#888" stroke-width="0.5">
+<path d="M-3,-70 h6 M-3,-60 h6 M-3,-50 h6 M-3,-40 h6 M-3,-30 h6 M-3,-20 h6 M-3,-10 h6 M-3,10 h6 M-3,20 h6 M-3,30 h6 M-3,40 h6 M-3,50 h6 M-3,60 h6 M-3,70 h6"/>
+<path d="M70,-3 v6 M60,-3 v6 M50,-3 v6 M40,-3 v6 M30,-3 v6 M20,-3 v6 M10,-3 v6 M-10,-3 v6 M-20,-3 v6 M-30,-3 v6 M-40,-3 v6 M-50,-3 v6 M-60,-3 v6 M-70,-3 v6"/>
 </g>
 <g class="c20" stroke="none" stroke-width="0.5">
   <circle r="3" cx="20" cy="0" fill="rgb(59.26% 41.67% 46.97%)"/>
@@ -52,14 +57,35 @@
   <circle r="3" cx="30.641777724759113" cy="25.711504387461584" fill="rgb(60.23% 39.01% 64.12%)"/>
   <circle r="3" cx="37.58770483143634" cy="13.680805733026745" fill="rgb(66.89% 36.21% 56.26%)"/>
 </g>
+<g class="c60" stroke="none" stroke-width="0.5">
+  <circle r="3" cx="60" cy="0" fill="rgb(80.704% 24.6213% 47.783%)"/>
+  <circle r="3" cx="56.381557247154504" cy="-20.521208599540124" fill="rgb(80.861% 26.412% 34.481%)"/>
+  <circle r="3" cx="45.96266658713868" cy="-38.56725658119235" fill="rgb(76.918% 31.706% 21.963%)"/>
+  <circle r="3" cx="30" cy="-51.96152422706631" fill="rgb(69.584% 37.946% 9.557%)"/>
+  <circle r="3" cx="10.418890660015824" cy="-59.088465180732484" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-10.418890660015824" cy="-59.088465180732484" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-29.999999999999986" cy="-51.96152422706632" fill="rgb(32.937% 51.617% 1.595%)"/>
+  <circle r="3" cx="-45.96266658713867" cy="-38.56725658119237" fill="rgb(9.103% 53.901% 17.945%)"/>
+  <circle r="3" cx="-56.3815572471545" cy="-20.52120859954013" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-60" cy="0" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-56.381557247154504" cy="20.52120859954012" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-45.96266658713868" cy="38.56725658119235" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-30" cy="51.961524227066306" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="-10.418890660015819" cy="59.088465180732484" fill="#DDD" stroke="#C00"/>
+  <circle r="3" cx="10.418890660015798" cy="59.088465180732484" fill="rgb(27.324% 45.790% 86.559%)"/>
+  <circle r="3" cx="30" cy="51.96152422706631" fill="rgb(51.018% 40.1356% 81.824%)"/>
+  <circle r="3" cx="45.96266658713867" cy="38.567256581192375" fill="rgb(66.177% 33.664% 72.908%)"/>
+  <circle r="3" cx="56.381557247154504" cy="20.521208599540117" fill="rgb(75.919% 27.681% 61.058%)"/>
+</g>
+
 <circle r="4"/>
 <circle r="3" fill="#777"/>
 <circle r="2" fill="#fff"/>
 <g font-family="sans-serif" font-size="6pt">
 <!-- haha not really 6pt but a unit is required per CSS -->
-  <text x="50" y="-2">+a</text>
-  <text x="-50" y="-2" text-anchor="end">-a</text>
-  <text x="4" y="52">-b</text>
-  <text x="4" y="-48">+b</text>
+  <text x="70" y="-2">+a</text>
+  <text x="-70.2" y="-2" text-anchor="end">-a</text>
+  <text x="4" y="72">-b</text>
+  <text x="4" y="-68">+b</text>
 </g>
 </svg>
