[css-color-4] macbeth cmyk round-trip figure

svgeesus · svgeesus · commit bb87415ca185 · 2020-03-28T23:02:59.000-04:00
diff --git a/css-color-4/images/macbeth-roundtrip.svg b/css-color-4/images/macbeth-roundtrip.svg
@@ -0,0 +1,173 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45">
+<desc>Show a MacBeth color checker.
+Rectangular patches are sRGB, converted from averaged measured Lab values.
+Circles show same Lab values, converted to CMYK
+with an ICC profile
+for premium coated paper, tac 300% and medium GCR
+with the FOGRA51 characterisation set.
+CMYK values then coverted back to Lab
+with the same profile (round-trip) and then converted to sRGB.
+Note: the cyan patch has has the LCH Chroma reduced,
+to bring it inside the sRGB gamut.
+See file Macbeth.txt in the workings directory for details.
+</desc>
+<style>
+.dark_skin rect { fill: rgb(45.8702% 32.0071% 26.3813%)}
+.dark_skin circle { fill: rgb(45.8219% 32.0269% 26.3849%)}
+.light_skin rect { fill: rgb(78.0170% 58.1957% 50.7737%)}
+.light_skin circle { fill: rgb(78.0518% 58.2907% 50.8740%)}
+.blue_sky rect { fill: rgb(35.8614% 48.0665% 61.6556%)}
+.blue_sky circle { fill: rgb(35.8751% 48.0966% 61.6838%)}
+.foliage rect { fill: rgb(34.9582% 42.3446% 25.4209%)}
+.foliage circle { fill: rgb(34.9923% 42.3884% 25.4617%)}
+.blue_flower rect { fill: rgb(51.2952% 50.4131% 68.9186%)}
+.blue_flower circle { fill: rgb(51.3273% 50.4742% 68.9499%)}
+.bluish_green rect { fill: rgb(36.8792% 74.3685% 67.4749%)}
+.bluish_green circle { fill: rgb(37.2990% 74.2337% 67.3083%)}
+.orange rect { fill: rgb(87.3729% 48.7430% 17.2037%)}
+.orange circle { fill: rgb(87.3868% 48.7650% 17.2999%)}
+.purplish_blue rect { fill: rgb(27.0560% 36.0687% 65.7971%)}
+.purplish_blue circle { fill: rgb(26.7236% 35.6341% 63.6677%)}
+.moderate_red rect { fill: rgb(78.2366% 32.9961% 38.2061%)}
+.moderate_red circle { fill: rgb(78.2173% 33.0890% 38.24368%)}
+.purple rect { fill: rgb(36.0261% 23.3161% 40.6449%)}
+.purple circle { fill: rgb(36.0168% 23.3703% 40.6907%)}
+.yellow_green rect { fill: rgb(62.3751% 74.0184% 24.7942%)}
+.yellow_green circle { fill: rgb(62.4340% 74.0256% 24.8109%)}
+.orange_yellow rect { fill: rgb(90.4681% 63.3661% 15.2514%)}
+.orange_yellow circle { fill: rgb(90.4894% 63.3960% 15.3394%)}
+.blue rect { fill: rgb(15.4346% 24.3828% 57.7067%)}
+.blue circle { fill: rgb(18.8508% 26.6963% 57.1643%)}
+.green rect { fill: rgb(26.3893% 58.1384% 28.6863%)}
+.green circle { fill: rgb(26.4646% 58.1664% 28.6828%)}
+.red rect { fill: rgb(71.3817% 18.0672% 22.0930%)}
+.red circle { fill: rgb(71.4668% 18.1292% 22.1582%)}
+.yellow rect { fill: rgb(94.0483% 78.3571% 08.8101%)}
+.yellow circle { fill: rgb(94.0799% 78.4154% 08.5662%)}
+.magenta rect { fill: rgb(75.57340% 32.8857% 58.4776%)}
+.magenta circle { fill: rgb(75.5996% 32.9013% 58.4810%)}
+.desat_cyan rect { fill: rgb(00.0904% 52.0570% 62.8808%)}
+.desat_cyan circle { fill: rgb(-00.5719% 52.0905% 62.9726%)}
+.white_95 rect { fill: rgb(96.1749% 95.9684% 94.2031%)}
+.white_95 circle { fill: rgb(96.1724% 95.9872% 94.2131%)}
+.neutral_8 rect { fill: rgb(78.4876% 79.0090% 78.7352%)}
+.neutral_8 circle { fill: rgb(78.5553% 79.1037% 78.8591%)}
+.neutral_65 rect { fill: rgb(62.8550% 63.2928% 63.2408%)}
+.neutral_65 circle { fill: rgb(62.8835% 63.3132% 63.2447%)}
+.neutral_5 rect { fill: rgb(46.9112% 47.6060% 47.6211%)}
+.neutral_5 circle { fill: rgb(46.8846% 47.5968% 47.6214%)}
+.neutral_35 rect { fill: rgb(32.4963% 33.0535% 33.2257%)}
+.neutral_35 circle { fill: rgb(32.4986% 33.0787% 33.2561%)}
+.black_2 rect { fill: rgb(19.4628% 19.5396% 19.7948%)}
+.black_2 circle { fill: rgb(19.4023% 19.4132% 19.2103%)}
+
+#xmacbeth circle {display: none}
+</style>
+<rect width="100%" height="100%" fill="#222"/>
+<g id="macbeth">
+<g class="row1">
+<g class="dark_skin">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="light_skin" transform="translate(11,0)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="blue_sky" transform="translate(22,0)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="foliage" transform="translate(33,0)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="blue_flower" transform="translate(44,0)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="bluish_green" transform="translate(55,0)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+</g>
+<g class="row2">
+<g class="orange" transform="translate(0,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="purplish_blue" transform="translate(11,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="moderate_red" transform="translate(22,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="purple" transform="translate(33,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="yellow_green" transform="translate(44,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="orange_yellow" transform="translate(55,11)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+</g>
+<g class="row3">
+<g class="blue" transform="translate(0,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="green" transform="translate(11,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="red" transform="translate(22,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="yellow" transform="translate(33,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="magenta" transform="translate(44,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="desat_cyan" transform="translate(55,22)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+</g>
+<g class="row4">
+<g class="white_95" transform="translate(0,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="neutral_8" transform="translate(11,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="neutral_65" transform="translate(22,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="neutral_5" transform="translate(33,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="neutral_35" transform="translate(44,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+<g class="black_2" transform="translate(55,33)">
+    <rect x="1" y="1" width="10" height="10"/>
+    <circle r="3" cx="6" cy="6"/>
+</g>
+</g>
+</g>
+</svg>
