31:T7c6,function hueCanvas(f,label,max=1) { const w = width const tickH = 6 const gradH = 25 const unigradH = 6 const labelH = 20 const h = gradH + tickH + (label ? labelH : 0) + unigradH const ctx = DOM.context2d(w,h) const y = h - gradH - unigradH ctx.font = '16px sans-serif' if (label) { ctx.fillStyle = '#3558' ctx.textAlign = 'left' ctx.textBaseline = 'top' ctx.fillText(label, 10, 0) } ctx.shadowColor = '#000' ctx.shadowBlur = 1.4 // get ticks const tickRes = 4 const tickN = 6 * 2**tickRes const tickStops = [] for (let j=0; j max) break tickStops.push([i,f(i), hue(i).hex]) } if (max == 1) tickStops.push([1,1, hue(0).hex]) // draw ticks if (!cleanMode) { for (const [i,j,color] of tickStops.slice(1,-1)) { ctx.beginPath() const x = j*w ctx.moveTo(x,y-tickH) ctx.lineTo(x,y) ctx.strokeStyle = color; ctx.stroke() } } // draw gradients drawn between each tick const g = ctx.createLinearGradient(0,0,w,0) for (const [i,j,color] of tickStops) { g.addColorStop(j,color) } ctx.fillStyle = g ctx.fillRect(0,y,w*max,gradH) const g2 = ctx.createLinearGradient(0,0,w,0) for (const [i,j] of tickStops) { const h = hue(i).lchab[2] g2.addColorStop(j, chroma.hcl(h,80,80).hex()) } ctx.fillStyle = g2 ctx.fillRect(0,y+gradH,w*max,unigradH) // draw labels if (!cleanMode) { ctx.textBaseline = 'middle' for (const [label,i] of Object.entries(hueI)) { if (max < 1 && label=='R2') break const j = i==max ? max : f(i) const col = hue(i).hex ctx.beginPath() const tx = j*w const ty = y+gradH/2 const text = ' '+label[0]+' ' ctx.textAlign = i==0 ? 'left' : i==max ? 'right' : 'center' ctx.lineWidth = 3 ctx.strokeStyle = '#0004'; ctx.strokeText(text,tx,ty) ctx.fillStyle = '#fff'; ctx.fillText(text,tx,ty) } } return ctx.canvas }32:[{"id":"2341e7702987b429bcf96250fec1335d3ddb2dc31cc752d7c2be08703d8b1195e50648d982048384539ca6f7d966d9203d31d366746a3b8e9ed0fb4e23bff602","href":"https://static.observableusercontent.com/files/2341e7702987b429bcf96250fec1335d3ddb2dc31cc752d7c2be08703d8b1195e50648d982048384539ca6f7d966d9203d31d366746a3b8e9ed0fb4e23bff602","name":"new01.jpg","type":"image/jpeg","lastModified":1621542576657.051,"size":76347},{"id":"dc0d466520cfbf8140ee82c9d313bf349ea6429fb309fec03e23abceecd9c8efc3bbfc348e4e5d20a2588cd80cbe4baa1f18b55094499d403817261e4b719ca3","href":"https://static.observableusercontent.com/files/dc0d466520cfbf8140ee82c9d313bf349ea6429fb309fec03e23abceecd9c8efc3bbfc348e4e5d20a2588cd80cbe4baa1f18b55094499d403817261e4b719ca3","name":"color-wheel-adobe.png","type":"image/png","lastModified":1621535270547.414,"size":74007},{"id":"35af35c05e08246cb7a74bc30c21f7df8d4643765f791aefcbde808a285279825da941be6262d14e1cd153c39dd066cf2bbf9ad4a96c489a8eddfe3f208966f4","href":"https://static.observableusercontent.com/files/35af35c05e08246cb7a74bc30c21f7df8d4643765f791aefcbde808a285279825da941be6262d14e1cd153c39dd066cf2bbf9ad4a96c489a8eddfe3f208966f4","name":"RGB_color_solid_cube.png","type":"image/png","lastModified":1675274934454.054,"size":751308},{"id":"9ceabd9091a1f2366670faae411fccff05851cc3a4d7d73377345b7d6953c25d5eb28d63234660e060916061c37536bdca7f68ef4302dc68cbbc3da7197c26a2","href":"https://static.observableusercontent.com/files/9ceabd9091a1f2366670faae411fccff05851cc3a4d7d73377345b7d6953c25d5eb28d63234660e060916061c37536bdca7f68ef4302dc68cbbc3da7197c26a2","name":"RGB_color_solid_cube@1.png","type":"image/png","lastModified":1675275656768.142,"size":810072},{"id":"5ea9e7705a8e63045d39b1edd5dc8588caee5686c4f668b29e5f8cf73c79c4129efa2e8a28f9a95b370f1dcad4395934b91415fe210dc99bbdc5a45410f8a90d","href":"https://static.observableusercontent.com/files/5ea9e7705a8e63045d39b1edd5dc8588caee5686c4f668b29e5f8cf73c79c4129efa2e8a28f9a95b370f1dcad4395934b91415fe210dc99bbdc5a45410f8a90d","name":"Hsv-hues-cf-lch-hues.png","type":"image/png","lastModified":1621535270858.476,"size":233001},{"id":"7e38bacefb77320ccf7a904f49d1d67df5593ec053aa814b49811ac1c9917bbbc4f0e552e9e679ffc1c0b267e0eeddd899a1b81e7af9331b7b0864bac62666f1","href":"https://static.observableusercontent.com/files/7e38bacefb77320ccf7a904f49d1d67df5593ec053aa814b49811ac1c9917bbbc4f0e552e9e679ffc1c0b267e0eeddd899a1b81e7af9331b7b0864bac62666f1","name":"new02.jpg","type":"image/jpeg","lastModified":1621542576421.106,"size":110666},{"id":"1d7f3f5d51a82944652630f4130c2176e091a4ba0d2fb553ea696b8d1e306aff39f23ab506f70b3da4717d8cc205127443fc22ba65e184e11b7f3cca917b6143","href":"https://static.observableusercontent.com/files/1d7f3f5d51a82944652630f4130c2176e091a4ba0d2fb553ea696b8d1e306aff39f23ab506f70b3da4717d8cc205127443fc22ba65e184e11b7f3cca917b6143","name":"RGB_color_solid_cube@2.png","type":"image/png","lastModified":1675275773866.216,"size":861460}] 2f:{"title":"Spacing out the Digital Rainbow","cells":[{"id":1030,"value":"# Spacing out the Digital Rainbow\n\nLet’s arbitrarily assign Roy G. Biv to actual RGB values:\n\n

\n\n* Red = rgb red\n* Orange = midpoint of rgb red and yellow\n* Yellow = rgb yellow\n* Green = rgb green\n* Blue* = rgb cyan\n* Indigo* = rgb blue\n* Violet = midpoint of rgb blue and magenta\n* Magenta** = rgb magenta\n\n\\* _We use the classical definitions of Blue and Indigo based on Newton’s original names for the hues, since Roy G Biv is probably based on these ([see Dr. David Briggs summary and references][briggs])_\n\n[briggs]:https://old.reddit.com/r/explainlikeimfive/comments/2k1se9/eli5_why_are_the_colors_of_the_rainbow_roygbiv/clhro3w/\n\n\\*\\* _We include the magenta corner of the cube, but it is not on the physical rainbow._\n\nThe names are all on the outer edges of the RGB cube, so we lay it out on a linear scale. This scale is known as HSL or HSV hue “angle”, which just means a distance along this “rainbow edge” of the cube:","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"hueCanvas(i => i, \"spaced based on RGB distance\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"Let’s space out the names evenly apart, so that the scale is aligned to our language:","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"hueCanvas(mapRoygbiv, \"spacing based on Names\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"The actual rainbow is arranged according to physical wavelength:","pinned":false,"hidden":false,"mode":"md"},{"id":1160,"value":"hueCanvas(mapWavelength, \"spacing based on Wavelength\",hueI.M)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"---\n## Compare to different perceptual color spaces\n\nThere are many opinions on how to distribute the rainbow. Toggle off the axis details below to see which one you like without distraction:","pinned":false,"hidden":false,"mode":"md"},{"id":1201,"value":"viewof cleanMode = Inputs.toggle({label: \"Just show colors\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"hueCanvas(mapAdobeWheel, \"Adobe Color Wheel\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"hueCanvas(Oklch, \"OkLCh (Ottosson 2020)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"hueCanvas(mapHCLsm, \"HCL (Sarifuddin and Missaou 2005)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"hueCanvas(mapHCLab, \"CIELAB 1976\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"hueCanvas(mapHCLuv, \"CIELUV 1976\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`---\n## [Adobe Color Wheel](https://color.adobe.com/create/color-wheel)\n\nI’ve found no reference explaining this hue distribution, but perhaps it was designed to make more space for Orange, so that familiar color *names* are spaced somewhat evenly.\n\n

\n*source: https://spectrum.adobe.com/page/color-wheel/*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"hueCanvas(mapAdobeWheel, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"// Adobe Color Wheel (originally “Adobe Kuler”)\n// see: https://color.adobe.com\n// code: https://github.com/smallpath/adobe-color-picker/blob/master/colorPicker.js\nfunction mapAdobeWheel(i) {\n const a = { R:0, O:30, Y:60, G:120, C:180, B:240, M:300, R2:360 } // hsl degrees\n const b = { R:0, O:45, Y:120, G:180, C:220, B:275, M:320, R2:360 } // adobe degrees\n\n const n = 360\n const h = (i%1)*n\n if (h
\n*source: https://en.wikipedia.org/wiki/Hue#/media/File:Hsv-hues-cf-lch-hues.png*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"hueCanvas(Oklch, \"OkLCh 2021\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"// Oklch\n// We use the `ac-colors` library to perform this transformation from sRGB -> XYZ -> LAB\n// (extra effort to put red at 0)\nOklch = i => ((oklch(hue_culori(i)).h - oklch(hue_culori(0)).h)/360 + 1) % 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"hueCanvas(mapHCLab, \"CIELAB 1976\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"// CIELAB\n// We use the `ac-colors` library to perform this transformation from sRGB -> XYZ -> LAB\n// (extra effort to put red at 0)\nmapHCLab = i => ((hue(i).lchab[2] - hue(0).lchab[2])/360 + 1) % 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"hueCanvas(mapHCLuv, \"CIELUV 1976\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// CIELUV\n// We use the `ac-colors` library to perform this transformation from sRGB -> XYZ -> LUV\n// (extra effort to put red at 0)\nmapHCLuv = i => ((hue(i).lchuv[2] - hue(0).lchuv[2])/360 + 1) % 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"hueCanvas(mapHCLsm,\"Sarifuddin and Missaou 2005\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"// HCL as designed by Sarifuddin and Missaou in 2005.\n// Paper: http://w3.uqo.ca/missaoui/Publications/TRColorSpace.zip\n// (formula corrected below, since the one in the paper has an error)\nmapHCLsm = i => {\n const {atan2,PI} = Math\n const [r,g,b] = hue(i).rgb\n const h = atan2((g-b),(r-g))\n return h>=0 ?\n map(h, [0,PI], [0,0.5]) :\n map(h, [-PI,0], [0.5,1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`\n---\n## Physics: Wavelength\n\n[Dan Bruton][src] wrote a method to approximate the RGB (sRGB?) value for a given wavelength of light that I use here. (I remove the redundant reds, and also remove the darkening of the magenta side to show pure hues.)\n\nNewton first arranged them this way on a wheel, proposing to make room for combinations of R and M, which we omit from the scale below.\n\n\n

\n*source: https://www.colorsystem.com/?page_id=683*\n[src]:http://www.midnightkite.com/color.html\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"hueCanvas(mapWavelength, \"645 to 380 nm\",hueI.M)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"// sRGB hue angle -> wavelength\n// Uses a piecewise linear approximation.\n// (derived from: http://www.physics.sfasu.edu/astro/color/spectra.html)\nfunction mapWavelength(i) {\n const a = { R:0, Y:60, G:120, C:180, B:240, M:300 } // hsl degrees\n const b = { R:645, Y:580, G:510, C:490, B:440, M:380 } // wavelengths\n // NOTE: magenta is only 30% bright on spectrum^\n // (according to the referenced model)\n\n const h = (i%1)*360\n let w\n if (hy\n if (a < 2) return [s, 1, 0] // y->g\n if (a < 3) return [0, 1, t] // g->c\n if (a < 4) return [0, s, 1] // c->b\n if (a < 5) return [t, 0, 1] // b->m\n if (a < 6) return [1, 0, s] // m->r\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"// extreme point on sRGB with the given hue (for ac-colors library)\n// 0 <= i <= 1\nhue = i => new Color({type:'rgb', color:hueToRgb(i).map(c => 255*c)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"// extreme point on sRGB with the given hue (for culori library)\n// 0 <= i <= 1\nhue_culori = i => ({mode:'hsv', h:i*360, s:1, v:1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Color = require('ac-colors@1.4.2/dist/ac-colors.min.js') // needed for CIE LUV","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"chroma = require('chroma-js@2.4.0') // needed for clamped CIE HCLab","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"// Re-maps a number from one range to another:\n// https://processing.org/reference/map_.html\nfunction map(n, [start1, stop1], [start2, stop2]) {\n return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"culori = require('culori@4.0.1') // needed for OkLCh","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"oklch = culori.converter('oklch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}