[css-color-4] lets try a chromaticity diagram

svgeesus · svgeesus · commit 1c90741ccdb5 · 2020-04-13T17:33:39.000-04:00
diff --git a/css-color-4/images/UCS-display-p3.svg b/css-color-4/images/UCS-display-p3.svg
@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.1 -0.7 0.8 0.8" overflow="visible">
+<desc>Show u*,v* UCS diagram
+with the gamuts of sRGB and display-p3.
+</desc>
+
+<!-- tongue -->
+<path fill="none" stroke="black" stroke-width="0.003" d="M 0.256804  -0.016594
+  L 0.256637  -0.016593
+  L 0.256418  -0.016266
+  L 0.256085  -0.016263
+  L 0.255699  -0.015935
+  L 0.255200  -0.015932
+  L 0.254535  -0.015927
+  L 0.253704  -0.015921
+  L 0.252207  -0.016885
+  L 0.249615  -0.019128
+  L 0.246120  -0.022623
+  L 0.241063  -0.027948
+  L 0.234690  -0.035011
+  L 0.226630  -0.043680
+  L 0.216060  -0.054946
+  L 0.203340  -0.068779
+  L 0.187720  -0.087114
+  L 0.168963  -0.111946
+  L 0.144076  -0.150984
+  L 0.114692  -0.204374
+  L 0.082816  -0.270829
+  L 0.052134  -0.342686
+  L 0.028159  -0.411679
+  L 0.011891  -0.469843
+  L 0.003473  -0.513066
+  L 0.001438  -0.543162
+  L 0.004643  -0.563843
+  L 0.005859  -0.567036
+  L 0.007213  -0.569939
+  L 0.008771  -0.572575
+  L 0.010438  -0.574905
+  L 0.012285  -0.576969
+  L 0.014220  -0.578754
+  L 0.016315  -0.580309
+  L 0.018482  -0.581618
+  L 0.020756  -0.582743
+  L 0.023116  -0.583667
+  L 0.025566  -0.584422
+  L 0.028050  -0.585009
+  L 0.030633  -0.585478
+  L 0.033285  -0.585851
+  L 0.036008  -0.586142
+  L 0.050059  -0.586754
+  L 0.064335  -0.586523
+  L 0.079224  -0.585616
+  L 0.095269  -0.584113
+  L 0.112701  -0.582069
+  L 0.131858  -0.579553
+  L 0.153101  -0.576592
+  L 0.176586  -0.573182
+  L 0.202596  -0.569364
+  L 0.231170  -0.565107
+  L 0.262343  -0.560441
+  L 0.295958  -0.555411
+  L 0.331527  -0.550115
+  L 0.368060  -0.544626
+  L 0.403475  -0.539334
+  L 0.437943  -0.534187
+  L 0.469171  -0.529561
+  L 0.496768  -0.525419
+  L 0.520257  -0.521894
+  L 0.539920  -0.518977
+  L 0.556503  -0.516489
+  L 0.570880  -0.514332
+  L 0.583036  -0.512508
+  L 0.592866  -0.511070
+  L 0.600496  -0.509926
+  L 0.606437  -0.509035
+  L 0.610879  -0.508368
+  L 0.613777  -0.507933
+  L 0.616162  -0.507576
+  L 0.618025  -0.507296
+  L 0.619897  -0.507015
+  L 0.621507  -0.506774
+  L 0.622584  -0.506612
+  L 0.623123  -0.506531
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  Z"/>
+
+  <!-- sRGB
+  red 0.4507042253521127, 0.522887323943662
+  green  0.125, 0.5625
+  blue 0.17543859649122806, 0.15789473684210528
+  white 0.1978300066428368, 0.468319994938791
+  -->
+  <polygon fill="none" stroke="#CCC" stroke-dasharray="0.004 0.003" stroke-width="0.004" points="0.45070, -0.522887 0.125, -0.5625 0.17544, -0.15789"/>
+  <circle r="0.006" cx="0.45070" cy="-0.522887" fill="red" fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.12500" cy="-0.56250" fill="green"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.17544" cy="-0.15789" fill="blue"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.19783" cy="-0.46832" fill="white" stroke="#777" stroke-width="0.002"/>
+
+<!-- display-p3
+red 0.4963503649635037, 0.5255474452554745
+green 0.0986046511627907, 0.5776744186046511
+blue 0.17543859649122806, 0.15789473684210528
+white 0.1978300066428368, 0.468319994938791
+-->
+  <polygon fill="none" stroke="#555" stroke-dasharray="0.006 0.003" stroke-width="0.004" points="0.49635, -0.52554 0.09860, -0.57767 0.17544, -0.15789"/>
+  <circle r="0.006" cx="0.49635" cy="-0.52554" fill="red" />
+  <circle r="0.006" cx="0.09860" cy="-0.57767" fill="green" />
+  <circle r="0.006" cx="0.17544" cy="-0.15789" fill="blue" />
+
+  </svg>
