2c:null 2d:["$","title",null,{"children":"Picking differentiable colors with good contrast | Grant Custer | Observable"}] 32:[] 30:{"id":"71a8658459f1a811","slug":"picking-differentiable-colors-with-good-contrast","title":"Picking differentiable colors with good contrast","thumbnail":"272995befc0e859c2e48f772d5650b58e9c6648682405c94ea05397b5945344a","access_level":"public","create_time":"$D2018-06-13T14:25:19.052Z","update_time":"$D2019-01-29T01:46:45.964Z","view_time":null,"first_public_time":"$D2018-06-13T14:49:25.331Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":96,"publish_version":96,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"2c6ed0b4953f6d9b","slug":"colors","title":"Colors","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"title":"Picking differentiable colors with good contrast","cells":[{"id":0,"value":"md`# Picking differentiable colors with good contrast`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":" md`Cycling through hue and ajusting to the same luminance using chroma.js to get an idea of what is out there.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n let content = `

`\n let i = 0\n for (let color of colors) {\n content += `

${i}

`\n i++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"colors = {\n let colors = []\n for (let i = 0; i < 360; i++) {\n colors.push(chroma.hsl(i,1,0.5).luminance(luminance).hex())\n }\n return colors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`I need 10 of them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"picked.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n let content = `

`\n for (let hue of picked) {\n content += `

${hue}

`\n }\n content += `

${picked[0]}

`\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"picked = [2,30,45,70,103,190,220,250,290, 310]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"picked_hexes = picked.map(h => chroma.hsl(h,1,0.5).luminance(luminance).hex())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"html`${JSON.stringify(picked_hexes)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"luminance = 0.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"