more images

svgeesus · svgeesus · commit 85116817e796 · 2022-07-09T13:00:22.000+03:00
diff --git a/css-color-4/images/2020-prim-sec.svg b/css-color-4/images/2020-prim-sec.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-180 -145 335 290" overflow="visible" width="670" height="580">
-<desc>Show a top-down view of the CIE Lab color space.
+<desc>Show a top-down view of the OKLab color space.
       The rec2020 primaries and secondaries are shown,
       with an annotation indicating the L value.
-      For comparison, the sRGB primaries and secondaries are also shown.
+      For comparison, the sRGB and display-p3 primaries and secondaries are also shown.
 </desc>
 <rect x="-180" y="-145" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
diff --git a/css-color-4/images/3gamuts-oklab.svg b/css-color-4/images/3gamuts-oklab.svg
@@ -0,0 +1,325 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-45 -45 90 90">
+<desc>
+    Show a top-down view of the OKLab color space.
+    The rec2020 primaries and secondaries are shown,
+    with an annotation indicating the L value.
+    For comparison, the sRGB and display-p3 primaries and secondaries are also shown.
+    Scaling is 100x -100x for a and b
+</desc>
+<rect x="-45" y="-45" width="100%" height="100%" fill="white" />
+<g fill="none" stroke="black" stroke-width="0.2">
+
+<!-- axes -->
+​<polyline points="0 -45 0 45"/>
+<polyline points="-45 0 45 0"/>
+
+<!-- tic marks -->
+<g stroke="#888">
+<path d="M-1,-40 h2 M-1,-35 h2 M-1,-30 h2 M-1,-25 h2 M-1,-20 h2 M-1,-15 h2 M-1,-10 h2 M-1,-5 h2 M-1,5 h2 M-1,10 h2 M-1,15 h2 M-1,20 h2 M-1,25 h2 M-1,30 h2 M-1,35 h2 M-1,40 h2"/>
+
+<path d="M40,-1 v2 M35,-1 v2 M30,-1 v2 M25,-1 v2 M20,-1 v2 M15,-1 v2 M10,-1 v2 M5,-1 v2 M-5,-1 v2 M-10,-1 v2 M-15,-1 v2 M-20,-1 v2 M-25,-1 v2 M-30,-1 v2 M-35,-1 v2 M-40,-1 v2"/>
+
+
+<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 116.89, -106.74"/>
+<polyline points="0,0 -160.72, -109.23"/>
+<polyline points="0,0 74.46,126.25"/>
+
+<polyline points="0,0 -113.05, 20.83"/>
+<polyline points="0,0 125.90, 60.10"/>
+<polyline points="0,0 -14.92, -132.12"/> -->
+</g>
+</g>
+
+<!-- boundary from https://codepen.io/svgeesus/pen/RwMrgZJ?editors=0010 -->
+<polyline stroke="#BBD" stroke-width="0.4" fill="none" points="
+22.486306106597397 , -12.584629853073508
+15.892674557703437 , -13.83854471315422
+10.933418916050053 , -14.89215827713285
+6.988727115854232 , -15.811121637758346
+3.7301945053456356 , -16.63207021384478
+0.9637330966502211 , -17.377821522284652
+-1.434348596113283 , -18.063682033250405
+-3.5473920003108503 , -18.70048650502615
+-5.434019660337724 , -19.29622362730241
+-7.136908036816808 , -19.856975465179517
+-8.530917889167256 , -19.664477082926567
+-10.001862729720418 , -19.467846524340437
+-11.55815589370569 , -19.266829696226818
+-13.20962010565342 , -19.061143145126525
+-14.967817107700238 , -18.850468571953805
+-16.846479624921557 , -18.634445842296266
+-18.86208652402545 , -18.41266392847164
+-21.034642556240897 , -18.18464894436298
+-23.388757418790817 , -17.949847989672985
+-21.79310997502593 , -14.287208154246612
+-20.47142846872097 , -11.12991719159523
+-19.348907073145465 , -8.343260893462546
+-18.37821520299046 , -5.841857028153818
+-17.527317272435273 , -3.5677941709473804
+-16.773428983788722 , -1.47978381070617
+-16.099718528180397 , 0.45276117921273507
+-15.493372096230118 , 2.2531994666496136
+-14.944393961066076 , 3.939815774426181
+-14.426510095197115 , 4.66036912508041
+-13.892116190451492 , 5.413305332437601
+-13.340160612967445 , 6.201645886855733
+-12.769514277285854 , 7.028858466550347
+-12.178972944083844 , 7.8989508220675635
+-11.567266171461654 , 8.816591161597543
+-10.933077856502276 , 9.787264690351517
+-10.275086896393454 , 10.817480378833476
+-9.592043004233581 , 11.915048959314733
+-8.882904867158665 , 13.089464308353826
+-8.147091384021692 , 14.352438950517143
+-7.384944393155635 , 15.718676530257481
+-6.598603000721848 , 17.207022089258405
+-5.793720826756626 , 18.842241274882287
+-4.983026140407565 , 20.657902846367726
+-4.194270173913855 , 22.70132678718559
+-3.4898964386953004 , 25.042736128839
+-3.0235530422121015 , 27.79397602981273
+-3.245698416876397 , 31.152814767837523
+6.463433674955765 , 28.74156097476964
+12.16020596960316 , 26.68000965062619
+16.081687411642026 , 24.865708603303283
+19.018913106302165 , 23.24008228175718
+21.340341102337558 , 21.764657679079
+23.24543843340824 , 20.412307323617885
+24.85324039182084 , 19.162998423388643
+26.239874265409192 , 18.001430103229776
+27.456629431932853 , 16.915605926294262
+27.563147456468744 , 15.165449582525936
+27.617841130965136 , 13.250954723258069
+27.60292490956816 , 11.134882464464246
+27.492730445871345 , 8.765224676544815
+27.24857847498607 , 6.065897990163204
+26.808651076906603 , 2.9184426081134363
+26.0654081844084 , -0.8786617638901983
+24.80515310680514 , -5.718647798423354
+22.486306106597397 , -12.584629853073508
+"/>
+
+<!--
+r oklab(62.79554% 0.224863 0.125846) oklch(62.79554% 0.257683 29.23389)
+g oklab(86.64396% -0.23389 0.179498) oklch(86.64396% 0.294827 142.4953)
+b oklab(45.20137% -0.03246 -0.31153) oklch(45.20137% 0.313214 264.052)
+c oklab(90.53992% -0.14944 -0.0394)  oklch(90.53992% 0.15455 194.7689)
+m oklab(70.16739% 0.274566 -0.16916) oklch(70.16739% 0.322491 328.3634)
+y oklab(96.79827% -0.07137 0.19857)  oklch(96.79827% 0.211006 109.7692)
+-->
+
+
+<!-- sRGB primaries and secondaries -->
+<g stroke-dasharray=".1 .2" stroke="#bbb" stroke-width="0.2" fill="white">
+  <circle r="1" cx="22.4863" cy="-12.5846" fill="#FF000040"><title>oklch(62.79554% 0.257683 29.23389)</title></circle>
+  <circle r="1" cx="-23.389" cy="-17.9498" fill="#00FF0040"><title>oklch(86.64396% 0.294827 142.4953)</title></circle>
+  <circle r="1" cx="-03.246" cy="31.153" fill="#0000FF40"><title>oklch(45.20137% 0.313214 264.052)</title></circle>
+  <circle r="1" cx="-14.944" cy="03.94" fill="#00FFFF40"><title>oklch(90.53992% 0.15455 194.7689)</title></circle>
+  <circle r="1" cx="27.4566" cy="16.916" fill="#FF00FF40"><title>oklch(70.16739% 0.322491 328.3634)</title></circle>
+  <circle r="1" cx="-07.137" cy="-19.857" fill="#FFFF0040"><title>oklch(96.79827% 0.211006 109.7692)</title></circle>
+</g>
+
+<!-- 2020 primaries and secondaries -->
+<!-- the fill colors are sRGB, *not the 2020 colors* -->
+
+<!-- boundary from https://codepen.io/svgeesus/pen/RwMrgZJ?editors=0010 -->
+<polyline stroke="#DBB" stroke-width="0.4" fill="none" points="
+33.27304176413115 , -14.94382532233719
+25.52920673636664 , -16.467925669615507
+19.160109711435805 , -17.75406740361891
+13.754995576122775 , -18.876245801729137
+9.063901706823712 , -19.87780655248984
+4.9229076442444 , -20.786435977280753
+1.2185306112410366 , -21.620960922126052
+-2.131101470585067 , -22.394805769228988
+-5.187006918892534 , -23.117905394295736
+-7.995875701372135 , -23.797835589821293
+-10.485854300952186 , -23.574510701736486
+-13.16926830353189 , -23.34623359152429
+-16.077282287927076 , -23.11258659935428
+-19.249118223679613 , -22.873060975514004
+-22.735110017017195 , -22.627021440674866
+-26.60137855616022 , -22.373650930321332
+-30.937299971213182 , -22.11186065266749
+-35.868084485419445 , -21.840135793885874
+-41.57743674051274 , -21.556252739679138
+-39.441952639520736 , -16.56167917627036
+-37.80506920900397 , -12.47900217500646
+-36.49333234837861 , -8.99640705469581
+-35.41213581234749 , -5.943609994611854
+-34.503578748115885 , -3.216223997404888
+-33.729382938742745 , -0.7450993461284638
+-33.062798815301925 , 1.51820379515204
+-32.484333395631225 , 3.609083522573764
+-31.979308420144676 , 5.554279618904823
+-31.183590018637037 , 6.363192855814692
+-30.36513003681139 , 7.20591578371833
+-29.522611587136332 , 8.08549345002515
+-28.654643675613478 , 9.005414558801094
+-27.75977442403631 , 9.969704558359672
+-26.836517613567313 , 10.983045053452722
+-25.88340158524896 , 12.050929169731994
+-24.899055995970777 , 13.179866931727535
+-23.882363668052513 , 14.377661675384168
+-22.83272683659919 , 15.653789763685166
+-21.750540279220566 , 17.01993466442665
+-20.63805245564249 , 18.490759070060093
+-19.50098854462424 , 20.085057974707276
+-18.35175903356226 , 21.827549102862488
+-17.216223687123332 , 23.751789111276768
+-16.149253835636017 , 25.90521871694871
+-15.275239419313463 , 28.35861031607834
+-14.915145710412038 , 31.225835100353866
+-16.137844088910764 , 34.71324511215634
+6.75108119347056 , 31.378277737113315
+16.48042176485604 , 28.701471950160627
+22.53087317191112 , 26.413825507699862
+26.850042804266412 , 24.40341082189167
+30.178002377421194 , 22.604353075007598
+32.87195066558925 , 20.973160763240305
+35.12969660940324 , 19.479182227119708
+37.07126787586315 , 18.099828702690402
+38.77445851328696 , 16.817889173845614
+38.91282792585587 , 14.879685864098702
+38.983352505114524 , 12.766284471917066
+38.96611153451121 , 10.438985080573248
+38.83290480164966 , 7.843963778432861
+38.542011677155436 , 4.902833038759258
+38.02791032819155 , 1.4941514214969143
+37.178520221159495 , -2.5874654357195603
+35.7748622395621 , -7.73969094197936
+33.27304176413115 , -14.94382532233719
+"/>
+
+<!--
+rec2020
+r oklab(68.7089% 0.33273 0.149438)    oklch(68.7089% 0.364748 24.18614)
+g oklab(82.97772% -0.41577 0.215563)  oklch(82.97772% 0.468333 152.5951)
+b oklab(42.34483% -0.16138 -0.34713)  oklch(42.34483% 0.382811 245.0667)
+c oklab(86.51035% -0.31979 -0.05554)  oklch(86.51035% 0.324581 189.853)
+m oklab(74.43006% 0.387745 -0.16818)  oklch(74.43006% 0.422646 336.5519)
+y oklab(97.25923% -0.07996 0.237978)  oklch(97.25923% 0.251052 108.5719)
+ -->
+
+<g  stroke="#bbb" stroke-width="0.2" fill="white">
+  <circle r="1" cx="33.273" cy="-14.9438" fill="red"><title>oklch(68.7089% 0.364748 24.18614)</title></circle>
+  <circle r="1" cx="-41.577" cy="-21.556" fill="green"><title>oklch(82.97772% 0.468333 152.5951)</title></circle>
+  <circle r="1" cx="-16.138" cy="34.713" fill="blue"><title>oklch(42.34483% 0.382811 245.0667)</title></circle>
+  <circle r="1" cx="-31.979" cy="05.554" fill="cyan"><title>oklch(86.51035% 0.324581 189.853)</title></circle>
+  <circle r="1" cx="38.7745" cy="16.818" fill="magenta"><title>oklch(74.43006% 0.422646 336.5519)</title></circle>
+  <circle r="1" cx="-07.996" cy="-23.7978" fill="yellow"><title>oklch(97.25923% 0.251052 108.5719)</title></circle>
+</g>
+
+<!-- Display-p3 gamut -->
+
+<!-- boundary from https://codepen.io/svgeesus/pen/ExEPXMv?editors=0010 -->
+<polyline stroke="#BDB" stroke-width="0.4" fill="none" points="
+26.204175072605494 , -14.500192827479108
+19.028916682898828 , -15.971391981425576
+13.410936790899003 , -17.20517156323707
+8.813604522070955 , -18.27932455257894
+4.934575714136291 , -19.237493690598008
+1.5868184262031126 , -20.106875717083643
+-1.3532268092438682 , -20.905692813069678
+-3.9712937544440274 , -21.646820158407508
+-6.329187910490458 , -22.339732177310456
+-8.472854285355202 , -22.991628193623093
+-10.260843378323909 , -22.77112898026098
+-12.163095272798952 , -22.54578048751137
+-14.194306558728359 , -22.315250345942296
+-16.372120461630374 , -22.079158739895334
+-18.717966956235816 , -21.83706673717445
+-21.25822701991397 , -21.58846033763975
+-24.025885204683057 , -21.33272809881034
+-27.062941819932018 , -21.069128799972813
+-30.42405217547921 , -20.796743046686156
+-28.307572594770143 , -16.183369662546177
+-26.627607834071682 , -12.369171572109938
+-25.240257474584816 , -9.095277652840828
+-24.064063139805565 , -6.214915449529035
+-23.04796306077106 , -3.635897055484738
+-22.157632725302356 , -1.2961025271906457
+-21.368790494729605 , 0.8485365478110185
+-20.663576716416877 , 2.8305373333087136
+-20.02844519024172 , 4.674651659894014
+-18.63835082648684 , 6.3539372781996395
+-17.15052561231981 , 8.192401166070551
+-15.549780061499908 , 10.224312625787668
+-13.817808513977042 , 12.496778886314008
+-11.93327850902901 , 15.07735566775118
+-9.874322849227212 , 18.068515556675237
+-7.631222750411143 , 21.638331731081838
+-5.2691459754871275 , 26.096762006746882
+-3.3487162154470895 , 32.14159868564584
+7.692036859255919 , 29.633485681130278
+14.143261518657669 , 27.484110206008673
+18.59379927225407 , 25.587054545506888
+21.939206475551043 , 23.882543446497067
+24.593342098020475 , 22.331492933835072
+26.779539898483506 , 20.906373142470123
+28.630941580938202 , 19.586850445012296
+30.232705991684984 , 18.35738396913513
+31.642252046842817 , 17.205778705185427
+31.775648146293666 , 15.375528866033239
+31.8538714088758 , 13.37016739256468
+31.857514484790343 , 11.149164164641967
+31.758363664264667 , 8.655511773647062
+31.513503496277696 , 5.805032875257698
+31.053464475811793 , 2.4649718274199817
+30.255108185485025 , -1.594837091098289
+28.86604375585724 , -6.8378290505079375
+26.204175072605494 , -14.500192827479108
+"/>
+
+<!-- Display-p3 primaries and secondaries -->
+<!--
+r oklab(64.85741% 0.262042 0.145002) oklch(64.85741% 0.299485 28.95814)
+g oklab(84.88293% -0.30424 0.207967) oklch(84.88293% 0.368528 145.645)
+b oklab(46.63605% -0.03349 -0.32142) oklch(46.63605% 0.323156 264.052)
+c oklab(89.29016% -0.20028 -0.04675) oklch(89.29016% 0.205667 193.1377)
+m oklab(72.49796% 0.316423 -0.17206) oklch(72.49796% 0.360176 331.4644)
+y oklab(96.47641% -0.08473 0.229916) oklch(96.47641% 0.245031 110.2298)
+ -->
+
+
+<g stroke-dasharray=".2 .2" stroke="#bbb" stroke-width="0.2" fill="white">
+  <circle r="1" cx="26.2042" cy="-14.5002" fill="#FF000070"><title>oklch(64.85741% 0.299485 28.95814)</title></circle>
+  <circle r="1" cx="-30.424" cy="-20.7967" fill="#00FF0070"><title>oklch(84.88293% 0.368528 145.645)</title></circle>
+  <circle r="1" cx="-03.349" cy="32.142" fill="#0000FF70"><title>oklch(46.63605% 0.323156 264.052)</title></circle>
+  <circle r="1" cx="-20.028" cy="04.675" fill="#00FFFF70"><title>oklch(89.29016% 0.205667 193.1377)</title></circle>
+  <circle r="1" cx="31.6423" cy="17.206" fill="#FF00FF70"><title>oklch(72.49796% 0.360176 331.4644)</title></circle>
+  <circle r="1" cx="-08.473" cy="-22.9916" fill="#FFFF0070"><title>oklch(96.47641% 0.245031 110.2298)</title></circle>
+</g>
+
+
+<circle r="1"/>
+<circle r="0.7" fill="#777"/>
+<circle r="0.4" fill="#fff"/>
+<g font-family="sans-serif" font-size="2pt">
+<!-- haha not really 2pt but a unit is required per CSS -->
+  <text x="42" y="-1">+a</text>
+  <text x="-43" y="-1" text-anchor="end">-a</text>
+  <text x="2" y="44">-b</text>
+  <text x="2" y="-42">+b</text>
+</g>
+
+<g font-family="sans-serif" font-size="1.8pt" fill="#444">
+  <text x="-36" y="-40">Rec BT.2020</text>
+  <text x="-36" y="-37">Display P3</text>
+  <text x="-36" y="-34">sRGB</text>
+  <polyline stroke="#DBB" stroke-width="0.4" fill="none" points="-44 -41 -38 -41"/>
+  <polyline stroke="#BDB" stroke-width="0.4" fill="none" points="-44 -38 -38 -38"/>
+  <polyline stroke="#BBD" stroke-width="0.4" fill="none" points="-44 -35 -38 -35"/>
+</g>
+
+</svg>
diff --git a/css-color-4/images/UCS-rec2020-PRM4200.svg b/css-color-4/images/UCS-rec2020-PRM4200.svg
