2e:null 2f:["$","title",null,{"children":"ColorJS Notebook | Adam Argyle | Observable"}] 34:[] 32:{"id":"0bf63dbe8feea4b7","slug":"colorjs-notebook-fade-to-white","title":"ColorJS Notebook","thumbnail":"a22f4d3ff196e688cb7505d4b7f4b02cc289e982d87dcd10a41ef5fddab37d51","access_level":"public","create_time":"$D2021-10-14T16:40:35.580Z","update_time":"$D2022-11-28T20:43:53.008Z","view_time":null,"first_public_time":"$D2021-10-14T18:01:24.314Z","has_unpublished_edits":null,"fork":{"id":"bd9dadac90294e22","slug":"css-demo-starter","title":"CSS Demo Starter","owner":{"id":"61ed3fa9c07b290c","login":"argyleink","name":"Adam Argyle"}},"stars":5,"starred":false,"owner":{"type":"team","id":"61ed3fa9c07b290c","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":"starter_2024"},"version":301,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null}],"members":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"ColorJS Notebook","cells":[{"id":4,"value":"md`\n# ColorJS Notebook\n##### Blue to white gradient comparisons\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n---\n\n### Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"Color = (await import('https://colorjs.io/dist/color.js')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`