29:null 2a:["$","title",null,{"children":"Spectral & Mixbox colors | Mike Stringer | Observable"}] 2f:[] 2d:{"id":"85b01b85e2e24086","slug":"spectral-mixbox-colors","title":"Spectral & Mixbox colors","thumbnail":"94c5b94323de4cae3b5ee5b547be1f01fbfec411ebfa1160c786ac68973ec800","access_level":"public","create_time":"$D2023-04-20T23:23:54.909Z","update_time":"$D2023-09-20T05:25:29.068Z","view_time":null,"first_public_time":"$D2023-09-20T05:22:57.192Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":"starter_2024"},"version":2205,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null}],"members":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Spectral & Mixbox colors","cells":[{"id":0,"value":"# Spectral & Mixbox colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"viewof colors = Inputs.form({\n a: Inputs.color({\n label: \"Color A\",\n value: chroma(pigmentColors[\"Cadmium Yellow\"]).hex()\n }),\n b: Inputs.color({\n label: \"Color B\",\n value: chroma(pigmentColors[\"Cobalt Blue\"]).hex()\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"show(spectral.mix, Math.max(320, width / 2), 9, \"Spectral\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"show(\n (a, b, t) => mixbox.lerp(a, b, t).toString(),\n Math.max(320, width / 2),\n 9,\n \"Mixbox\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2064,"value":"viewof mode = Inputs.select(\n [\"RGB\", \"Lab\", \"LRGB\", \"OKLab\", \"OKLch\", \"Lch\", \"Hsl\"],\n {\n label: \"Color space\",\n value: \"RGB\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"{\n const f = (a, b, t) => chroma.mix(colors.a, colors.b, t, mode.toLowerCase());\n return show(f, Math.max(320, width / 2), 9, `${mode}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"show3(colors.b, colors2.c, colors.a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"viewof colors2 = Inputs.form({\n c: Inputs.color({\n label: \"Color C\",\n value: chroma(pigmentColors[\"Quinacridone Magenta\"]).hex()\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"{\n const padding = 10;\n const entries = Object.entries(pigmentColors);\n const n = entries.length;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"
\n\n-----\n## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"spectral = import(\"https://cdn.skypack.dev/spectral.js@2.0.2?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"mixbox = require(\"mixbox@2.0.0/mixbox.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function mixboxLerpMulti(colors, parts) {\n const zList = colors.map((d) => mixbox.rgbToLatent(d));\n const zMix = new Array(mixbox.LATENT_SIZE);\n const sum = (d) => d.reduce((a, b) => a + b, 0);\n const total = sum(parts);\n const fList = parts.map((d) => d / total);\n for (var i = 0; i < zMix.length; i++) {\n zMix[i] = sum(\n zList.map(function (z, j) {\n const f = fList[j];\n return f * z[i];\n })\n );\n }\n return mixbox.latentToRgb(zMix).toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"import { ternary } from \"@fil/ternary-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"chroma = require(\"chroma-js@2.4.2/chroma.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function show(mixFunction, width, n = 9, label = \"\") {\n const fontSize = 15;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"function show3(a, b, c) {\n const w = 320;\n const n = 11;\n const data = [];\n for (let i = 0; i < n; i++) {\n for (let j = 0; j < n; j++) {\n let x = i / (n - 1);\n let y = j / (n - 1);\n let z = 1 - x - y;\n console.log(x, y, z);\n if (x + y <= 1) {\n data.push({\n x: x,\n y: y,\n fill: mixboxLerpMulti([a, b, c], [x, y, z])\n });\n }\n }\n }\n return Plot.plot({\n width: w,\n height: (w / 2) * Math.sqrt(3),\n projection: { type: ternary.projection, inset: 1 },\n margin: w / n,\n marks: [\n Plot.sphere(),\n ternary.graticule(),\n Plot.dot(data, {\n x: (d) => d.x,\n y: (d) => d.y,\n fill: (d) => d.fill,\n symbol: \"hexagon\",\n r: w / (n + 1) / 2\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"// from https://github.com/scrtwpns/mixbox/blob/master/javascript/mixbox.js\npigmentColors = ({\n \"Cadmium Yellow\": \"rgb(254, 236, 0)\",\n \"Hansa Yellow\": \"rgb(252, 211, 0)\",\n \"Cadmium Orange\": \"rgb(255, 105, 0)\",\n \"Cadmium Red\": \"rgb(255, 39, 2)\",\n \"Quinacridone Magenta\": \"rgb(128, 2, 46)\",\n \"Cobalt Violet\": \"rgb(78, 0, 66)\",\n \"Ultramarine Blue\": \"rgb(25, 0, 89)\",\n \"Cobalt Blue\": \"rgb(0, 33, 133)\",\n \"Phthalo Blue\": \"rgb(13, 27, 68)\",\n \"Phthalo Green\": \"rgb(0, 60, 50)\",\n \"Permanent Green\": \"rgb(7, 109, 22)\",\n \"Sap Green\": \"rgb(107, 148, 4)\",\n \"Burnt Sienna\": \"rgb(123, 72, 0)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"