31:[{"id":"4109c891bac26009a1dcb4faebc6921851506089577ba46e65867ae651d4745be36fbe9ef490e1dcc25f41aaca969d8ac3056fbfac8cddfa42e29c844de72724","href":"https://static.observableusercontent.com/files/4109c891bac26009a1dcb4faebc6921851506089577ba46e65867ae651d4745be36fbe9ef490e1dcc25f41aaca969d8ac3056fbfac8cddfa42e29c844de72724","name":"RGB_to_spectrum_Octave.PNG","type":"image/png","lastModified":1711141444533.304,"size":66937},{"id":"26d435ba81cda82f407b7332a72b94961fc8d961d9cc6594daa9aac52f8b8a8f52ee92faeeb71ff7531cbfa3797c294c4ce05c0329e53a6ddb250eb885a28fe7","href":"https://static.observableusercontent.com/files/26d435ba81cda82f407b7332a72b94961fc8d961d9cc6594daa9aac52f8b8a8f52ee92faeeb71ff7531cbfa3797c294c4ce05c0329e53a6ddb250eb885a28fe7","name":"RGB_spectrum.mp4","type":"video/mp4","lastModified":1711405136279.123,"size":2084565}] 2f:{"title":"Colour spectrum (rainbow)","cells":[{"id":310,"value":"# Colour spectrum (rainbow)\n## RGB rendering of visible spectrum","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"

\n Realistic colour spectrum inspired by this Matlab blog:\n
\n Making Color Spectrum Plots – Part 2 (by Steve Eddins, July 20, 2020).\n

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"ramp(interpolateGaussian([0.32248, 0.983969, 0.888655], [0.171236, 0.411535, 0.277087], [0.053899, 0.091507, 0.129301], [1.11747, 0.689374, 0.299762], [0.653043, 0.561673, 0.739602], [0.114658, 0.055772, 0.053218]));\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"

\n This colour ramp is intended to realistically reproduce the visible spectrum in the sRGB colour space.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":210,"value":"Legend(d3.scaleSequential([380, 730], color_spectrum), {\n title: \"Wavelength (nm)\",\n width:500,\n height:66,\n tickSize:8,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"

\n For the average human eye, the visible colour range extends over the wavelengths\n
λ = 380 … 730 nm.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":112,"value":"
\n

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":145,"value":"

The non-linear sRGB values used to generate the colour ramp have been approximated with Gaussian functions (and subsequently truncated).

","pinned":false,"hidden":false,"mode":"html"},{"id":30,"value":"function interpolateGaussian([A_r1, A_g1, A_b1], [lambda_r1, lambda_g1, lambda_b1], [sigma_r1, sigma_g1, sigma_b1], [A_r2, A_g2, A_b2], [lambda_r2, lambda_g2, lambda_b2], [sigma_r2, sigma_g2, sigma_b2]) {\n return t => `rgb(${[\n A_r1*Math.exp(-0.5*Math.pow((t-lambda_r1)/sigma_r1,2)) + A_r2*Math.exp(-0.5*Math.pow((t-lambda_r2)/sigma_r2,2)) ,\n A_g1*Math.exp(-0.5*Math.pow((t-lambda_g1)/sigma_g1,2)) + A_g2*Math.exp(-0.5*Math.pow((t-lambda_g2)/sigma_g2,2)) ,\n A_b1*Math.exp(-0.5*Math.pow((t-lambda_b1)/sigma_b1,2)) + A_b2*Math.exp(-0.5*Math.pow((t-lambda_b2)/sigma_b2,2))\n ].map(v => Math.floor(Math.max(0, Math.min(1, v)) * 255))})`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"color_spectrum = interpolateGaussian([0.32248, 0.983969, 0.888655], [0.171236, 0.411535, 0.277087], [0.053899, 0.091507, 0.129301], [1.11747, 0.689374, 0.299762], [0.653043, 0.561673, 0.739602], [0.114658, 0.055772, 0.053218]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"
\n\nThe colour ramp was copied from \"@mbostock/ramp\":\n","pinned":false,"hidden":false,"mode":"html"},{"id":98,"value":"// import {ramp} from \"@mbostock/ramp\"\nfunction ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"
For the legend, use:","pinned":false,"hidden":false,"mode":"html"},{"id":207,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"
\n

Useful references

","pinned":false,"hidden":false,"mode":"html"},{"id":315,"value":"[Making Color Spectrum Plots – Part 2](https://blogs.mathworks.com/steve/2020/07/20/making-color-spectrum-plots-part-2/), Steve Eddins, July 2020. ★★★\n\nTechnical 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.*\n\n[Approximate RGB values for Visible Wavelengths](https://web.archive.org/web/20230302095030/http://www.physics.sfasu.edu/astro/color/spectra.html), Dan Bruton, 1996. ★★ \n[Retrieved from archive.org]\n\n[Rendering Spectra](https://web.archive.org/web/20240109121357/https://aty.sdsu.edu/explain/optics/rendering.html), Andrew T. Young, 2012. \n[Retrieved from archive.org]\n\n[A Beginner’s Guide to (CIE) Colorimetry](https://medium.com/hipster-color-science/a-beginners-guide-to-colorimetry-401f1830b65a), Chandler Abraham, September 2016.","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"

Equivalent result obtained with Octave / Matlab.\n
[ Source: Human vision and the CIE chromaticity diagram ]

","pinned":false,"hidden":false,"mode":"html"},{"id":376,"value":"
\n

Rendered spectrum vs. CIE chromaticity diagram.\n
[ Video: RGB_spectrum.mp4 ]

\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}