2b:null 2c:["$","title",null,{"children":"Color-picker | spencer kelly | Observable"}] 31:[] 2f:{"id":"1b5acb54068a6337","slug":"color-picker","title":"Color-picker","thumbnail":"f405e8aa45ffa097281d389f2f9310245760b9c76dba3c97dde18c354e7fb63d","access_level":"public","create_time":"$D2018-06-19T16:27:07.993Z","update_time":"$D2018-12-25T15:47:10.795Z","view_time":null,"first_public_time":"$D2018-06-19T17:54:03.159Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":"starter_2024"},"version":657,"publish_version":657,"role":null,"authored":false,"authors":[{"type":"individual","id":"25825fd15d797d3f","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":null}],"members":[{"type":"individual","id":"25825fd15d797d3f","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8c4e6409a3e7d964","slug":"color","title":"Color","owner":{"id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly"}},"type":"notebook","body":{"title":"Color-picker","cells":[{"id":0,"value":"md`# Color-picker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"{\n colors;\n let basic= html`

`\n let div=html`

\n ${colors.map(c=>'

')}\n ${basic}\n

'\n\n let div= html`

${input}${heart}

`\n div.querySelector('#keep').addEventListener('click', (event)=> {\n colors.push(color)\n mutable colors=colors\n })\n div.querySelector('#text').addEventListener('change', (event)=> {\n mutable color=event.target.value\n })\n //mutable color= viewof div\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"html`

${JSON.stringify(colors.concat([color]),null, 2)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"{\n let hue=d3Color.hsl(color).h||0\n let list=[35, 40, 45, 50, 55, 60, 65, 70, 75, 80]\n list=list.map(n=>{\n return `hsl(${hue}, 50%, ${n}%)`\n })\n let div= html`\n

\n ${list.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"moveGrey(25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"moveHue(d3Color.hsl(color), 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"moveHue(d3Color.hsl(color), 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"moveHue(d3Color.hsl(color), 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"//shiftHue([1.02, 1.04, 1.06, 1.08, 1.1])\nshiftHue([8,16,24,32,40])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"moveHue(d3Color.hsl(color), 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"{\n let hsl=d3Color.hsl(color)\n let colors=[7.2,7.5,8.8, 9, 9.2, 9.4].map(n=>{\n return `hsl(${hsl.h||0}, ${10}%, ${n*10}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"//shiftHue([0.98,0.96,0.94,0.92,0.9])\nshiftHue([0,-8,-16,-32,-40])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"moveGrey(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"mutable color=\"cornflowerblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"pin=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"function moveHue(hsl,num){\n let hue=hsl.h||0\n let ratio=(1/(num+1))+1\n let colors=[]\n for(let i=0; i\n ${colors.map(c=>'

')}\n `\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"function shiftHue(arr){\n let hsl=d3Color.hsl(color)\n let colors=arr.map(n=>{\n let h= (hsl.h||0) + n\n h = h % 360\n return `hsl(${h}, ${hsl.s*100}%, ${hsl.l*100}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"function moveGrey(sat){\n{\n let hsl=d3Color.hsl(color)\n let colors=[2,3,4,5,6].map(n=>{\n return `hsl(${hsl.h||0}, ${sat}%, ${n*5}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"function addColor(event) {\n console.log('here', color)\n colors.push(color)\n mutable colors=colors\n event.preventDefault()\n return false\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"function listenTo(els){\n Array.from(els).forEach(el => {\n el.addEventListener('click', function(event) {\n let c = event.target.style['background-color']\n mutable color = d3Color.rgb(c).hex()\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"d3Color=require('d3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"mutable colors=[]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"fours=[1,2,3,4].map(n=>n/4*360)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"