31:[] 2f:{"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"},{"id":81,"value":"viewof a = color('#de6069')","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof b = color('#547cc4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"drawMode('rgb')","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"drawMode('lch')","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"drawMode('yiq')","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"drawMode('cubehelix')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":234,"value":"md`## HSL lightness gradients:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"hslGradient(a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"hslGradient(b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`### Grey-shades:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"greyShades(a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"greyShades(b)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":31,"value":"vhtml=require('vhtml')","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"htm = require(\"htm@1\").then(d=>d.bind(vhtml))","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"d3Color=require('d3-color')","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"hex = culori.formatHex","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"culori=require('culori')","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}