31:[] 2f:{"title":"Hue Interpolation","cells":[{"id":4,"value":"md`\n# Hue Interpolation\n##### Blue to Deeppink with ColorJS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"This demo is to showcase hue interpolation from CSS 4","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"GradientSteps = {\n let color1 = new Color(\"blue\")\n let color2 = new Color(\"deeppink\")\n\n let interpolations = ['shorter', 'longer', 'increasing', 'decreasing']\n let mix = null\n let rows = ''\n\n for (let hue of interpolations) {\n mix = color1.steps(color2, {\n hue,\n space: 'oklch',\n steps: 10,\n outputSpace: 'srgb',\n })\n \n rows += `

${hue.toUpperCase()}

`\n }\n\n document.querySelector('#gradient-examples').innerHTML = rows\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"collapsedCSS`\narticle {\n display: grid;\n grid-auto-rows: 6ch;\n gap: 1ch;\n}\n\n.gradient {\n --stops: gray, white;\n background: linear-gradient(to right, var(--stops));\n\n display: flex;\n place-items: center;\n color: white;\n padding-inline-start: 1.5ch;\n font-family: system-ui, sans-serif;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`\n---\n\n### Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"Color = (await import('https://colorjs.io/dist/color.js')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`