27:null 28:["$","title",null,{"children":"Algorithmic Color (v2) | Alan Kang | Observable"}] 2d:T52b,function makeColors(fg, bg, brand, accents) { const dir = r2h(fg).tone - r2h(bg).tone < 0 ? 1 : -1.1 const normal = { fg, bg, brand, accents, accentsSup: accents.map(c => adjTone(c, -15 * dir)), accentsSub: accents.map(c => adjTone(adjChroma(c, -10), 20 * dir)), accentsSubX: accents.map(c => adjTone(adjChroma(c, -10), 30 * dir)), } const high = { ...normal, fg: adjTone(normal.fg, -10 * dir), bg: adjChroma(normal.bg, -5), brand: adjChroma(adjTone(normal.brand, -2 * dir), 2), accents: normal.accents.map(c => adjTone(adjChroma(c, 10), -5 * dir)), } const low = { ...normal, fg: adjTone(normal.fg, 10 * dir), bg: adjChroma(normal.bg, 5), brand: adjChroma(adjTone(normal.brand, 2 * dir), -2), accents: normal.accents.map(c => adjTone(adjChroma(c, -20), 10 * dir)), } function derive(cs) { return { ...cs, fgSub: adjTone(cs.fg, 25 * dir), fgSubX: adjTone(cs.fg, 35 * dir), brandFg: "#000000", brandSup: adjTone(cs.brand, -5 * dir), brandSub: adjTone(cs.brand, 5 * dir), brandSubX: adjTone(cs.brand, 15 * dir), bgSup: adjTone(cs.bg, 5 * dir), bgSub: adjTone(cs.bg, -5 * dir), } } return { normal: derive(normal), high: derive(high), low: derive(low), } }2e:T9a6,function sample(cs) { return html`

Hello

` }2f:[] 2b:{"id":"f726938b41141f6c","slug":null,"title":"Algorithmic Color (v2)","thumbnail":"28cde72e1e110f95d5b0faa79be6353aff81f999bb3ac9e585caceb563a111ed","access_level":"public","create_time":"$D2023-09-11T08:24:39.116Z","update_time":"$D2023-10-18T02:14:58.597Z","view_time":null,"first_public_time":"$D2023-09-11T08:24:39.116Z","has_unpublished_edits":null,"fork":{"id":"f6f3b7d379355d4b","slug":null,"title":"Algorithmic Color (v1)","owner":{"id":"d3839238eae2fb1b","login":"akngs","name":"Alan Kang"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d3839238eae2fb1b","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":"starter_2024"},"version":1566,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b68a5a7082b1642e","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":null}],"members":[{"type":"individual","id":"b68a5a7082b1642e","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Algorithmic Color (v2)","cells":[{"id":0,"value":"# Algorithmic Color (v2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1112,"value":"## Texts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"html`

\n ${sample(light.low)}\n ${sample(light.normal)}\n ${sample(light.high)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"html`

\n ${sample(dark.low)}\n ${sample(dark.normal)}\n ${sample(dark.high)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"## Brand and foreground color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"html`\n

\n Light (low)
\n ${chips([light.low.brandSub, light.low.brand, light.low.brandSup, light.low.fg], light.low.bg)}\n

\n Light (normal)
\n ${chips([light.normal.brandSub, light.normal.brand, light.normal.brandSup, light.normal.fg], light.normal.bg)}\n

\n Light (high)
\n ${chips([light.high.brandSub, light.high.brand, light.high.brandSup, light.high.fg], light.high.bg)}\n

\n Dark (low)
\n ${chips([dark.low.brandSub, dark.low.brand, dark.low.brandSup, dark.low.fg], dark.low.bg)}\n

\n Dark (normal)
\n ${chips([dark.normal.brandSub, dark.normal.brand, dark.normal.brandSup, dark.normal.fg], dark.normal.bg)}\n

\n Dark (high)
\n ${chips([dark.normal.brandSub, dark.high.brand, dark.normal.brandSup, dark.high.fg], dark.high.bg)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"## Accent colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"html`\n

\n Light (low)
\n ${chips(light.low.accents, light.low.bg)}\n

\n Light (normal)
\n ${chips(light.normal.accents, light.normal.bg)}\n

\n Light (high)
\n ${chips(light.high.accents, light.high.bg)}\n

\n Dark (low)
\n ${chips(dark.low.accents, dark.low.bg)}\n

\n Dark (normal)
\n ${chips(dark.normal.accents, dark.normal.bg)}\n

\n Dark (high)
\n ${chips(dark.high.accents, dark.high.bg)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"## Accent sub colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"

\n Light (low)
\n ${chips(light.low.accentsSub, light.low.bg)}\n

\n Light (normal)
\n ${chips(light.normal.accentsSub, light.normal.bg)}\n

\n Light (high)
\n ${chips(light.high.accentsSub, light.high.bg)}\n

\n Dark (low)
\n ${chips(dark.low.accentsSub, dark.low.bg)}\n

\n Dark (normal)
\n ${chips(dark.normal.accentsSub, dark.normal.bg)}\n

\n Dark (high)
\n ${chips(dark.high.accentsSub, dark.high.bg)}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1542,"value":"## Accent sub-x colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1544,"value":"

\n Light (low)
\n ${chips(light.low.accentsSubX, light.low.bg)}\n

\n Light (normal)
\n ${chips(light.normal.accentsSubX, light.normal.bg)}\n

\n Light (high)
\n ${chips(light.high.accentsSubX, light.high.bg)}\n

\n Dark (low)
\n ${chips(dark.low.accentsSubX, dark.low.bg)}\n

\n Dark (normal)
\n ${chips(dark.normal.accentsSubX, dark.normal.bg)}\n

\n Dark (high)
\n ${chips(dark.high.accentsSubX, dark.high.bg)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1115,"value":"## CSS Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1449,"value":"renderCss(light.normal, \"Light, Normal Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"renderCss(light.low, \"Light, Low Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"renderCss(light.high, \"Light, High Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"renderCss(dark.normal, \"Dark, Normal Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"renderCss(dark.low, \"Dark, Low Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"renderCss(dark.high, \"Dark, High Contrast\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"## Color variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1016,"value":"light = {\n const fg = \"#404040\"\n const bg = \"#fff9e4\"\n const brand = \"#ff8a00\"\n const accents = [\"#ff6d5a\", \"#61b619\", \"#4ca0ff\"]\n return makeColors(fg, bg, brand, accents)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"dark = {\n const fg = \"#E1E1E1\"\n const bg = \"#33373d\"\n const brand = \"#ff8a00\"\n const accents = [\"#fb6a57\", \"#52a500\", \"#4399f7\"]\n return makeColors(fg, bg, brand, accents)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"## Bolts and nuts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"chips = (colors, bg) => {\n const w = 300;\n const h = 100;\n const x = d3\n .scalePoint()\n .domain(d3.range(colors.length))\n .padding(0.6)\n .rangeRound([1, w - 1]);\n\n const root = d3.select(DOM.svg(w, h));\n root.append('rect')\n .attr('width', w)\n .attr('height', h)\n .attr('fill', bg ?? 'none')\n\n root\n .selectAll(\"circle\")\n .data(colors)\n .join(\"circle\")\n .style(\"cursor\", \"pointer\")\n .on(\"click\", async (e, d) => {\n await navigator.clipboard.writeText(d3.color(d).formatHex());\n })\n .attr(\"cx\", (d, i) => x(i))\n .attr(\"cy\", h * 0.5)\n .attr(\"r\", h * 0.25)\n .attr(\"fill\", (d) => d || \"none\")\n return root.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"function r2h(hex) {\n return new mcu.Hct(parseInt(hex.substring(1), 16))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"function h2r(hct) {\n return '#' + hct.argb.toString(16).substring(2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"function adjTone(rgb, delta) {\n const h = r2h(rgb)\n h.tone += delta\n return h2r(h)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"function adjChroma(rgb, delta) {\n const h = r2h(rgb)\n h.chroma += delta\n return h2r(h)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"function darkmode(target, bg, bgDark) {\n const targetH = r2h(target)\n const bgH = r2h(bg)\n const bgDarkH = r2h(bgDark)\n\n targetH.tone = bgDarkH.tone + (bgH.tone - targetH.tone)\n return h2r(targetH)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"function renderCss(cs, description) {\n return html`

\n  /* ${description} */\n  --c-fg: ${cs.fg};\n  --c-fg-sub: ${cs.fgSub};\n  --c-fg-sub-x: ${cs.fgSubX};\n  --c-bg: ${cs.bg};\n  --c-bg-sup: ${cs.bgSup};\n  --c-bg-sub: ${cs.bgSub};\n  --c-brand: ${cs.brand};\n  --c-brand-sup: ${cs.brandSup};\n  --c-brand-sub: ${cs.brandSub};\n  --c-brand-sub-x: ${cs.brandSubX};\n  --c-brand-fg: ${cs.brandFg};\n  --c-accent0: ${cs.accents[0]};\n  --c-accent1: ${cs.accents[1]};\n  --c-accent2: ${cs.accents[2]};\n  --c-accent0-sup: ${cs.accentsSup[0]};\n  --c-accent1-sup: ${cs.accentsSup[1]};\n  --c-accent2-sup: ${cs.accentsSup[2]};\n  --c-accent0-sub: ${cs.accentsSub[0]};\n  --c-accent1-sub: ${cs.accentsSub[1]};\n  --c-accent2-sub: ${cs.accentsSub[2]};\n  --c-accent0-sub-x: ${cs.accentsSubX[0]};\n  --c-accent1-sub-x: ${cs.accentsSubX[1]};\n  --c-accent2-sub-x: ${cs.accentsSubX[2]};\n

` \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"mcu = import('@material/material-color-utilities')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"