2b:null 2c:["$","title",null,{"children":"Color interpolation | spencer kelly | Observable"}] 31:[] 2f:{"id":"e82915efa96ecb12","slug":"color-interpolation","title":"Color interpolation","thumbnail":"3071454e5aa409ae92efbf066c44686ad5d3c3cfe4e71f41db932d4b78be63d0","access_level":"public","create_time":"$D2018-12-18T04:37:55.071Z","update_time":"$D2024-12-01T15:52:49.432Z","view_time":null,"first_public_time":"$D2018-12-18T05:06:07.098Z","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":277,"publish_version":null,"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":[{"id":"97d26c936322eeb8","reply_to_id":null,"content":"It seems that API has changed. Now it must be `hex = culori.formatHex;`","create_time":"$D2024-11-27T16:29:14.991Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"eded5d718b1a3b4e","login":"combdn","name":"Valery Sibikovsky","avatar_url":"https://avatars-next.observableusercontent.com/af885e6683d30b4b5c19ef60cc06bb27c9e20bd3b412cb26025ee2e723bb1f5b","tier":null}},{"id":"32af3a4def255ec7","reply_to_id":"97d26c936322eeb8","content":"thank you Valery!","create_time":"$D2024-12-01T15:53:05.783Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"25825fd15d797d3f","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"8c4e6409a3e7d964","slug":"color","title":"Color","owner":{"id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly"}},"type":"notebook","body":{"title":"Color interpolation","cells":[{"id":0,"value":"md`# Color interpolation\nusing Dan Burzo's [culori](https://github.com/Evercoder/culori#basic-methods) library.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof a = color('#de6069')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof b = color('#547cc4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"drawMode('rgb')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"drawMode('lch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"drawMode('yiq')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"drawMode('cubehelix')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"function drawMode(mode){\n return html`

${mode} color space:

${interp(decimals(2), mode)}

${interp(decimals(3), mode)}

${interp(decimals(4), mode)}

${interp(decimals(5), mode)}

${interp(decimals(6), mode)}

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"function interp(arr, mode='rgb'){\n let mix = culori.interpolate([a,b], mode)\n return arr.map((i)=> {\n let h=hex(mix(i))\n return htm`

${h}

`\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"function decimals(n){\n let arr=[]\n for(let i=1; i<=n; i+=1){\n arr.push(i/n)\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"md`## HSL lightness gradients:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"hslGradient(a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"hslGradient(b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"md`### Grey-shades:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"greyShades(a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"greyShades(b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"function greyShades(c){\n let hsl=d3Color.hsl(c)\n let colors=[5.6, 6, 6.4, 6.8, 7.2, 7.6, 8, 8.4, 8.8].map(n=>{\n return d3Color.hsl(`hsl(${hsl.h||0}, ${10}%, ${n*10}%)`).hex()\n })\n let div= html`\n

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

')}\n

${JSON.stringify(colors, null, 2)}

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

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

')}\n

${JSON.stringify(list, null, 2)}

\n`\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"vhtml=require('vhtml')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"htm = require(\"htm@1\").then(d=>d.bind(vhtml))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"d3Color=require('d3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"hex = culori.formatHex","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"culori=require('culori')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"