img/3gamuts-oklab.svg

<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/2100 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="rgb(100% 71.02% 65.774%)"><title>oklch(62.79554% 0.257683 29.23389)</title></circle>
  <circle r="1" cx="-23.389" cy="-17.9498" fill="rgb(65.264% 80.187% 63.76%)"><title>oklch(86.64396% 0.294827 142.4953)</title></circle>
  <circle r="1" cx="-03.246" cy="31.153" fill="rgb(55.957% 71.438% 100%)"><title>oklch(45.20137% 0.313214 264.052)</title></circle>
  <circle r="1" cx="-14.944" cy="03.94" fill="rgb(76.22% 100% 100%)"><title>oklch(90.53992% 0.15455 194.7689)</title></circle>
  <circle r="1" cx="27.4566" cy="16.916" fill="rgb(100% 72.462% 100%)"><title>oklch(70.16739% 0.322491 328.3634)</title></circle>
  <circle r="1" cx="-07.137" cy="-19.857" fill="rgb(99.597% 100% 74.563%)"><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="rgb(100% 46.529% 39.431%)"><title>oklch(64.85741% 0.299485 28.95814)</title></circle>
  <circle r="1" cx="-30.424" cy="-20.7967" fill="rgb(39.07% 65.26% 37.032%)"><title>oklch(84.88293% 0.368528 145.645)</title></circle>
  <circle r="1" cx="-03.349" cy="32.142" fill="rgb(24.215% 47.2% 100%)"><title>oklch(46.63605% 0.323156 264.052)</title></circle>
  <circle r="1" cx="-20.028" cy="04.675" fill="rgb(53.712% 100% 100%)"><title>oklch(89.29016% 0.205667 193.1377)</title></circle>
  <circle r="1" cx="31.6423" cy="17.206" fill="rgb(100% 48.748% 100%)"><title>oklch(72.49796% 0.360176 331.4644)</title></circle>
  <circle r="1" cx="-08.473" cy="-22.9916" fill="rgb(99.661% 100% 51.551%)"><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.2100</text>
  <text x="-36" y="-37">Display P3</text>
  <text x="-36" y="-34">sRGB / BT.709</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>