31:T57b,--------------------------------------- ^[1] This assumes that your monitor will actually display sRGB properly. This depends on whether your monitor has a similar gamut, or whether or not your browser has color management enabled, and on how good said color management is. I think these spectrum images are especially unforgiving for poor color management. YMMV. We’re also skipping over an entire can of worms called chromatic adaptation, and many others. ^[2] You may have seen this before, in [Rendering Spectra](https://aty.sdsu.edu/explain/optics/rendering.html) by Andrew T. Young. ^[3] When you select “display-p3”, we generate values in a wider color space, and tag the image so the browser (or, perhaps eventually your operating system) knows to interpret the RGB values in the correct way. If you see a seam in the test pattern, possibly the colors are not actually color managed. Your display may also have a smaller gamut than Display-P3, resulting in some other correction being applied. ^[4] A recent addition to the Blogosphere is [The Hitchhiker's Guide to Digital Colour](https://hg2dc.com/). Including strong language, not entirely unexpected given the subject matter. This is a deep rabbit hole. ^[5] Oklab — [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) , by Björn Ottosson32:T4f4,function displaySpectrum(correction, height = 100, cssBg = null){ const ctx = createCtx(rgbdata.length, height); var cssColor0 = cssBg ? cssBg : colorToCss(correction ? correction([1e-6, 1e-6, 1e-6]) : [0, 0, 0]); ctx.fillStyle = cssColor0; ctx.fillRect(0, 0, rgbdata.length, height); for (var i = 0; i < rgbdata.length; ++i) { var r = rgbdata[i].r * rgbScale; var g = rgbdata[i].g * rgbScale; var b = rgbdata[i].b * rgbScale; var a = 1; if (correction) [r, g, b, a] = correction([r, g, b]); var cssColor = colorToCss([r, g, b, a]); var gradient = ctx.createLinearGradient(0, 0, 0, height); try { gradient.addColorStop(0.10, cssColor0); gradient.addColorStop(0.15, cssColor); gradient.addColorStop(0.85, cssColor); gradient.addColorStop(0.90, cssColor0); ctx.beginPath(); ctx.fillStyle = gradient; ctx.fillRect(i, 0, 1, height); } catch (e) { console.log(cssColor0, cssColor) } if (showOutOfGamut && Math.min(r, g, b) < 0) { ctx.fillStyle = '#f0f'; ctx.fillRect(i, height-15, 1, 15); } } var div = html`

`; div.appendChild(ctx.canvas); ctx.canvas.style.width = cWidth + 'px'; ctx.canvas.style.height = height + 'px'; return div; }33:T5db,function displaySpectrumGraph(correction, {height=350, domain=[0, 100], scale=rgbScale, displaySpace=true, colorbar=false}) { var rgbdata2 = rgbdata.map(row => { var {r, g, b, wl} = row; [r, g, b] = correction([r * scale, g * scale, b * scale]); return {r:r, g:g, b:b, wl:wl}; }); var plotConfig = { height: height, insetBottom: colorbar ? 4 : 0, // make room for color bar x: {label: "Wavelength (nm) →"}, y: { label: displaySpace ? "↑ sRGB (%)" : "↑ RGB", grid: true, domain: domain, percent: displaySpace }, marks: [ Plot.areaY(rgbdata2, {x: "wl", y: "r", fill: "#f00", opacity: .07}), Plot.areaY(rgbdata2, {x: "wl", y: "g", fill: "#0f0", opacity: .07}), Plot.areaY(rgbdata2, {x: "wl", y: "b", fill: "#00f", opacity: .07}), Plot.line(rgbdata2, {x: "wl", y: "r", stroke: "#f00"}), Plot.line(rgbdata2, {x: "wl", y: "g", stroke: "#0d0"}), Plot.line(rgbdata2, {x: "wl", y: "b", stroke: "#00f"}), Plot.ruleY([0]), ] }; if (displaySpace) { plotConfig.marks.push( Plot.ruleY([1]) ); } if (colorbar) { function rgbBar(e) { var rgb = rgbCap(rgbGreyDesaturate([e.r, e.g, e.b], {overdrive: 1.8})); return colorToCss(sRGB(rgb)); } rgbCap plotConfig.marks.push( // colored bar Plot.line(rgbdata, {x: "wl", y: -1,strokeWidth: 5, z: null, dy: 2, stroke: rgbBar}) ); } return Plot.plot(plotConfig); }34:T418,{ const height = 50; const width = 400; const step = 20; var div = html`

`; const list = [ [0, 0.0, 1], [0, .8, 1], [0, 1, 0.2], [1, 0.9, 0], [1, 0.2, 0], [1, 0, 0], ]; for (const color of list) { var Lab = sRGBtoOklab(color); var grey = [.9, .9, .9]; const ctx = DOM.context2d(width, height, 1); ctx.canvas.style.margin = '5px'; ctx.canvas.style.width = width + 'px'; ctx.canvas.style.height = height + 'px'; for (var i = 0; i < width; i += step) { var t = i / (width - step); var [r, g, b] = mix(color, grey, t, ""); var cssColor = colorToCss(sRGB([r, g, b, 1])); ctx.beginPath(); ctx.fillStyle = cssColor; ctx.fillRect(i, 0, step, height/2 - 1); var [r, g, b] = mix(color, grey, t, "Oklab"); var cssColor = colorToCss(sRGB([r, g, b, 1])); ctx.beginPath(); ctx.fillStyle = cssColor; ctx.fillRect(i, height/2 + 1, step, height/2 - 1); } div.appendChild(ctx.canvas); } return div; }35:T41a,{ const div = html`

`; var colors = [[1, 0, 0], [1, .7, 0], [0, 1, 0], [0, .5, 1], [0, 0, 1], [.3, 0, 1]]; colors.forEach(c => { var div2 = html`

`; var div3 = html`

`; var css = colorToCss(sRGB(c)); div2.appendChild(html` `) div3.appendChild(html` `) for (var i = 0; i < 25; ++i) { const t = i / 25.0; var c2 = mix(c, [.3, .3, .3], t); var c3 = OklabCopyHue(c2, c, true); var css2 = colorToCss(sRGB(c2)); var css3 = colorToCss(sRGB(c3)); div2.appendChild(html``) div3.appendChild(html``) } div.appendChild(div2); div.appendChild(div3); }); return div; }36:T2423,cie1931 = { return { 'x': [0.00137, 0.00150, 0.00164, 0.00180, 0.00200, 0.00224, 0.00254, 0.00289, 0.00330, 0.00375, 0.00424, 0.00476, 0.00533, 0.00598, 0.00674, 0.00765, 0.00875, 0.01003, 0.01142, 0.01287, 0.01431, 0.01570, 0.01715, 0.01878, 0.02075, 0.02319, 0.02621, 0.02978, 0.03388, 0.03847, 0.04351, 0.04900, 0.05502, 0.06172, 0.06921, 0.07763, 0.08696, 0.09718, 0.10841, 0.12077, 0.13438, 0.14936, 0.16540, 0.18198, 0.19861, 0.21477, 0.23019, 0.24488, 0.25878, 0.27181, 0.28390, 0.29494, 0.30490, 0.31379, 0.32165, 0.32850, 0.33435, 0.33921, 0.34312, 0.34613, 0.34828, 0.34960, 0.35015, 0.35001, 0.34929, 0.34806, 0.34637, 0.34426, 0.34181, 0.33909, 0.33620, 0.33320, 0.33004, 0.32664, 0.32289, 0.31870, 0.31403, 0.30888, 0.30329, 0.29726, 0.29080, 0.28397, 0.27672, 0.26892, 0.26042, 0.25110, 0.24085, 0.22985, 0.21841, 0.20681, 0.19536, 0.18421, 0.17333, 0.16269, 0.15228, 0.14210, 0.13218, 0.12257, 0.11328, 0.10430, 0.09564, 0.08730, 0.07931, 0.07172, 0.06458, 0.05795, 0.05186, 0.04628, 0.04115, 0.03641, 0.03201, 0.02792, 0.02414, 0.02069, 0.01754, 0.01470, 0.01216, 0.00992, 0.00797, 0.00630, 0.00490, 0.00378, 0.00295, 0.00242, 0.00224, 0.00240, 0.00293, 0.00384, 0.00517, 0.00698, 0.00930, 0.01215, 0.01554, 0.01948, 0.02399, 0.02910, 0.03481, 0.04112, 0.04799, 0.05538, 0.06327, 0.07164, 0.08046, 0.08974, 0.09946, 0.10960, 0.12017, 0.13111, 0.14237, 0.15385, 0.16550, 0.17726, 0.18914, 0.20117, 0.21337, 0.22575, 0.23832, 0.25107, 0.26399, 0.27710, 0.29040, 0.30389, 0.31757, 0.33144, 0.34548, 0.35970, 0.37408, 0.38864, 0.40338, 0.41831, 0.43345, 0.44880, 0.46434, 0.48006, 0.49597, 0.51205, 0.52830, 0.54469, 0.56121, 0.57782, 0.59450, 0.61122, 0.62798, 0.64476, 0.66157, 0.67840, 0.69524, 0.71206, 0.72883, 0.74552, 0.76210, 0.77854, 0.79483, 0.81093, 0.82682, 0.84250, 0.85793, 0.87308, 0.88789, 0.90232, 0.91630, 0.92980, 0.94280, 0.95528, 0.96722, 0.97860, 0.98939, 0.99955, 1.00909, 1.01801, 1.02630, 1.03398, 1.04099, 1.04719, 1.05247, 1.05670, 1.05979, 1.06180, 1.06281, 1.06291, 1.06220, 1.06074, 1.05844, 1.05522, 1.05098, 1.04560, 1.03904, 1.03136, 1.02267, 1.01305, 1.00260, 0.99137, 0.97933, 0.96649, 0.95285, 0.93840, 0.92319, 0.90724, 0.89050, 0.87292, 0.85445, 0.83508, 0.81495, 0.79419, 0.77295, 0.75140, 0.72958, 0.70759, 0.68560, 0.66381, 0.64240, 0.62151, 0.60111, 0.58111, 0.56140, 0.54190, 0.52260, 0.50355, 0.48474, 0.46619, 0.44790, 0.42986, 0.41210, 0.39464, 0.37753, 0.36080, 0.34446, 0.32852, 0.31302, 0.29800, 0.28350, 0.26954, 0.25612, 0.24319, 0.23073, 0.21870, 0.20710, 0.19592, 0.18517, 0.17483, 0.16490, 0.15537, 0.14623, 0.13749, 0.12915, 0.12120, 0.11364, 0.10647, 0.09969, 0.09333, 0.08740, 0.08190, 0.07680, 0.07208, 0.06769, 0.06360, 0.05981, 0.05628, 0.05297, 0.04982, 0.04677, 0.04378, 0.04088, 0.03807, 0.03540, 0.03290, 0.03056, 0.02838, 0.02634, 0.02445, 0.02270, 0.02108, 0.01960, 0.01824, 0.01699, 0.01584, 0.01479, 0.01383, 0.01295, 0.01213, 0.01136, 0.01063, 0.00994, 0.00929, 0.00868, 0.00811, 0.00758, 0.00709, 0.00663, 0.00620, 0.00579, 0.00541, 0.00505, 0.00472, 0.00440, 0.00411, 0.00383, 0.00358, 0.00333, 0.00311, 0.00290], 'y': [0.00004, 0.00004, 0.00005, 0.00005, 0.00006, 0.00006, 0.00007, 0.00008, 0.00009, 0.00011, 0.00012, 0.00013, 0.00015, 0.00017, 0.00019, 0.00022, 0.00025, 0.00028, 0.00032, 0.00036, 0.00040, 0.00043, 0.00047, 0.00052, 0.00057, 0.00064, 0.00072, 0.00083, 0.00094, 0.00107, 0.00121, 0.00136, 0.00153, 0.00172, 0.00194, 0.00218, 0.00245, 0.00276, 0.00312, 0.00353, 0.00400, 0.00455, 0.00516, 0.00583, 0.00655, 0.00730, 0.00809, 0.00891, 0.00977, 0.01066, 0.01160, 0.01257, 0.01358, 0.01463, 0.01572, 0.01684, 0.01801, 0.01921, 0.02045, 0.02172, 0.02300, 0.02429, 0.02561, 0.02696, 0.02835, 0.02980, 0.03131, 0.03288, 0.03452, 0.03623, 0.03800, 0.03985, 0.04177, 0.04377, 0.04584, 0.04800, 0.05024, 0.05257, 0.05498, 0.05746, 0.06000, 0.06260, 0.06528, 0.06804, 0.07091, 0.07390, 0.07702, 0.08027, 0.08367, 0.08723, 0.09098, 0.09492, 0.09905, 0.10337, 0.10788, 0.11260, 0.11753, 0.12267, 0.12799, 0.13345, 0.13902, 0.14468, 0.15047, 0.15646, 0.16272, 0.16930, 0.17624, 0.18356, 0.19127, 0.19942, 0.20802, 0.21712, 0.22673, 0.23686, 0.24748, 0.25860, 0.27018, 0.28229, 0.29505, 0.30858, 0.32300, 0.33840, 0.35469, 0.37170, 0.38929, 0.40730, 0.42563, 0.44431, 0.46339, 0.48294, 0.50300, 0.52357, 0.54451, 0.56569, 0.58697, 0.60820, 0.62935, 0.65031, 0.67088, 0.69084, 0.71000, 0.72819, 0.74546, 0.76197, 0.77784, 0.79320, 0.80811, 0.82250, 0.83631, 0.84949, 0.86200, 0.87381, 0.88496, 0.89549, 0.90544, 0.91485, 0.92373, 0.93209, 0.93992, 0.94723, 0.95400, 0.96026, 0.96601, 0.97126, 0.97602, 0.98030, 0.98409, 0.98748, 0.99031, 0.99281, 0.99495, 0.99671, 0.99810, 0.99911, 0.99975, 1.00000, 0.99986, 0.99930, 0.99833, 0.99690, 0.99500, 0.99260, 0.98974, 0.98644, 0.98272, 0.97860, 0.97408, 0.96917, 0.96386, 0.95813, 0.95200, 0.94545, 0.93850, 0.93116, 0.92346, 0.91540, 0.90701, 0.89828, 0.88920, 0.87978, 0.87000, 0.85986, 0.84939, 0.83862, 0.82758, 0.81630, 0.80479, 0.79308, 0.78119, 0.76915, 0.75700, 0.74475, 0.73242, 0.72000, 0.70750, 0.69490, 0.68222, 0.66947, 0.65667, 0.64384, 0.63100, 0.61816, 0.60531, 0.59248, 0.57964, 0.56680, 0.55396, 0.54114, 0.52835, 0.51563, 0.50300, 0.49047, 0.47803, 0.46568, 0.45340, 0.44120, 0.42908, 0.41704, 0.40503, 0.39303, 0.38100, 0.36892, 0.35683, 0.34478, 0.33282, 0.32100, 0.30934, 0.29785, 0.28659, 0.27562, 0.26500, 0.25476, 0.24489, 0.23533, 0.22605, 0.21700, 0.20816, 0.19955, 0.19116, 0.18297, 0.17500, 0.16722, 0.15965, 0.15228, 0.14513, 0.13820, 0.13150, 0.12502, 0.11878, 0.11277, 0.10700, 0.10148, 0.09619, 0.09112, 0.08626, 0.08160, 0.07712, 0.07283, 0.06871, 0.06477, 0.06100, 0.05740, 0.05396, 0.05067, 0.04755, 0.04458, 0.04176, 0.03908, 0.03656, 0.03420, 0.03200, 0.02996, 0.02808, 0.02633, 0.02471, 0.02320, 0.02180, 0.02050, 0.01928, 0.01812, 0.01700, 0.01590, 0.01484, 0.01381, 0.01283, 0.01192, 0.01107, 0.01027, 0.00953, 0.00885, 0.00821, 0.00762, 0.00709, 0.00659, 0.00614, 0.00572, 0.00534, 0.00500, 0.00468, 0.00438, 0.00410, 0.00384, 0.00359, 0.00335, 0.00313, 0.00293, 0.00274, 0.00256, 0.00239, 0.00224, 0.00209, 0.00195, 0.00182, 0.00170, 0.00159, 0.00148, 0.00138, 0.00129, 0.00120, 0.00112, 0.00105], 'z': [0.00645, 0.00708, 0.00775, 0.00850, 0.00941, 0.01055, 0.01197, 0.01366, 0.01559, 0.01773, 0.02005, 0.02251, 0.02520, 0.02828, 0.03190, 0.03621, 0.04144, 0.04750, 0.05412, 0.06100, 0.06785, 0.07449, 0.08136, 0.08915, 0.09854, 0.11020, 0.12461, 0.14170, 0.16130, 0.18326, 0.20740, 0.23369, 0.26261, 0.29477, 0.33080, 0.37130, 0.41621, 0.46546, 0.51969, 0.57953, 0.64560, 0.71848, 0.79671, 0.87785, 0.95944, 1.03905, 1.11537, 1.18850, 1.25812, 1.32393, 1.38560, 1.44264, 1.49480, 1.54219, 1.58488, 1.62296, 1.65640, 1.68530, 1.70987, 1.73038, 1.74706, 1.76004, 1.76962, 1.77626, 1.78043, 1.78260, 1.78297, 1.78170, 1.77920, 1.77587, 1.77211, 1.76826, 1.76404, 1.75894, 1.75247, 1.74410, 1.73356, 1.72086, 1.70594, 1.68874, 1.66920, 1.64753, 1.62341, 1.59602, 1.56453, 1.52810, 1.48611, 1.43952, 1.38988, 1.33874, 1.28764, 1.23742, 1.18782, 1.13876, 1.09015, 1.04190, 0.99420, 0.94735, 0.90145, 0.85662, 0.81295, 0.77052, 0.72944, 0.68991, 0.65210, 0.61620, 0.58233, 0.55042, 0.52034, 0.49197, 0.46518, 0.43992, 0.41618, 0.39388, 0.37295, 0.35330, 0.33486, 0.31755, 0.30134, 0.28617, 0.27200, 0.25882, 0.24648, 0.23477, 0.22345, 0.21230, 0.20117, 0.19012, 0.17923, 0.16856, 0.15820, 0.14814, 0.13838, 0.12899, 0.12008, 0.11170, 0.10390, 0.09667, 0.08998, 0.08385, 0.07825, 0.07321, 0.06868, 0.06457, 0.06079, 0.05725, 0.05390, 0.05075, 0.04775, 0.04490, 0.04216, 0.03951, 0.03694, 0.03446, 0.03209, 0.02984, 0.02771, 0.02569, 0.02379, 0.02199, 0.02030, 0.01872, 0.01724, 0.01586, 0.01458, 0.01340, 0.01231, 0.01130, 0.01038, 0.00953, 0.00875, 0.00804, 0.00738, 0.00679, 0.00624, 0.00575, 0.00530, 0.00490, 0.00453, 0.00420, 0.00390, 0.00362, 0.00337, 0.00314, 0.00293, 0.00275, 0.00259, 0.00244, 0.00231, 0.00220, 0.00210, 0.00202, 0.00195, 0.00189, 0.00184, 0.00180, 0.00177, 0.00174, 0.00171, 0.00168, 0.00165, 0.00161, 0.00156, 0.00151, 0.00146, 0.00140, 0.00134, 0.00127, 0.00120, 0.00115, 0.00110, 0.00107, 0.00105, 0.00104, 0.00102, 0.00100, 0.00097, 0.00093, 0.00089, 0.00084, 0.00080, 0.00076, 0.00072, 0.00069, 0.00065, 0.00060, 0.00055, 0.00049, 0.00044, 0.00038, 0.00034, 0.00031, 0.00028, 0.00027, 0.00025, 0.00024, 0.00023, 0.00022, 0.00021, 0.00020, 0.00019, 0.00017, 0.00016, 0.00014, 0.00012, 0.00010, 0.00009, 0.00007, 0.00006, 0.00006, 0.00005, 0.00004, 0.00004, 0.00004, 0.00003, 0.00003, 0.00003, 0.00003, 0.00002, 0.00002, 0.00002, 0.00002, 0.00002, 0.00001, 0.00001, 0.00001, 0.00001, 0.00001, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000, 0.00000], }}37:[{"id":"0a9164127b695e1c1a6d0b4d5430c1270f68e4d97bd37116f003e77ee627f3d253057b6bff7c69277e634828616aa9806a66c6a6d11a6ff36f61f112fc299e77","href":"https://static.observableusercontent.com/files/0a9164127b695e1c1a6d0b4d5430c1270f68e4d97bd37116f003e77ee627f3d253057b6bff7c69277e634828616aa9806a66c6a6d11a6ff36f61f112fc299e77","name":"image.png","type":"image/png","lastModified":1666170216652.607,"size":204223}] 2f:{"title":"Rendering a spectrum","cells":[{"id":0,"value":"# Rendering a spectrum\n\n

\n\nWe all know how to do a rainbow in RGB colors, right? A common way is rendering a HSV gradient, basically looping around the RGB cube. However in a rainbow we don’t have 3 primary colors, we see white light being split up by wavelength. How does that relate to our RGB hues?\n\nWe got an answer to that already, kind of, long before we even had RGB monitors at all. Around 1931 the [XYZ color space](https://en.wikipedia.org/wiki/CIE_1931_color_space) was created. Our RGB color space, specifically sRGB ^[1] is related to this color space with a simple matrix transform that can be easily found on [Wikipedia](https://en.wikipedia.org/wiki/SRGB). So we can convert the XYZ tristimulus curves to RGB and get something resembling a rainbow.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"displaySpectrum()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"Yeah, nah. That doesn’t look like a rainbow at all.\n\nFirst thing to do is compensating for the sRGB tone curve (sometimes called gamma correction because it approximately follows a 2.2 display gamma). Let’s add it:","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"displaySpectrum(sRGB)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"This looks a bit better, but there are still clear artefacts. There is an odd variation in brightness around blue, and we will see later that most of the greens look too yellowish, and the red is slightly orange.\n\nThe problem here is that the pure spectral colors lie outside the sRGB color gamut. This is more clear if we chart the RGB values. The out-of-gamut colors will have _negative_ RGB values.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"displaySpectrumGraph(rgb => rgb,\n {domain: [-1.04, 2.5], scale: 1, displaySpace: false, height:350, colorbar: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"These negative values will get clipped to 0, leading to shifts in brightness, tint and saturation. This clipping causes the artefacts mentioned before.\n\nCan we do better?","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"## Desaturating the colors\n\nWe can desaturate all the colors until they fall inside the sRGB gamut. Going to 30% takes the edge off, but let’s try a few values:","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"viewof desaturateAmount = Inputs.range([0, 1], {label: \"Desaturate\", step: .01, value: .30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof showOutOfGamut = Inputs.toggle({label: \"Mark out of gamut colors\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"displaySpectrum(rgb => sRGB(desaturate(rgb, desaturateAmount)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"We can somewhat smooth the area around the blues, but the yellow will quickly look quite dull.\n\nWhat if we desaturate every color just enough to fall inside the gamut? ^[2]","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"viewof autoDesaturateAmount = Inputs.range([0, 1], {label: \"Desaturate\", step: .01, value: .75})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"displaySpectrum(rgb => sRGB(desaturateToGamut(rgb, autoDesaturateAmount)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"Note the shift in hue in the green band as we go from clipping to desaturating colors.\n\nHowever, this leads to abrupt variations in saturation, especially near the blue primary. We can desaturate a bit more specifically around that primary. The final result is kind of, sort of smooth. But it still not very convincing.","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"viewof desaturateBlues1 = Inputs.range([0, 0.20], {label: \"Desaturate blues\", step: .005, value: .10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"displaySpectrum(rgb => sRGB(desaturateBlues(desaturateToGamut(rgb, autoDesaturateAmount), desaturateBlues1)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"You probably also noticed that the violet all but disappears. Violet is… _special_, it appears quite saturated but has almost no luminance. So if you desaturate it it becomes more or less black.","pinned":false,"hidden":false,"mode":"md"},{"id":1922,"value":"## Expanding our color space\n\nMany modern displays can display more saturated colors than sRGB. This is really apparent in greens and cyans. This allows you to display these rainbows much better, since these are severely limited by saturation in those areas.\n\nWe may be able to create a canvas in the _Display P3_ color space.","pinned":false,"hidden":false,"mode":"md"},{"id":1927,"value":"viewof colorSpaceChoice = Inputs.radio([\"srgb\", \"display-p3\"], {label: \"Select color space\", value: \"srgb\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1937,"value":"colorSpaceDisplay = {\n const media_support = window.matchMedia(\"(color-gamut: p3)\").matches;\n const ctx_support = colorSpace == colorSpaceChoice;\n\n var div = html`

`;\n const test = testPattern();\n div.appendChild(test);\n var div2 = html`

`;\n var ul = html`

Looks like we’re able to use “${colorSpaceChoice}” 👍.` : html`
We can’t have “${colorSpaceChoice} 🙁, we got “${colorSpace}” instead.`);\n ul.append(html`
Your browser reports ${media_support ? \"support\": \"no support\"} for the P3 color gamut.`);\n ul.appendChild(html`
You should not see a seam in the color bands on the left.`);\n div2.appendChild(ul);\n\n if (colorSpaceDisplayHaveNote)\n ul.lastChild.append(html` ^[3]`);\n div.appendChild(div2);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"## Adding grey\n\nThere is an alternative to desaturating, and it is visible right at the beginning in the header image. Photographs of rainbows always have the rainbow superimposed on some background, more often than not grey clouds.","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"viewof greyAmount = Inputs.range([0, 1], {label: \"Add grey\", step: .01, value: .20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof applyDesaturate2 = Inputs.toggle({label: \"Also desaturate\", value: true});","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"displaySpectrum(rgb => {\n rgb = mixGrey(rgb, greyAmount);\n if (applyDesaturate2) rgb = desaturateToGamut(rgb, 0.8, 0);\n return sRGB(rgb);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"Using even a small amount of grey improves the appearance a lot. It is however not a perfect solution. It seems the blue got replaced with a more purplish color. Adding grey changes the perceived hue of a color, an effect known as the [Abney effect](https://en.wikipedia.org/wiki/Abney_effect).\n\nThe difficulty to show yellow at low brightness is a consequence of another effect. Dim colors tend to shift away from yellow and blue, this is known as the [Bezold–Brücke shift](https://en.wikipedia.org/wiki/Bezold%E2%80%93Br%C3%BCcke_shift).","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"## Rainbow\n\nSee the combined effect of our various operators on the RGB graphs.\n\nThe checkbox at the bottom uses a perceptual color space, Oklab ^[5], to approximately reset the perceived hue to the same hue as the original spectral color. This gives you an idea of how much the perceived hue is shifting after adding the grey background.","pinned":false,"hidden":false,"mode":"md"},{"id":1194,"value":"function rgbGreyDesaturate(rgb, {grey=0.1, autoDesaturate=1, correctBlue=0, overdrive = 1.0, correctHue = false})\n{\n \n rgb = [overdrive*rgb[0], overdrive*rgb[1], overdrive*rgb[2]];\n var rgb1 = rgb;\n rgb = mixGrey(rgb, grey);\n rgb = desaturateToGamut(rgb, autoDesaturate);\n if (overdrive > 1.0) rgb = rgbCap(rgb);\n rgb = desaturateBlues(rgb, correctBlue);\n // the hue correction will push some colors back out of the gamut, but so be it.\n if (correctHue) { rgb = OklabCopyHue(rgb, mixGrey(rgb1, grey * .2)); }\n return rgb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"displaySpectrumGraph(rgb => rgbGreyDesaturate(rgb, rainbowForm), {domain: [-40, 100], height:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"viewof rainbowForm = Inputs.form({\n grey : Inputs.range([0, 1], {label: \"Add grey\", step: .01, value: .15}),\n autoDesaturate : Inputs.range([0, 1], {label: \"Desaturate\", step: .01, value: 1.0}),\n correctBlue : Inputs.range([0, 0.40], {label: \"Desaturate blues\", step: .01, value: 0.2}),\n overdrive : Inputs.range([0.7, 2.5], {label: \"Amplify\", step: .02, value: 1}),\n correctHue : Inputs.toggle({label: \"Perceptual hue correction\", value: false}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"displaySpectrum(rgb => sRGB(rgbGreyDesaturate(rgb, rainbowForm)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"Ultimately, we are kneecapped by the very poor ability of sRGB to represent reasonably saturated greens and cyans, and the contrast with the quite saturated blue primary.","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"## Miscellanea\n\nSo far we tried to render something vaguely physically based. Here are a few more ways to map a wavelength to a color:","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"### Maximal saturation and value\n\nPick the color with full saturation and value 100% that has this wavelength as dominant wavelength. This is basically a variant of the *Angry Rainbow*.","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"displaySpectrum(rgb => {\n rgb = mixGrey(rgb, greyAmountAngry)\n rgb = angry(rgb)\n return sRGB(rgb)\n}, 80)","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"viewof greyAmountAngry = Inputs.range([0, 1], {label: \"Add grey\", step: .01, value: 0.0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"### Sinebow\n\nJust for fun, let’s try to follow the color gradient of a _sinebow_. We can do this by selectively desaturating and scaling down colors depending on hue.","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"displaySpectrum(rgb => {\n return sRGB(appxSineBow(rgb))\n}, 80)","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"### Fixed magnitude in RGB space\n\nWe can normalize the 2-norm of the RGB color, this gives a smoother color gradient especially if you add some grey to it first.","pinned":false,"hidden":false,"mode":"md"},{"id":1135,"value":"function rgbOffsetNorm(rgb)\n{\n rgb = mixGrey(rgb, orbitForm.grey);\n rgb = desaturateToGamut(rgb, 1.0);\n return rgbNormalize(rgb);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"displaySpectrum(rgb => {\n rgb = rgbOffsetNorm(rgb);\n return sRGB(rgb);\n }, 80)","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"viewof orbitForm = Inputs.form({\n grey : Inputs.range([0, 1], {label: \"Add grey\", step: .01, value: 0.0})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"Or we can normalize the RGB value and then add the grey offset:","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"function rgbNormOffset(rgb, {grey=0.10})\n{\n rgb = rgbNormalize(rgb);\n rgb = mixGrey(rgb, grey);\n return desaturateToGamut(rgb, 1.0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"displaySpectrum(rgb => {\n rgb = rgbNormOffset(rgb, orbitForm2);\n return sRGB(rgb);\n }, 80)","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"viewof orbitForm2 = Inputs.form({\n grey : Inputs.range([0, 1], {label: \"Add grey\", step: .01, value: 0.2})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"### Perceptual desaturation\n\nWhat if we desaturate in some perceptual color space? Let’s pick [Oklab](https://bottosson.github.io/posts/oklab/):","pinned":false,"hidden":false,"mode":"md"},{"id":1824,"value":"function perceptualAutoDesat(rgb, {grey = .07, amount=.08, auto=false})\n{\n rgb = mixGrey(rgb, grey);\n var [L, a, b] = sRGBtoOklab(rgb);\n a *= (1 - amount);\n b *= (1 - amount);\n for (var i = 0; i < 10; ++i) {\n rgb = OklabTosRGB([L, a, b]);\n var d = (-Math.min(...rgb) / Math.max(...rgb)) || 0;\n if (d <= 0 || !auto) break;\n d = 1 - Math.min(d, .45);\n a *= d;\n b *= d;\n }\n return rgb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"displaySpectrum(rgb => sRGB(perceptualAutoDesat(rgb, oklab1)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"viewof oklab1 = Inputs.form({\n grey: Inputs.range([0, 1], {label: \"Add grey first\", step: .01, value: .07}),\n amount: Inputs.range([0, 1], {label: \"Desaturate\", step: .01, value: .10}),\n auto: Inputs.toggle({label: \"Automatic desaturate\", value: true})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1821,"value":"displaySpectrumGraph(rgb => perceptualAutoDesat(rgb, oklab1), {domain: [-40, 100], height:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2138,"value":"colorSpaceDisplayHaveNote = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"### Rainbow canvas","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"rgbScale = 0.39","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"cWidth = Math.min(width, 2 * rgbdata.length);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1992,"value":"function createCtx(w, h) {\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n canvas.style.width = w + \"px\";\n return canvas.getContext(\"2d\", {\"colorSpace\": colorSpace});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1482,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":860,"value":"### Rainbow variants","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"function desaturate([r, g, b], amount) {\n var y = rgbToY([r, g, b]);\n return [\n r * (1 - amount) + y * amount,\n g * (1 - amount) + y * amount,\n b * (1 - amount) + y * amount];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"function desaturateToGamut([r, g, b], amount)\n{\n // Y value (luminance) of our color. We always return a color with this luminance.\n var y = rgbToY([r, g, b]);\n\n // clip to 3 RGB cube faces (the ones going through (0, 0, 0))\n var min = Math.min(r, g, b, 0);\n // inverse lerp: add small extra margin so we definitely end up inside the RGB cube.\n // turn NaN into 0 in case we receive [0, 0, 0]\n var amountNeeded = (-min / (y - min) * 1.00001 * amount) || 0;\n return desaturate([r, g, b], amountNeeded);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2207,"value":"desaturateToGamut([0, 0, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":942,"value":"function desaturateBlues([r, g, b], amount)\n{\n // Y value (luminance) of our color. We always return a color with this luminance.\n var y = rgbToY([r, g, b]);\n\n // similar to desaturateToGamut(), but clip colors to some arbitrary\n // extra plane in the RGB space, to keep them away from the blue primary.\n // amount controls how far away from the blue primary this plane is.\n var b1 = r * 0.75 + g * 1.25 - b * (amount - 0.06);\n if (b1 < 0)\n {\n var y1 = 2*y - y * amount; // value of b1 if we fully desaturate.\n var amountNeeded = -b1 / (y1 - b1); // inverse lerp for target value 0\n // soft low shoulder:\n amountNeeded = amountNeeded*amountNeeded / (0.1 + amountNeeded);\n return desaturate([r, g, b], Math.max(amountNeeded, 0));\n }\n else\n {\n return [r, g, b];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"function mix([r1, g1, b1], [r2, g2, b2], amount, method)\n{\n if (method == 'Oklab')\n {\n [r1, g1, b1] = sRGBtoOklab([r1, g1, b1]);\n [r2, g2, b2] = sRGBtoOklab([r2, g2, b2]);\n }\n var r = r1 * (1 - amount) + r2 * amount;\n var g = g1 * (1 - amount) + g2 * amount;\n var b = b1 * (1 - amount) + b2 * amount;\n if (method == 'Oklab')\n {\n [r, g, b] = OklabTosRGB([r, g, b]);\n }\n return [r, g, b];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"function mixGrey([r, g, b], amount, grey=0.95) {\n return mix([r, g, b], [grey, grey, grey], amount);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"function rgbNormalize([r, g, b])\n{\n var scale = 1/Math.max(Math.hypot(r, g, b), 0.0001);\n return [r*scale, g*scale, b*scale];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1513,"value":"function rgbCap([r, g, b])\n{\n // soft clamps the RGB color to 100%. This is done by simple scaling.\n // use 4-norm. This results in less reduced brightness of yellows than the 2-norm,\n // but still avoids the harsh clipping of using max() (i.e. ∞-norm).\n var norm4 = Math.sqrt(Math.hypot(r*r, g*g, b*b));\n var scale = Math.min(1, 1/Math.max(norm4, 0.0001));\n return [r*scale, g*scale, b*scale];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"function angry(rgb)\n{\n var [r, g, b] = desaturateToGamut(rgb, 1.0, 0.0);\n var val = Math.max(r, g, b, 0.00001);\n return [r/val, g/val, b/val];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"displaySpectrumGraph(rgb => angry(rgb), {height:250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"function appxSineBow(rgb)\n{\n // Map a color onto a color in the sinebow by linear hue (approximately)\n var [r, g, b] = angry(rgb)\n // an angry color has exactly one value that is not 0 or 1\n // this value is related to linear hue, and depending on this\n // value we will desaturate and multiply our color.\n var x = r;\n if (x < .0001 || x == 1) x = g;\n if (x < .0001 || x == 1) x = b;\n // A sinebow is usually defined in sRGB. If you plot this by\n // linear hue you get these strange shapes. Some empirical\n // polynomial approximations:\n var mx = 1 - x;\n var mx4 = mx*mx*mx*mx\n var mx12 = mx4*mx4*mx4\n var appx_val = 0.83 - 0.29 * x + 0.3 * mx4 - 0.13 * mx12;\n var appx_desat = 0.015 * mx4 + 0.035 * mx12;\n \n [r, g, b] = mixGrey([r, g, b], appx_desat, 1);\n return [r * appx_val, g * appx_val, b * appx_val];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"displaySpectrumGraph(rgb => appxSineBow(rgb), {height:250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"### Color space test","pinned":false,"hidden":false,"mode":"md"},{"id":1954,"value":"colorSpace = {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\", {\"colorSpace\": colorSpaceChoice});\n return ctx.getContextAttributes().colorSpace;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2035,"value":"function testPattern() {\n const ctx2 = [null, null];\n var div = html`
`\n for (var i = 0; i < 2; ++i)\n {\n const canvas = document.createElement(\"canvas\");\n canvas.width = 100;\n canvas.height = 20;\n canvas.style.width = \"4em\";\n canvas.style.height = \"2em\";\n canvas.style.display = \"block\";\n var rgbM = m_m(RgbColorM.xyzToRgb, SrgbM.rgbToXyz);\n var rgb = [[.9, .2, .3], [1.0, 0.8, .3], [.0, .9, .2], [.0, .8, .9], [.6, .4, 1.0]];\n const ctx = canvas.getContext(\"2d\", {\"colorSpace\": i == 0 ? \"srgb\" : colorSpaceChoice});\n for (var ij = 0; ij < rgb.length; ++ij) {\n ctx.fillStyle = colorToCss(sRGB(i == 0 ? rgb[ij] : apply_m(rgbM, rgb[ij])), i == 0 ? \"srgb\" : undefined);\n ctx.fillRect(20 * ij, 0, 20, 20);\n }\n\n ctx2[i] = ctx;\n div.appendChild(canvas)\n }\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2105,"value":"testCss = {\n var div = html`
`\n for (var i = 0; i < 2; ++i)\n {\n var div2 = html`
→`\n div.appendChild(div2)\n var rgbM = m_m(DisplayP3M.xyzToRgb, SrgbM.rgbToXyz);\n var rgb = [[1, .2, .2], [.2, 1, .2], [.2, .2, 1], [.8, .8, .8]];\n for (var ij = 0; ij < rgb.length; ++ij) {\n var c = colorToCss(sRGB(i == 0 ? rgb[ij] : apply_m(rgbM, rgb[ij])), i == 0 ? \"srgb\" : \"display-p3\");\n div2.appendChild(html``)\n }\n }\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"### Color operations","pinned":false,"hidden":false,"mode":"md"},{"id":1081,"value":"function clip(x) { return Math.max(0, Math.min(1, x)); }","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"function colorToCss([r, g, b], otherColorSpace) {\n otherColorSpace ??= colorSpace;\n return 'color(' + otherColorSpace + ' ' + clip(r) + ' ' + clip(g) + ' ' + clip(b) + ')';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"function sRGB([r, g, b])\n{\n // both sRGB and Display-P3 use this transfer function.\n var a = 0.055;\n r = r < .0031308 ? r / 12.92 : (1 + a) * Math.pow(r, 1/2.4) - a;\n g = g < .0031308 ? g / 12.92 : (1 + a) * Math.pow(g, 1/2.4) - a;\n b = b < .0031308 ? b / 12.92 : (1 + a) * Math.pow(b, 1/2.4) - a;\n return [r, g, b]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"### Oklab\n\nSource: ^[5]","pinned":false,"hidden":false,"mode":"md"},{"id":1599,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"function sRGBtoOklab([r, g, b]) \n{\n var [l, m, s] = apply_m(OklabLmsRgbM.rgbToLms, [r, g, b]);\n\n l = Math.cbrt(l);\n m = Math.cbrt(m);\n s = Math.cbrt(s);\n\n return [\n 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,\n 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,\n 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1564,"value":"function OklabTosRGB([L, a, b]) \n{\n var l = L + 0.3963377774 * a + 0.2158037573 * b;\n var m = L - 0.1055613458 * a - 0.0638541728 * b;\n var s = L - 0.0894841775 * a - 1.2914855480 * b;\n \n l = l * l * l;\n m = m * m * m;\n s = s * s * s;\n \n return apply_m(OklabLmsRgbM.lmsToRgb, [l, m, s]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2001,"value":"function rgbToY([r, g, b])\n{\n const [m21, m22, m23] = RgbColorM.rgbToXyz[1];\n return m21 * r + m22 * g + m23 * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2161,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"function OklabCopyHue(rgb, rgbHue, desat = true)\n{\n var Lab1 = sRGBtoOklab(rgbHue);\n var Lab2 = sRGBtoOklab(rgb);\n var hue1 = Math.atan2(Lab1[2], Lab1[1]);\n var sat2 = Math.hypot(Lab2[1], Lab2[2]);\n var cs = Math.cos(hue1);\n var sn = Math.sin(hue1);\n var [r, g, b] = OklabTosRGB([Lab2[0], sat2 * cs, sat2 * sn])\n\n // desaturate again if requested\n if (desat) {\n var min = Math.min(r, g, b);\n if (min < 0) {\n var max = Math.max(r, g, b);\n sat2 *= 1 - 2 * -min / max;\n [r, g, b] = OklabTosRGB([Lab2[0], sat2 * cs, sat2 * sn]);\n }\n }\n return [r, g, b];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1900,"value":"function OklabSaturate(rgb, sat)\n{\n var [L, a, b] = sRGBtoOklab(rgb);\n a *= sat;\n b *= sat;\n return OklabTosRGB([L, a, b]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1950,"value":"### Matrices","pinned":false,"hidden":false,"mode":"md"},{"id":1972,"value":"RgbColorM = (colorSpace == \"display-p3\" ? DisplayP3M : SrgbM)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1974,"value":"OklabLmsRgbM = ({\n rgbToLms : m_m(OklabLmsM.xyzToLms, RgbColorM.rgbToXyz),\n lmsToRgb : m_m(RgbColorM.xyzToRgb, OklabLmsM.lmsToXyz),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1907,"value":"DisplayP3M = ({\n rgbToXyz:\n [[ 0.4865709, 0.2656677, 0.1982173],\n [ 0.2289746, 0.6917385, 0.0792869],\n [ 0.0000000, 0.0451134, 1.0439444]],\n \n xyzToRgb:\n [[ 2.4934969, -0.9313836, -0.4027108],\n [-0.8294890, 1.7626641, 0.0236247],\n [ 0.0358458, -0.0761724, 0.9568845]] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1909,"value":"SrgbM = ({\n rgbToXyz:\n [[ 0.4123908, 0.3575843, 0.1804808],\n [ 0.2126390, 0.7151687, 0.0721923],\n [ 0.0193308, 0.1191948, 0.9505322]],\n \n xyzToRgb:\n [[ 3.2409699, -1.5373832, -0.4986108],\n [-0.9692436, 1.8759675, 0.0415551],\n [ 0.0556301, -0.2039770, 1.0569715]]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1912,"value":"OklabLmsM = ({\n lmsToXyz:\n [[ 1.22701385, -0.55779998, 0.28125615],\n [-0.04058018, 1.11225687, -0.07167668],\n [-0.07638128, -0.42148198, 1.58616322]],\n xyzToLms:\n [[0.8189330101, 0.3618667424, -0.1288597137],\n [0.0329845436, 0.9293118715, 0.0361456387],\n [0.0482003018, 0.2643662691, 0.6338517070]]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1914,"value":"function apply_m(M, [r, g, b])\n{\n const [[m11, m12, m13], [m21, m22, m23], [m31, m32, m33]] = M;\n return [\n m11 * r + m12 * g + m13 * b,\n m21 * r + m22 * g + m23 * b,\n m31 * r + m32 * g + m33 * b];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1918,"value":"function m_m(M1, M2)\n{\n function apply_left_m([r1, r2, r3], M2)\n {\n const [[m11, m12, m13], [m21, m22, m23], [m31, m32, m33]] = M2; \n return [\n m11 * r1 + m21 * r2 + m31 * r3,\n m12 * r1 + m22 * r2 + m32 * r3,\n m13 * r1 + m23 * r2 + m33 * r3];\n }\n \n return [\n apply_left_m(M1[0], M2),\n apply_left_m(M1[1], M2),\n apply_left_m(M1[2], M2),\n ]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"rgbdata = {\n var data = [];\n for (var i = 0; i < cie1931.x.length; ++i)\n {\n var x = cie1931.x[i];\n var y = cie1931.y[i];\n var z = cie1931.z[i];\n var [r, g, b] = apply_m(RgbColorM.xyzToRgb, [x, y, z])\n data.push({r: r, g: g, b: b, wl: 380 + i});\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}