28:null 29:["$","title",null,{"children":"Algorithmic Color (v1) | Alan Kang | Observable"}] 2e:[] 2c:{"id":"f6f3b7d379355d4b","slug":null,"title":"Algorithmic Color (v1)","thumbnail":"dd5010730d40679c84e9d34ad852d7c6b02b4d55aa5995595a58ac6e28591ae0","access_level":"public","create_time":"$D2023-09-07T08:26:52.363Z","update_time":"$D2023-09-11T11:26:20.601Z","view_time":null,"first_public_time":"$D2023-09-07T08:26:52.363Z","fork":false,"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":1023,"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Algorithmic Color (v1)","cells":[{"id":0,"value":"# Algorithmic Color (v1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"## Texts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":842,"value":"sample(fg, bg, bgSub, bgSup, brand, fg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"sample(fgDark, bgDark, bgSubDark, bgSupDark, brandDark, \"#000\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"## Brand and foreground color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"html`\n

\n Light (low-constrast)
\n ${chips([brandLow, fgLow], bg)}\n

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

\n Light (high-contrast)\n ${chips([brandHigh, fgHigh], bg)}\n

\n Dark (low-constrast)
\n ${chips([brandDarkLow, fgDarkLow], bgDark)}\n

\n Dark (normal)
\n ${chips([brandDark, fgDark], bgDark)}\n

\n Dark (high-contrast)\n ${chips([brandDarkHigh, fgDarkHigh], bgDark)}\n

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

\n Light (low-constrast)
\n ${chips(accentColorsLow, bg)}\n

\n Light (normal)
\n ${chips(accentColors, bg)}\n

\n Light (high-contrast)\n ${chips(accentColorsHigh, bg)}\n

\n Dark (low-constrast)
\n ${chips(accentColorsDarkLow, bgDark)}\n

\n Dark (normal)
\n ${chips(accentColorsDark, bgDark)}\n

\n Dark (high-contrast)\n ${chips(accentColorsDarkHigh, bgDark)}\n

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

\n Light (low-constrast)
\n ${chips(dimmedColors, bg)}\n

\n Light (normal)
\n ${chips(dimmedColors, bg)}\n

\n Light (high-contrast)\n ${chips(dimmedColors, bg)}\n

\n Dark (low-constrast)
\n ${chips(dimmedColorsDark, bgDark)}\n

\n Dark (normal)
\n ${chips(dimmedColorsDark, bgDark)}\n

\n Dark (high-contrast)\n ${chips(dimmedColorsDark, bgDark)}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":413,"value":"## Color variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":991,"value":"{\n const fg = \"#333333\"\n const bg = \"#fff9e4\"\n const brand = \"#ff8a00\"\n const accents = [\"#ff6d5a\", \"#61b619\", \"#4ca0ff\"]\n\n // derived colors\n const bgSup = adjTone(bg, 5)\n const bgSub = adjTone(bg, -5)\n const dimmeds = accents.map(c => adjTone(c, -10))\n \n return {\n fg, // foreground color, e.g. text\n bg, // background color\n bgSup, // background color (super)\n bgSub, // background color (sub)\n brand, // brand color\n accents, // accent colors\n dimmeds, // dimmed accent colors\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":766,"value":"fg = '#333333'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":769,"value":"fgLow = adjTone(fg, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"fgHigh = adjTone(fg, -20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"fgDark = \"#E1E1E1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":786,"value":"fgDarkLow = adjTone(fgDark, -10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"fgDarkHigh = adjTone(fgDark, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"brand = \"#ff8a00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"brandLow = adjTone(brand, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":727,"value":"brandHigh = adjTone(brand, -5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"brandDark = darkmode(brandHigh, bg, bgDark)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"brandDarkLow = adjTone(brandDark, -5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"brandDarkHigh = adjTone(brandDark, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"bg = \"#fff9e4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":899,"value":"bgSup = adjTone(bg, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"bgSub = adjTone(bg, -5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"bgDark = adjTone(\"#161a1f\", 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"bgSupDark = adjTone(bgDark, -10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"bgSubDark = adjTone(bgDark, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"accentColors = [adjTone(\"#d30004\", 20), adjTone(\"#54a800\", 5), adjTone(\"#168af1\", 8)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"accentColorsLow = accentColors.map(c => adjTone(c, 5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"accentColorsHigh = accentColors.map(c => adjTone(c, -5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"accentColorsDark = accentColors.map(c => darkmode(c, bg, bgDark))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"accentColorsDarkLow = accentColorsDark.map(c => adjTone(c, -15))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"accentColorsDarkHigh = accentColorsDark.map(c => adjTone(c, 5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"dimmedColors = [\"#f4bfdf\", adjTone(\"#befa3e\", -6), adjTone(\"#83b4ff\", 10)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"dimmedColorsDark = dimmedColors.map(c => darkmode(c, bg, bgDark))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"## Bolts and nuts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"chips = (colors, bg) => {\n const w = 360;\n const h = 80;\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"},{"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"},{"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"},{"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"},{"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"},{"id":825,"value":"function sample(fg, bg, bgSub, bgSup, brand, brandFg) {\n return html`

\n Hello\n

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