31:[] 2f:{"title":"ColorJS Notebook","cells":[{"id":4,"value":"md`\n# ColorJS Notebook\n##### Blue to white gradient comparisons\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"This demo is to showcase `okLCH` as a space with corrections in one of LCH's problem areas.\n\n- `sRGB`, `p3` and `rec2020` fades to indigo\n- `HSL` enters the no saturation dead zone\n- `HSV` fades into magenta\n- `LCH` fades to purple\n- `okLCH` stays in hue ⭐️","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(\"white\")\n\n let spaces = ['srgb', 'rec2020', 'p3', 'hsl', 'hsv', 'lch', 'oklch']\n let mix = null\n let rows = ''\n\n for (let space of spaces) {\n mix = color1.steps(color2, {\n space,\n outputSpace: \"srgb\",\n steps: 10,\n })\n\n rows += `

${space.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`