31:T4d0,

CIE xy chromaticity diagram

The CIE 1931 xy chromaticity diagram is represented in a diagram where y is plotted as a function of x. It is a virtual colour space where all values are positive.

For each colour combination, we have the following relation:
x + y + z = 1.
Therefore, if we provide x and y, the value z becomes redundant and can simply be omitted.

In the following diagram, the spectral wavelengths of monochromatic colours are displayed near their marker. The backround colour is calculated for the sRGB colour space which has its white point located at D65. The solid and dashed triangles represent the CIE RGB and the sRGB colour gamut, respectively. Colours outside these triangles can't be reproduced faithfully for the corresponding subsets of colours.

32:Ta57,CIE_xyplot = Plot.plot({ inset: 20, height: 600, width: 560, grid: true, x: { label: "x →" }, y: { label: "↑ y" }, style: { fontSize: "12px" }, marks: [ Plot.image([{ url: CIE_xy_BKG }], { preserveAspectRatio: "none", x:0.398, y:0.45, height: 554, width: 500, opacity: 0.7, src: "url" }), Plot.ruleX([0]), Plot.ruleY([0]), Plot.dot(selection_xyz, {x: "x", y: "y", marker: "circle-stroke", stroke: color_grey, fill: color_dot, r: 8}), Plot.dot(selection_xyz, {x: 0.313, y: 0.329, marker: "circle-stroke", stroke: "black", fill: "white", r: 5}), Plot.text(CIE_xyz_1nm, {x: 0.313, y: 0.329, text:["D65 \n(White point)"], dx:0, dy:22}), Plot.line(CIE_RGB_gamut, {filter: view_CIE_RGB_gamut==1, x: "x", y: "y", opacity: 0.6}), Plot.dot(CIE_RGB_gamut, {filter: view_CIE_RGB_gamut==1, x: "x", y: "y", marker: "circle-stroke", stroke: "white", fill: "black", r: 5, opacity: 0.6}), Plot.line(sRGB_gamut, {filter: view_sRGB_gamut==1, x: "x", y: "y",strokeDasharray: "6,8"}), Plot.dot(sRGB_gamut, {filter: d => d.wavelength_nm == 465 && view_sRGB_gamut==1, x: "x", y: "y", marker: "circle-stroke", stroke: "white", fill: "blue", r: 5}), Plot.dot(sRGB_gamut, {filter: d => d.wavelength_nm == 550 && view_sRGB_gamut==1, x: "x", y: "y", marker: "circle-stroke", stroke: "white", fill: "green", r: 5}), Plot.dot(sRGB_gamut, {filter: d => d.wavelength_nm == 610 && view_sRGB_gamut==1, x: "x", y: "y", marker: "circle-stroke", stroke: "white", fill: "red", r: 5}), Plot.line(CIE_xyz_1nm, {x: "x", y: "y", curve: "catmull-rom"}), Plot.dot(CIE_xyz_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 470 && d.wavelength_nm <=600, x: "x", y: "y", marker: "circle-stroke", stroke: "black", fill: "white"}), Plot.text(CIE_xyz_1nm, {filter: d => d.wavelength_nm == 470, x: "x", y: "y", text: d => `${d.wavelength_nm}`, dx:-20, dy:4}), Plot.text(CIE_xyz_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 475 && d.wavelength_nm <=510, x: "x", y: "y", text: d => `${d.wavelength_nm}`, dx:18, dy:-2}), Plot.text(CIE_xyz_1nm, {filter: d => d.wavelength_nm == 515, x: "x", y: "y", text: d => `${d.wavelength_nm}`, dx:-6, dy:-12}), Plot.text(CIE_xyz_1nm, {filter: d => d.wavelength_nm == 520, x: "x", y: "y", text: d => `${d.wavelength_nm}`, dx:0, dy:-12}), Plot.text(CIE_xyz_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 525 && d.wavelength_nm <=600, x: "x", y: "y", text: d => `${d.wavelength_nm}`, dx:16, dy:-8}), ] })33:T60b,CIE_rgplot = Plot.plot({ inset: 20, height: 600, width: 730, grid: true, x: { label: "r →" }, y: { label: "↑ g" }, style: { fontSize: "12px" }, marks: [ Plot.image([{ url: CIE_rg_BKG }], { preserveAspectRatio: "none", x:-0.175, y:0.98, height: 512, width: 634, opacity: 0.8, src: "url" }), Plot.ruleX([0]), Plot.ruleY([0]), Plot.dot(selection_rgb, {x: 0.333, y: 0.333, marker: "circle-stroke", stroke: "black", fill: "white", r: 5}), Plot.text(CIE_rgb_1nm, {x: 0.333, y: 0.333, text:["E \n(White point)"], dx:0, dy:22}), Plot.dot(selection_rgb, {x: "r", y: "g", marker: "circle-stroke", stroke: color_grey, fill: color_dot, r: 8}), Plot.line(CIE_rgb_1nm, {x: "r", y: "g", curve: "catmull-rom"}), Plot.dot(CIE_rgb_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 470 && d.wavelength_nm <=600, x: "r", y: "g", marker: "circle-stroke", stroke: "black", fill: "white"}), Plot.text(CIE_rgb_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 470 && d.wavelength_nm <=505, x: "r", y: "g", text: d => `${d.wavelength_nm}`, dx:-17, dy:7}), Plot.text(CIE_rgb_1nm, {filter: d => d.wavelength_nm == 510, x: "r", y: "g", text: d => `${d.wavelength_nm}`, dx:-6, dy:-14}), Plot.text(CIE_rgb_1nm, {filter: d => d.wavelength_nm % 5 === 0 && d.wavelength_nm >= 515 && d.wavelength_nm <=600, x: "r", y: "g", text: d => `${d.wavelength_nm}`, dx:16, dy:-8}), ] })34:T594,CIE_rgb_bar_plot = Plot.plot({ inset: 20, grid: true, height: 450, width: 750, x: {label: "λ (nm) →"}, y: {label: "↑ Amplitude"}, style: { fontSize: "12px" }, marks: [ Plot.ruleY([0]), Plot.ruleX([wavelength]), Plot.dot(selection_rgb_bar, {x: "wavelength_nm", y: "r_bar", fill: color_r, r: 5}), Plot.dot(selection_rgb_bar, {x: "wavelength_nm", y: "g_bar", fill: color_g, r: 5}), Plot.dot(selection_rgb_bar, {x: "wavelength_nm", y: "b_bar", fill: color_b, r: 5}), Plot.ruleX([435.8], {stroke: color_b, strokeDasharray: "4,3"}), Plot.ruleX([546.1], {stroke: color_g, strokeDasharray: "4,3"}), Plot.ruleX([700], {stroke: color_r, strokeDasharray: "4,3"}), Plot.line(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "r_bar", curve: "catmull-rom", stroke: color_r}), Plot.line(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "g_bar", curve: "catmull-rom", stroke: color_g}), Plot.line(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "b_bar", curve: "catmull-rom", stroke: color_b}), Plot.text(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "r_bar", text: ["Red (r-bar)"], fill: color_r, dy:24, dx: 72}), Plot.text(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "g_bar", text: ["Green (g-bar)"], fill: color_g, dy:-24, dx:80}), Plot.text(CIE_rgb_bar_1nm, {x: "wavelength_nm", y: "b_bar", text: ["Blue (b-bar)"], fill: color_b, dy:-56, dx:86}), ] })35:T593,CIE_xyz_bar_plot = Plot.plot({ inset: 20, grid: true, height: 450, width: 750, x: {label: "λ (nm) →"}, y: {label: "↑ Amplitude"}, style: { fontSize: "12px" }, marks: [ Plot.ruleY([0]), Plot.ruleX([wavelength]), Plot.ruleX([435.8], {stroke: color_b, strokeDasharray: "4,3"}), Plot.ruleX([546.1], {stroke: color_g, strokeDasharray: "4,3"}), Plot.ruleX([700], {stroke: color_r, strokeDasharray: "4,3"}), Plot.dot(selection_xyz_bar, {x: "wavelength_nm", y: "x_bar", fill: color_r, r: 5}), Plot.dot(selection_xyz_bar, {x: "wavelength_nm", y: "y_bar", fill: color_g, r: 5}), Plot.dot(selection_xyz_bar, {x: "wavelength_nm", y: "z_bar", fill: color_b, r: 5}), Plot.line(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "x_bar", curve: "catmull-rom", stroke: color_r}), Plot.line(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "y_bar", curve: "catmull-rom", stroke: color_g}), Plot.line(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "z_bar", curve: "catmull-rom", stroke: color_b}), Plot.text(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "x_bar", text: ["Red (x-bar)"], fill: color_r, dy:-85, dx: 110}), Plot.text(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "y_bar", text: ["Green (y-bar)"], fill: color_g, dy:-215, dx:190}), Plot.text(CIE_xyz_bar_1nm, {x: "wavelength_nm", y: "z_bar", text: ["Blue (z-bar)"], fill: color_b, dy:-340, dx:40}), ] })36:T536,CIE_rgb_plot = Plot.plot({ inset: 20, grid: true, height: 450, width: 750, x: {label: "λ (nm) →"}, y: {label: "↑ Amplitude"}, style: { fontSize: "12px" }, marks: [ Plot.ruleY([0]), Plot.ruleX([wavelength]), Plot.ruleX([435.8], {stroke: color_b, strokeDasharray: "4,3"}), Plot.ruleX([546.1], {stroke: color_g, strokeDasharray: "4,3"}), Plot.ruleX([700], {stroke: color_r, strokeDasharray: "4,3"}), Plot.dot(selection_rgb, {x: "wavelength_nm", y: "r", fill: color_r, r: 5}), Plot.dot(selection_rgb, {x: "wavelength_nm", y: "g", fill: color_g, r: 5}), Plot.dot(selection_rgb, {x: "wavelength_nm", y: "b", fill: color_b, r: 5}), Plot.line(CIE_rgb_1nm, {x: "wavelength_nm", y: "r", curve: "catmull-rom", stroke: color_r}), Plot.line(CIE_rgb_1nm, {x: "wavelength_nm", y: "g", curve: "catmull-rom", stroke: color_g}), Plot.line(CIE_rgb_1nm, {x: "wavelength_nm", y: "b", curve: "catmull-rom", stroke: color_b}), Plot.text(CIE_rgb_1nm, {x: "wavelength_nm", y: "r", text: ["Red (r)"], fill: color_r, dy:-11, dx: 17}), Plot.text(CIE_rgb_1nm, {x: "wavelength_nm", y: "g", text: ["Green (g)"], fill: color_g, dy:13, dx:24}), Plot.text(CIE_rgb_1nm, {x: "wavelength_nm", y: "b", text: ["Blue (b)"], fill: color_b, dy:-11, dx:17}), ] })37:T536,CIE_xyz_plot = Plot.plot({ inset: 20, grid: true, height: 450, width: 750, x: {label: "λ (nm) →"}, y: {label: "↑ Amplitude"}, style: { fontSize: "12px" }, marks: [ Plot.ruleY([0]), Plot.ruleX([wavelength]), Plot.ruleX([435.8], {stroke: color_b, strokeDasharray: "4,3"}), Plot.ruleX([546.1], {stroke: color_g, strokeDasharray: "4,3"}), Plot.ruleX([700], {stroke: color_r, strokeDasharray: "4,3"}), Plot.dot(selection_xyz, {x: "wavelength_nm", y: "x", fill: color_r, r: 5}), Plot.dot(selection_xyz, {x: "wavelength_nm", y: "y", fill: color_g, r: 5}), Plot.dot(selection_xyz, {x: "wavelength_nm", y: "z", fill: color_b, r: 5}), Plot.line(CIE_xyz_1nm, {x: "wavelength_nm", y: "x", curve: "catmull-rom", stroke: color_r}), Plot.line(CIE_xyz_1nm, {x: "wavelength_nm", y: "y", curve: "catmull-rom", stroke: color_g}), Plot.line(CIE_xyz_1nm, {x: "wavelength_nm", y: "z", curve: "catmull-rom", stroke: color_b}), Plot.text(CIE_xyz_1nm, {x: "wavelength_nm", y: "x", text: ["Red (x)"], fill: color_r, dy:-11, dx: 17}), Plot.text(CIE_xyz_1nm, {x: "wavelength_nm", y: "y", text: ["Green (y)"], fill: color_g, dy:13, dx:24}), Plot.text(CIE_xyz_1nm, {x: "wavelength_nm", y: "z", text: ["Blue (z)"], fill: color_b, dy:-11, dx:17}), ] })38:[{"id":"8fca1c5b7cc9e94be25fdf770b0385a925e1e5310b0e7ca5cb4359412a59ef92ed2f4085138373167e4f202f21ed56dc11804e2f55739f64d170fd3d4f8897c8","href":"https://static.observableusercontent.com/files/8fca1c5b7cc9e94be25fdf770b0385a925e1e5310b0e7ca5cb4359412a59ef92ed2f4085138373167e4f202f21ed56dc11804e2f55739f64d170fd3d4f8897c8","name":"math.min.js","type":"application/javascript","lastModified":1656232130836.295,"size":530953},{"id":"a3a4ddafb6e5ef94c3342497b53d6a353e667fa7fe3583ff63967e6e314e9d87b1aac10e61ff16388b5565eac808b081d0874d336ede36244cdbf484976b1af8","href":"https://static.observableusercontent.com/files/a3a4ddafb6e5ef94c3342497b53d6a353e667fa7fe3583ff63967e6e314e9d87b1aac10e61ff16388b5565eac808b081d0874d336ede36244cdbf484976b1af8","name":"CIE_rg_BKG.png","type":"image/png","lastModified":1656262548486.385,"size":56605},{"id":"88ca1cbf855cd780d56cb8dd79b57881cd69ea65270f7aef322d683abfb1dacb9e608f7e6f8bfb7c04c6b81e7089f48b86c82de79352653f17ed99054b621173","href":"https://static.observableusercontent.com/files/88ca1cbf855cd780d56cb8dd79b57881cd69ea65270f7aef322d683abfb1dacb9e608f7e6f8bfb7c04c6b81e7089f48b86c82de79352653f17ed99054b621173","name":"CIE_xy_sRGB_BKG.png","type":"image/png","lastModified":1656276341137.929,"size":76196},{"id":"79b210c71ed2fd14f2f9cf50a907f4de7d0715719b9020b556e503793554677f3826d3a1e867c67c49e0993c7a0ecfc891a8668e6ee80aa2e7df7aa3d3aced7d","href":"https://static.observableusercontent.com/files/79b210c71ed2fd14f2f9cf50a907f4de7d0715719b9020b556e503793554677f3826d3a1e867c67c49e0993c7a0ecfc891a8668e6ee80aa2e7df7aa3d3aced7d","name":"CIE1931_rgb_bar_1nm.csv","type":"text/csv","lastModified":1656276465863.983,"size":11938}] 2f:{"title":"CIE 1931 XYZ colour space","cells":[{"id":0,"value":"# CIE 1931 *XYZ* colour space","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"

The CIE 1931 colour spaces were the first standardised systems to establish a quantitative link between the energetic distribution of electromagnetic radiations in the visible spectrum and the colours physiologically perceived by the average human eye.\n

The CIE 1931 RGB colour space and the CIE 1931 XYZ colour space were created in 1931 by the International Commission on Illumination (CIE, French acronyme for Commission Internationale de l'Eclairage).\n

They resulted from a series of experiments completed independently in the late 1920s by William David Wright (Imperial College, London, UK) and John Guild (NPL, National Physical Laboratory, Teddington, UK). Their experimental results were combined by Guild to form the specifications of the CIE RGB colour space, from which the CIE XYZ colour space was derived.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1113,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":1483,"value":"viewof view_sRGB_gamut = checkbox({label: ' sRGB gamut', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"viewof view_CIE_RGB_gamut = checkbox({label: ' CIE RGB gamut', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"viewof wavelength = Inputs.range([400, 750], {value: 525, step: 1, label: \"Wavelength (nm)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"
\n

CIE rg chromaticity diagram

\n The CIE rg colour space is represented in a diagram where g is plotted as a function of r.\n In the following diagram, the corresponding wavelengths are displayed near their marker.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1277,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"---\n## Matrix transformation: CIE RGB → XYZ","pinned":false,"hidden":false,"mode":"md"},{"id":1154,"value":"Transformation from the CIE RGB space to the CIE XYZ space is achieved through the following matrix transformation.","pinned":false,"hidden":false,"mode":"html"},{"id":1158,"value":"tex` \n \\begin{array}{rrl}\n & M_{RGB \\rightarrow XYZ} &= ${texMatrix(CIE_RGB_to_XYZ)} \n \\end{array}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"Reciprocally, transformation from the CIE XYZ space to the CIE RGB space is achieved using the inverse matrix:","pinned":false,"hidden":false,"mode":"html"},{"id":1166,"value":"tex` \n \\begin{array}{rrl}\n & M_{XYZ \\rightarrow RGB} = M_{RGB \\rightarrow XYZ}^{-1} &= ${texMatrix(CIE_XYZ_to_RGB)} \n \\end{array}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"
\n

Colour matching functions

\n
\n

CIE r g b colour matching functions

","pinned":false,"hidden":false,"mode":"html"},{"id":1038,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"viewof selection_rgb_bar = Inputs.table(CIE_rgb_bar_1nm.filter(d => d.wavelength_nm == wavelength), {\n columns: [\n \"wavelength_nm\",\n \"r_bar\",\n \"g_bar\",\n \"b_bar\"\n ],\n\n header: {\n wavelength_nm: \"Wavelength (nm)\",\n r_bar: \"Red (r-bar)\",\n g_bar: \"Green (g-bar)\",\n b_bar: \"Blue (b-bar)\"\n },\n \n align: {\n wavelength_nm: \"center\",\n r_bar: \"left\",\n g_bar: \"left\",\n b_bar: \"left\",\n },\n \n width: {\n wavelength_nm: 110,\n r_bar: 60,\n g_bar: 60,\n b_bar: 60,\n },\n\n maxWidth: 700,\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"
\n

CIE x y z colour matching functions

","pinned":false,"hidden":false,"mode":"html"},{"id":850,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"viewof selection_xyz_bar = Inputs.table(CIE_xyz_bar_1nm.filter(d => d.wavelength_nm == wavelength), {\n columns: [\n \"wavelength_nm\",\n \"x_bar\",\n \"y_bar\",\n \"z_bar\"\n ],\n\n header: {\n wavelength_nm: \"Wavelength (nm)\",\n x_bar: \"Red (x-bar)\",\n y_bar: \"Green (y-bar)\",\n z_bar: \"Blue (z-bar)\"\n },\n \n align: {\n wavelength_nm: \"center\",\n x_bar: \"left\",\n y_bar: \"left\",\n z_bar: \"left\",\n },\n \n width: {\n wavelength_nm: 110,\n x_bar: 60,\n y_bar: 60,\n z_bar: 60,\n },\n\n maxWidth: 700,\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"
\n

CIE rgb colour coordinates

","pinned":false,"hidden":false,"mode":"html"},{"id":1264,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"viewof selection_rgb = Inputs.table(CIE_rgb_1nm.filter(d => d.wavelength_nm == wavelength), {\n columns: [\n \"wavelength_nm\",\n \"r\",\n \"g\",\n \"b\"\n ],\n\n header: {\n wavelength_nm: \"Wavelength (nm)\",\n r: \"Red (r)\",\n g: \"Green (g)\",\n b: \"Blue (b)\"\n },\n \n align: {\n wavelength_nm: \"center\",\n r: \"left\",\n g: \"left\",\n b: \"left\",\n },\n \n width: {\n wavelength_nm: 110,\n r: 60,\n g: 60,\n b: 60,\n },\n\n maxWidth: 700,\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"
\n

CIE xyz colour coordinates

","pinned":false,"hidden":false,"mode":"html"},{"id":1128,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"viewof selection_xyz = Inputs.table(CIE_xyz_1nm.filter(d => d.wavelength_nm == wavelength), {\n columns: [\n \"wavelength_nm\",\n \"x\",\n \"y\",\n \"z\"\n ],\n\n header: {\n wavelength_nm: \"Wavelength (nm)\",\n x: \"Red (x)\",\n y: \"Green (y)\",\n z: \"Blue (z)\"\n },\n \n align: {\n wavelength_nm: \"center\",\n x: \"left\",\n y: \"left\",\n z: \"left\",\n },\n \n width: {\n wavelength_nm: 110,\n x: 60,\n y: 60,\n z: 60,\n },\n\n maxWidth: 700,\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":1719,"value":"
\n

Useful reference

","pinned":false,"hidden":false,"mode":"html"},{"id":1713,"value":"Technical note: [Human vision and the CIE chromaticity diagram](http://dx.doi.org/10.13140/RG.2.2.31371.30242), idonus Sàrl, March 2024.\n[DOI: 10.13140/RG.2.2.31371.30242](http://dx.doi.org/10.13140/RG.2.2.31371.30242) \n*Document written by C. Yamahata.*","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":984,"value":"color_r = \"#FF2424\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"color_g = \"#70AD47\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"color_b = \"#4472C4\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"color_dot = \"#b935d5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"color_grey = \"#b0b0b0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"CIE_rg_BKG = FileAttachment(\"CIE_rg_BKG.png\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"CIE_xy_BKG = FileAttachment(\"CIE_xy_sRGB_BKG.png\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"CIE_RGB_to_XYZ = math.multiply([[0.49, 0.17697, 0], [0.31,\t0.8124,\t0.01], [0.2,\t0.01063,\t0.99]],5.6508)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"CIE_XYZ_to_RGB = math.inv(CIE_RGB_to_XYZ)","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"C_RGB = [[1.27499, -0.27777, 0.00278], [-1.7393, 2.76697, -0.02767], [-0.7431, 0.14090, 1.6022]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"C_XYZ = math.multiply(C_RGB,CIE_RGB_to_XYZ)","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"CIE_rgb_bar_1nm = FileAttachment(\"CIE1931_rgb_bar_1nm.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"CIE_rgb_bar_1nm_data = {\n let A = []\n for (let i = 0; i < CIE_rgb_bar_1nm.length; i++) {\n A[i] = [CIE_rgb_bar_1nm[i].r_bar ,CIE_rgb_bar_1nm[i].g_bar ,CIE_rgb_bar_1nm[i].b_bar]\n }\n return A\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"CIE_rgb_bar_1nm_array = {\n let A = []\n for (let i = 0; i < CIE_rgb_bar_1nm_data.length; i++) {\n A[i] = [CIE_rgb_bar_1nm[i].wavelength_nm, CIE_rgb_bar_1nm_data[i][0] ,CIE_rgb_bar_1nm_data[i][1],CIE_rgb_bar_1nm_data[i][2]]\n } \n return A\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"CIE_rgb_1nm_array = {\n let A = []\n for (let i = 0; i < CIE_rgb_bar_1nm_data.length; i++) {\n A[i] = [CIE_rgb_bar_1nm[i].wavelength_nm, CIE_rgb_bar_1nm_data[i][0]/(CIE_rgb_bar_1nm_data[i][0]+CIE_rgb_bar_1nm_data[i][1]+CIE_rgb_bar_1nm_data[i][2]) ,CIE_rgb_bar_1nm_data[i][1]/(CIE_rgb_bar_1nm_data[i][0]+CIE_rgb_bar_1nm_data[i][1]+CIE_rgb_bar_1nm_data[i][2]),CIE_rgb_bar_1nm_data[i][2]/(CIE_rgb_bar_1nm_data[i][0]+CIE_rgb_bar_1nm_data[i][1]+CIE_rgb_bar_1nm_data[i][2])]\n } \n return A\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"CIE_rgb_1nm = Array.from(CIE_rgb_1nm_array, (_, i) => ({\n wavelength_nm: CIE_rgb_1nm_array[i][0],\n r: CIE_rgb_1nm_array[i][1],\n g: CIE_rgb_1nm_array[i][2],\n b: CIE_rgb_1nm_array[i][3],\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"CIE_xyz_bar_1nm_data = math.transpose(math.multiply(math.transpose(CIE_RGB_to_XYZ),math.transpose(CIE_rgb_bar_1nm_data)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"CIE_xyz_bar_1nm_array = {\n let A = []\n for (let i = 0; i < CIE_xyz_bar_1nm_data.length; i++) {\n A[i] = [CIE_rgb_bar_1nm[i].wavelength_nm, CIE_xyz_bar_1nm_data[i][0] ,CIE_xyz_bar_1nm_data[i][1],CIE_xyz_bar_1nm_data[i][2]]\n } \n return A\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"CIE_xyz_1nm_array = {\n let A = []\n for (let i = 0; i < CIE_xyz_bar_1nm_data.length; i++) {\n A[i] = [CIE_rgb_bar_1nm[i].wavelength_nm, CIE_xyz_bar_1nm_data[i][0]/(CIE_xyz_bar_1nm_data[i][0]+CIE_xyz_bar_1nm_data[i][1]+CIE_xyz_bar_1nm_data[i][2]) ,CIE_xyz_bar_1nm_data[i][1]/(CIE_xyz_bar_1nm_data[i][0]+CIE_xyz_bar_1nm_data[i][1]+CIE_xyz_bar_1nm_data[i][2]),CIE_xyz_bar_1nm_data[i][2]/(CIE_xyz_bar_1nm_data[i][0]+CIE_xyz_bar_1nm_data[i][1]+CIE_xyz_bar_1nm_data[i][2])]\n } \n return A\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"CIE_xyz_bar_1nm = Array.from(CIE_xyz_bar_1nm_array, (_, i) => ({\n wavelength_nm: CIE_xyz_bar_1nm_array[i][0],\n x_bar: CIE_xyz_bar_1nm_array[i][1],\n y_bar: CIE_xyz_bar_1nm_array[i][2],\n z_bar: CIE_xyz_bar_1nm_array[i][3],\n}))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"CIE_xyz_1nm = Array.from(CIE_xyz_1nm_array, (_, i) => ({\n wavelength_nm: CIE_xyz_1nm_array[i][0],\n x: CIE_xyz_1nm_array[i][1],\n y: CIE_xyz_1nm_array[i][2],\n z: CIE_xyz_1nm_array[i][3],\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"CIE_RGB_gamut_array = [[700,0.7347,0.2653,0],[546.1, \t0.2738, 0.7174, 0.0088], [435.8, 0.1666,\t0.0089, 0.8245], [700,0.7347,0.2653,0]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1544,"value":"CIE_RGB_gamut = Array.from(CIE_RGB_gamut_array, (_, i) => ({\n wavelength_nm: CIE_RGB_gamut_array[i][0],\n x: CIE_RGB_gamut_array[i][1],\n y: CIE_RGB_gamut_array[i][2],\n z: CIE_RGB_gamut_array[i][3],\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"sRGB_gamut_array = [[610, 0.64,\t0.33,\t0.01], [550,0.3,\t0.6, 0.1],[465, 0.15,\t0.06,\t0.79],[610, 0.64,\t0.33,\t0.01]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"sRGB_gamut = Array.from(sRGB_gamut_array, (_, i) => ({\n wavelength_nm: sRGB_gamut_array[i][0],\n x: sRGB_gamut_array[i][1],\n y: sRGB_gamut_array[i][2],\n z: sRGB_gamut_array[i][3],\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"// Adapted from https://observablehq.com/@tonyhschu/linear-algebra-homework-matrix-matrix-multiplication\ntexMatrix = (m) => {\n const mt = math.transpose(m)\n const values = mt.valueOf()\n const string = values.map((row) => {\n return row.map((d) => (Math.round(d * 1000000) / 1000000).toFixed(6)).join(' & ')\n }).join(\" \\\\\\\\ \")\n const s = `\\\\left[\\\\begin{matrix}\n ${string}\n \\\\end{matrix}\\\\right]`\n \n const ss = s.replace('/\\/\\g', '\\\\')\n \n return ss\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1641,"value":"// From https://observablehq.com/@nitaku/checkbox\ncheckbox = ({label = '', value = false} = {}) => {\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n \n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"*Library **math.js** loaded on Observable (see 'File attachment' in the 'Data pane').\nSource code 'math.min.js' is available here: https://unpkg.com/mathjs@5.0.1/dist/math.min.js*","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"math = require(URL.createObjectURL(mathMin))","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"mathMin = FileAttachment(\"math.min.js\").blob()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}