2f:T419,{ const knowns=['Red','Orange','Yellow','Green','Cyan','Blue','Indigo','Violet','Purple','Magenta'] const table = color => { const shortName = i => { const q = abbrev(color.name,i.name) if (q) return `${q}` return `${i.name}` } const cell = i => `${shortName(i)}` const row = i => `${[...i].reverse().map(cell).join('')}` const swatches = i => `${i.map(row).join('')}

` return swatches(color.swatches) } const base = i => `

${i.name}

${table(i)}

` return html` ${colors.map(base).join('')} ` }30:T539,// Scraped the `colors` json by pasting this function in the console of: // http://www.procato.com/rgb+index/ function scrape() { const container = document.querySelector("div.container.themedark"); const divs = [...container.children]; const hues = divs.filter(e => e.id.match(/rgbxindex\d+$/)); function extractSwatch(el) { const text = el.querySelector("a").innerHTML; const match = text.match(/(\w*) (.*)/); const index = Number(match[1]); const name = match[2]; const color = el.style.background; return { index, name, color }; } function extractHue(el) { const title = el.previousSibling.querySelector("h2 div"); const color = title.style.borderLeftColor; const text = title.innerHTML; const match = text.match(/(.*), hue (.*)°/); const name = match[1]; const hueAngle = Number(match[2]); const children = [...el.children[0].children]; const swatches = []; let row = []; const tryCommitRow = () => { if (row.length > 0) swatches.push(row); row = []; }; for (const e of children) { if (e.tagName === "BR") { tryCommitRow(); } else if (e.tagName === "DIV") { row.push(extractSwatch(e)); } } tryCommitRow(); return { name, hueAngle, color, swatches }; } return hues.map(extractHue); }31:[{"id":"d02ca601aaabca90a0842f1add31a23e6b9c096f1994815994ebc31c558670aec2d710927e1c8d54eb9fdab58e083eb55b3cfb8eec7bcb65a46766d1d45205cb","href":"https://static.observableusercontent.com/files/d02ca601aaabca90a0842f1add31a23e6b9c096f1994815994ebc31c558670aec2d710927e1c8d54eb9fdab58e083eb55b3cfb8eec7bcb65a46766d1d45205cb","name":"per-bag-colors.json","type":"application/json","lastModified":1683556621728.419,"size":91786}] 2d:{"title":"Meaningful Color Names","cells":[{"id":0,"value":"md`# Meaningful Color Names\n\nCreated by [Per Bang](http://www.procato.com/rgb+index/) in 2010, who “simply got tired of meaningless color names.” Each of the ${colors.length} base hues are based on real things, from which ${colors.reduce((sum,{swatches}) => sum+swatches.reduce((s,j) => s+j.length,0),0)} variations are derived using plain English modifiers (e.g. pale, light, strong, grayish, deep, luminous, and vivid).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"colors = FileAttachment(\"per-bag-colors.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"// Black or white foreground text?\n// from: https://stackoverflow.com/a/3943023/142317\nfg = bg => {\n let [_,r,g,b] = bg.match(/rgb\$(\\d+), (\\d+), (\\d+)\$/);\n [r,g,b] = [r,g,b].map(i => parseInt(i,10))\n const intensity = r*0.299 + g*0.587 + b*0.114\n return intensity > 149 ? 'black' : 'white'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"abbrev = (main,name) => {\n main = main.toLowerCase()\n name = name.toLowerCase()\n if (name.endsWith(main)) return name.slice(0, -(main.length+1))\n let ish = name.replace(main+\"ish\", \"-ish\")\n if (ish != name) return ish\n ish = name.replace(main.slice(0,-1)+\"ish\", \"-ish\")\n if (ish != name) return ish\n ish = name.replace(main+main.slice(-1)[0]+\"ish\", \"-ish\")\n if (ish != name) return ish\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`\n## Secondary colors\nSome hues are named without referencing any of the ${colors.length} base hues:\n- pink (under *red*)\n- olive (under *yellow*)\n- brown (under *orange* and *red*)\n\n## Tertiary colors\n- gray\n- white\n- black\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"secondaryHues = Object.fromEntries(colors.map(c => [c.name, c.swatches.flat().filter(i => !abbrev(c.name,i.name))])\n .filter(([a,b]) => b.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"allQualifiers = {\n const all = colors.map(c => c.swatches.flat().map(i => abbrev(c.name,i.name))).flat().filter(i=>i && !i.includes('brown'))\n const result = {}\n for (const c of all) {\n if (!result[c]) result[c]=0\n result[c]++\n }\n return result \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"allBrowns = colors.map(c => c.swatches.flat().map(i=>i.name.toLowerCase()).filter(i => i.includes('brown'))).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## See Also\n\n- [Werner’s Nomenclature of Colours, based on animal, plant, or mineral](https://www.thisiscolossal.com/2018/01/werners-nomenclature-of-colours/)\n - thanks to [moiriad on HN](https://news.ycombinator.com/item?id=22726546)\n- [Identify the closest web color name](http://chir.ag/projects/name-that-color)\n - thanks to [parkersweb on HN](https://news.ycombinator.com/item?id=22727646)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}