29:null 2a:["$","title",null,{"children":"oklch interpolation (HSL constrained) | pete-murphy | Observable"}] 2f:[] 2d:{"id":"0acd8e237b2c49e7","slug":null,"title":"oklch interpolation (HSL constrained)","thumbnail":"eafa64fbbae035b91001fcf29fa0d02e2d75e9ac5f3c3e83c4163ea68cd8dbd8","access_level":"public","create_time":"$D2024-01-15T01:55:31.691Z","update_time":"$D2024-01-15T03:54:07.028Z","view_time":null,"first_public_time":"$D2024-01-15T01:55:31.691Z","fork":{"id":"20c6bfb9965dd521","slug":null,"title":"oklch interpolation","owner":{"id":"f92066a3b1a70d83","login":"pete-murphy","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"f92066a3b1a70d83","login":"pete-murphy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5bea948930b4b9acd6298189d2374748a5887552927c735743e0cfc01823efac","tier":"starter_2024"},"version":297,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"149f7383039bea73","login":"pete-murphy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5bea948930b4b9acd6298189d2374748a5887552927c735743e0cfc01823efac","tier":null}],"members":[{"type":"individual","id":"149f7383039bea73","login":"pete-murphy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5bea948930b4b9acd6298189d2374748a5887552927c735743e0cfc01823efac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"oklch interpolation (HSL constrained)","cells":[{"id":0,"value":"# `oklch` interpolation (HSL constrained)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"viewof hue = Inputs.range([0, 360], { value: 236, label: \"Hue\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Plot.plot({\n marks: [\n Plot.cell(xs, {\n x: (x, i) => i,\n y: \"OKLCH\",\n fill: (x) => `oklch(${x * 100}% ${f(x)} ${hue})`,\n inset: -3,\n insetBottom: -10,\n insetTop: -10\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"Plot.plot({\n marks: [\n Plot.cell(hslColors, {\n x: (x, i) => i,\n y: (_) => \"HSL\",\n fill: (x) => x,\n inset: -3,\n insetBottom: -10,\n insetTop: -10\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof a = Inputs.range([0.5, 1.1], { value: 0.91, label: \"a\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof b = Inputs.range([0.3, 0.8], { value: 0.46, label: \"b\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof c = Inputs.range([0.0, 0.8], { value: 0.16, label: \"c\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof d = Inputs.range([0.0, 1.8], { value: 1.06, label: \"d\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof e = Inputs.range([-1.0, 1.0], { value: 0.03, label: \"e\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof k = Inputs.range([-1.0, 1.0], { value: 0.0, label: \"k\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof xa = Inputs.range([-0.5, 0.5], { value: 0.11, label: \"xa\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof xb = Inputs.range([-0.2, 0.2], {\n value: 0.0126,\n label: \"xb\",\n step: 0.0001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof xc = Inputs.range([-2, 2], { value: 0, label: \"xc\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Plot.plot({\n marks: [\n // Plot.dot(handOptimized, { x: \"l\", y: \"c\" }),\n Plot.line(handOptimized, {\n x: \"l\",\n y: \"c\",\n curve: \"catmull-rom\",\n stroke: \"tomato\",\n marker: true\n }),\n Plot.line(xs, {\n x: (x) => x,\n y: f,\n curve: \"catmull-rom\",\n stroke: \"dodgerblue\",\n marker: true\n }),\n Plot.dot([navy], {\n x: \"l\",\n y: \"c\",\n fill: \"tomato\",\n r: 5\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"

${\n  JSON.stringify(Object.fromEntries(mkColors(\"var(--hue)\", \"<alpha-value>\").map((oklch,i,xs) => [xs.length - i, oklch])), null, 2)\n}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"$${mkColors(hue).map(\n (color,i,colors) => `

navy-${colors.length-i}

${color}

`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"{\n const colors = mkColors(hue);\n console.log({ colors });\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$${hslColors.map(\n (color,i,colors) => `

navy-${colors.length-i}

${color}

`\n)}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"hslColors = {\n const hslColors = mkColors(hue.toString()).map((color) => {\n const c = new Color(color);\n const hex = c.to(\"hsl\").toString({ format: \"hsla\", commas: true });\n return hex.replace(\"hsla\", \"hsl\");\n });\n console.log({ hslColors });\n return hslColors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Color = {\n let mc = await import(\"https://colorjs.io/dist/color.js\");\n let MC = mc.default;\n return MC;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"f = (x) => -(Math.pow(a * x - b, 2.0) * d) + c + e * x + k","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"mkXs = (n, offset) =>\n Array(n)\n .fill(null)\n .map((_, i) => (i + 1) / n + offset(i))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"mkColors = (hueString, alphaString) =>\n xs.map(\n (x) =>\n `oklch(${(x * 100).toFixed(3)}% ${f(x).toFixed(3)} ${hueString}${\n alphaString != null ? \" / \" + alphaString : \"\"\n })`\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"xs = mkXs(12, (i) => xa - xb * i + xc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"handOptimized = [\n { l: 0.99, c: 0.03 },\n { l: 0.95, c: 0.06 },\n { l: 0.88, c: 0.12 },\n { l: 0.8, c: 0.14 },\n { l: 0.74, c: 0.16 },\n { l: 0.68, c: 0.19 },\n { l: 0.63, c: 0.2 },\n { l: 0.58, c: 0.21 },\n { l: 0.53, c: 0.2 },\n { l: 0.49, c: 0.19 },\n { l: 0.42, c: 0.17 },\n { l: 0.35, c: 0.15 },\n { l: 0.27, c: 0.12 },\n { l: 0.2, c: 0.09 },\n { l: 0.14, c: 0.07 },\n { l: 0.11, c: 0.05 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"navy = ({ l: 0.2539, c: 0.05450821849701843 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"