2d:null 2e:["$","title",null,{"children":"Meaningful Color Names | Shaun Lebron | Observable"}] 33: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('')} ` }34: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); }35:[{"id":"d02ca601aaabca90a0842f1add31a23e6b9c096f1994815994ebc31c558670aec2d710927e1c8d54eb9fdab58e083eb55b3cfb8eec7bcb65a46766d1d45205cb","href":"https://static.observableusercontent.com/files/d02ca601aaabca90a0842f1add31a23e6b9c096f1994815994ebc31c558670aec2d710927e1c8d54eb9fdab58e083eb55b3cfb8eec7bcb65a46766d1d45205cb","name":"per-bag-colors.json","type":"application/json","lastModified":1585581413702.28,"size":91786}] 31:{"id":"44bd02ac61653881","slug":"meaningful-color-names","title":"Meaningful Color Names","thumbnail":"1fcdd9d32a0666e151ac831987472976654c6882e29307a8701a26677ba9b2ef","access_level":"public","create_time":"$D2020-03-30T15:16:40.418Z","update_time":"$D2025-09-30T22:54:24.209Z","view_time":null,"first_public_time":"$D2020-03-30T16:07:36.780Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"colors = FileAttachment(\"per-bag-colors.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"