[css-color-4] add prophoto-rgb Lab plot

svgeesus · svgeesus · commit 0038262d2a74 · 2020-09-24T15:41:02.000+03:00
diff --git a/css-color-4/images/prophoto-prim-sec.svg b/css-color-4/images/prophoto-prim-sec.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-220 -190 390 380" >
+<desc>Show a top-down view of the CIE Lab colorspace.
+      The prophoto-rgb primaries and secondaries are shown,
+      with an annotation indicating the L value.
+      For comparison, the sRGB primaries and secondaries are also shown.
+</desc>
+<g fill="none" stroke="black" stroke-width="0.5">
+
+<!-- <rect fill="none" stroke="red" width="390" height="380" x="-220" y="-190"/> -->
+
+<!-- axes -->
+​<polyline points="0 -180 0 180"/>
+<polyline points="-200 0 150 0"/>
+
+<!-- tic marks -->
+<g stroke="#888">
+<path d="M-3,-170 h6 M-3,-160 h6 M-3,-150 h6 M-3,-140 h6 M-3,-130 h6 M-3,-120 h6 M-3,-110 h6 M-3,-100 h6 M-3,-90 h6 M-3,-80 h6 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 M-3,80 h6 M-3,90 h6 M-3,100 h6 M-3,110 h6 M-3,120 h6 M-3,130 h6 M-3,140 h6 M-3,150 h6 M-3,160 h6 M-3,170 h6"/>
+<path d="M140,-3 v6 M130,-3 v6 M120,-3 v6 M110,-3 v6 M100,-3 v6 M90,-3 v6 M80,-3 v6 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 M-80,-3 v6 M-90,-3 v6 M-100,-3 v6 M-110,-3 v6 M-120,-3 v6 M-130,-3 v6 M-140,-3 v6 M-150,-3 v6 M-160,-3 v6 M-170,-3 v6 M-180,-3 v6 M-190,-3 v6"/>
+
+
+
+<g stroke-dasharray="1 2" stroke="#bbb">
+<!-- radial lines for sRGB  hue angle and chroma -->
+<polyline points="0,0 80.81,-69.88"/>
+<polyline points="0,0 -79.28,-80.99"/>
+<polyline points="0,0 68.29,112.02"/>
+<polyline points="0,0 -50.66,14.96"/>
+<polyline points="0,0 93.54,60.49"/>
+<polyline points="0,0 -15.75,-93.38"/>
+</g>
+<!-- radial lines for hue angle and chroma -->
+<polyline points="0,0 139.17186043562845,-104.50175532341888"/>
+<polyline points="0,0 -186.69205420520717,-150.9904874905172"/>
+<polyline points="0,0 90.28429821891648,172.27187982674522"/>
+
+<polyline points="0,0 -168.01002214929545,21.40762820343094"/>
+<polyline points="0,0 145.2088244585193,67.89043240457988"/>
+<polyline points="0,0 -5.4509380234846745,-172.4080826763646"/>
+</g>
+</g>
+
+<!-- sRGB primaries and secondaries -->
+<g stroke-dasharray="1 2" stroke="#bbb" stroke-width="0.5" fill="white">
+  <circle r="3" cx="80.81247134537588" cy="-69.88502268764606" fill="#FF000040"/>
+  <circle r="3" cx="-79.2872863932051" cy="-80.99026038511582" fill="#00FF0040"/>
+  <circle r="3" cx="68.29859917400466" cy="112.02941005918544" fill="#0000FF40"/>
+  <circle r="3" cx="-50.665438698900886" cy="14.962023848069572" fill="#00FFFF40"/>
+  <circle r="3" cx="93.54998546820059" cy="60.49854210467602" fill="#FF00FF40"/>
+  <circle r="3" cx="-15.75288562782686" cy="-93.38840952541491" fill="#FFFF0040"/>
+</g>
+
+<!-- prophoto-rgb primaries and secondaries -->
+<!-- the fill colors are *not prophoto-rgb*  because out of gamut -->
+
+<!--
+red 60.61101808758295, 139.17186043562845, 104.50175532341888
+    60.61101808758295 174.03856929654918, 36.90225534533283
+
+yellow 99.99668795229147, -5.4509380234846745, 172.4080826763646
+       99.99668795229147, 172.49423091070622, 91.81088807909117
+
+green 87.57448274449997, -186.69205420520717, 150.9904874905172
+      87.57448274449997, 240.10841388003055, 141.0351897334142
+
+cyan 87.57863684690011, -168.01002214929545, -21.40762820343094
+     87.57863684690011, 169.3683975477807, 187.26142798567932
+
+blue  0.07737090537784042, 90.28429821891648, -172.27187982674522
+      0.07737090537784042, 194.49641406443152, 297.6581480039377
+
+magenta 60.61861041023373, 145.2088244585193, -67.89043240457988
+        60.61861041023373, 160.29570646996726, 334.94219276512507
+-->
+<g stroke="none" stroke-width="0.5">
+  <circle r="3" cx="139.17186043562845" cy="-104.50175532341888" fill="red"/>
+  <circle r="3" cx="-186.69205420520717" cy="-150.9904874905172" fill="green"/>
+  <circle r="3" cx="90.28429821891648" cy="172.27187982674522" fill="blue"/>
+  <circle r="3" cx="-168.01002214929545" cy="21.40762820343094" fill="cyan"/>
+  <circle r="3" cx="145.2088244585193" cy="67.89043240457988" fill="magenta"/>
+  <circle r="3" cx="-5.4509380234846745" cy="-172.4080826763646" fill="yellow"/>
+</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="150" y="-3">+a</text>
+  <text x="-200.5" y="-3" text-anchor="end">-a</text>
+  <text x="4" y="182">-b</text>
+  <text x="4" y="-178">+b</text>
+</g>
+
+<g font-family="sans-serif" font-size="5pt">
+  <text x="115" y="-143">L: 60.6110%<tspan x="115" dy="10">C: 174.03857<tspan x="115" dy="10">H: 36.9023</tspan></tspan></text>
+  <text x="-194" y="-112">L: 87.5745%<tspan x="-194" dy="10">C: 240.1084<tspan x="-194" dy="10">H: 141.0352</tspan></tspan></text>
+  <text x="100" y="145">L: 0.0774%<tspan x="100" dy="10">C: 194.4964<tspan x="100" dy="10">H: 297.6581</tspan></tspan></text>
+
+  <text x="-176" y="36">L: 87.5786%<tspan x="-176" dy="10">C: 169.3684<tspan x="-176" dy="10">H: 187.2614</tspan></tspan></text>
+  <text x="115" y="25">L: 60.6186%<tspan x="115" dy="10">C: 160.2957<tspan x="115" dy="10">H: 334.9422</tspan></tspan></text>
+  <text x="-63" y="-170">L: 99.9967%<tspan x="-63" dy="10">C: -5.4509<tspan x="-63" dy="10">H: 172.4081</tspan></tspan></text>
+
+</g>
+</svg>
