29:null 2a:["$","title",null,{"children":"CIE 1931 XYZ colour space | Christophe Yamahata | Observable"}] 2f: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.

30: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}), ] })31: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}), ] })32: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}), ] })33: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}), ] })34: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}), ] })35: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}), ] })36:[{"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}] 2d:{"id":"dfb9498997c84a28","slug":"cie-1931-xy-chromaticity-diagram","title":"CIE 1931 XYZ colour space","thumbnail":"856f7a985b1fd17e1ba88691952cdd9ea65acf2847ec34fae186e8a2bf66c388","access_level":"public","create_time":"$D2022-06-26T08:28:50.836Z","update_time":"$D2026-09-05T16:22:56.481Z","view_time":null,"first_public_time":"$D2022-06-26T20:21:39.043Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":1738,"publish_version":1738,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"79a85315e6323ef2","slug":"colour","title":"Colour","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"CIE 1931 XYZ colour space","cells":[{"id":0,"value":"# CIE 1931 *XYZ* colour space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1113,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1483,"value":"viewof view_sRGB_gamut = checkbox({label: ' sRGB gamut', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"viewof view_CIE_RGB_gamut = checkbox({label: ' CIE RGB gamut', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"viewof wavelength = Inputs.range([400, 750], {value: 525, step: 1, label: \"Wavelength (nm)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1277,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"---\n## Matrix transformation: CIE RGB → XYZ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"
\n

Colour matching functions

\n
\n

CIE r g b colour matching functions

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1038,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"
\n

CIE x y z colour matching functions

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":850,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"
\n

CIE rgb colour coordinates

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1264,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"
\n

CIE xyz colour coordinates

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1128,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1719,"value":"
\n

Useful reference

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":984,"value":"color_r = \"#FF2424\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"color_g = \"#70AD47\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"color_b = \"#4472C4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"color_dot = \"#b935d5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"color_grey = \"#b0b0b0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"CIE_rg_BKG = FileAttachment(\"CIE_rg_BKG.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"CIE_xy_BKG = FileAttachment(\"CIE_xy_sRGB_BKG.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"CIE_XYZ_to_RGB = math.inv(CIE_RGB_to_XYZ)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"C_XYZ = math.multiply(C_RGB,CIE_RGB_to_XYZ)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"CIE_rgb_bar_1nm = FileAttachment(\"CIE1931_rgb_bar_1nm.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"//math = require(URL.createObjectURL(mathMin))\nimport * as math from \"npm:mathjs\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"mathMin = FileAttachment(\"math.min.js\").blob()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 2e:"$2d:body"