2a:null 2b:["$","title",null,{"children":"Golden Tonal Palette Analysis | Máté Homolya | Observable"}] 30:T4f7,{ const el = Plot.plot({ x: { label: "shade →" }, y: { grid: true, domain: { tone: [0, 100] }[metric], label: "↑ " + metric }, marks: [ Plot.line( palette.map((p) => { const colorMetric = colorString(p.toString()); return { x: p.meta.shade, y: colorMetric[metric] }; }), { x: "x", y: "y" } ) ] }); const dMin = palette.reduce((min, p) => { const colorMetric = colorString(p.toString()); return Math.min(min, colorMetric[metric]); }, 9999); const dMax = palette.reduce((max, p) => { const colorMetric = colorString(p.toString()); return Math.max(max, colorMetric[metric]); }, -1); const inputColor = colorString(color); const allMetrics = metricMap[colorSpace]; const tuple = (t) => metricMap[colorSpace].map((m) => { const currentM = inputColor[m]; return metric === m ? interpolate(t) : inputColor[m]; }); const interpolate = (t) => dMin + (1 - t) * (dMax - dMin); return html`

${el}

${ramp( (t) => colorTuple(tuple(t)), 350 )}

`; }31:[] 2e:{"id":"3ce55cc7c07f9fc4","slug":"palette-analysis","title":"Golden Tonal Palette Analysis","thumbnail":"02411e81fee6c5b2351e5ef4d8a516de36d085d37de80d8bae4a264a29aeffaa","access_level":"public","create_time":"$D2022-02-22T02:51:50.536Z","update_time":"$D2022-06-21T21:41:01.460Z","view_time":null,"first_public_time":"$D2022-06-21T21:12:42.663Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":560,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"60705f57d300df25","slug":"colors","title":"Colors","owner":{"id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya"}},"type":"notebook","body":{"titling":"auto","title":"Golden Tonal Palette Analysis","cells":[{"id":0,"value":"# Golden Tonal Palette Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"> Follow up to [@mateh/palette](https://observablehq.com/@mateh/palette).\n\nAnalyze the golden tonal palette output in the HCT (Hue - Chroma - Tone) color space. The tone is a special value that represents perceived luminosity, where the color space is solved for visual contrast in user interfaces.\n\nSee https://material.io/blog/science-of-color-design\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"## Palette data in HCT space\n\nHere we can see a summary of all possible outputs of the palette algorithm in HCT space. This band represents what colors are appealing to the human eye by using data from user experience.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"viewof metric2 = Inputs.select(metricMap[\"HCT\"], {\n label: `Select metric (HCT)`,\n value: \"hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ \" + metric2\n },\n x: { label: \"shade →\" },\n marks: [\n Plot.ruleY([0]),\n Plot.line(\n paletteData\n .filter((x) => x)\n .concat(\n palette.map((p) => {\n const colorMetric = colorUtil.Hct.fromInt(p.toInt());\n return [\n p.meta.shade,\n colorMetric.hue,\n colorMetric.chroma,\n colorMetric.tone,\n -1\n ];\n })\n ),\n {\n x: \"0\",\n y: { hue: \"1\", chroma: \"2\", tone: \"3\" }[metric2],\n z: \"4\",\n sort: (d) => d[4] === -1,\n stroke: (d) => {\n const i = colorUtil.Hct.from(d[1], d[2], d[3]).toInt();\n const c = ColorRGB.fromInt(i).toTuple();\n return `rgba(${c[0]}, ${c[1]}, ${c[2]}, 1)`;\n }\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"## Specific color\n\nPick an input color, from which a golden palette is generated using [@mateh/palette](https://observablehq.com/@mateh/palette).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"// default is observablehq.com primary color: #596ab0\nviewof color = Inputs.color({\n label: \"Input color\",\n value: inputColor || \"#596ab0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"inputColor = {\n let c = new URLSearchParams(window.location.search).get(\"color\");\n if (c && !c.startsWith(\"#\")) c = \"#\" + c;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"SwatchInput(palette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"palette = generate(color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof colorSpace = Inputs.select([\"HCT\", \"HCL\", \"RGB\", \"LAB\"], {\n label: \"Select color space\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof metric = Inputs.select(metricMap[colorSpace], {\n label: `Select metric (${colorSpace})`,\n value: \"tone\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"metricMap = ({\n HCT: [\"hue\", \"chroma\", \"tone\"],\n HCL: [\"H\", \"C\", \"L\"],\n RGB: [\"R\", \"G\", \"B\"],\n LAB: [\"L\", \"A\", \"B\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"colorString = (hex) => {\n if (colorSpace === \"HCT\") {\n return colorUtil.Hct.fromInt(hexToInt(hex));\n }\n if (colorSpace === \"RGB\") {\n return ColorRGB.fromString(hex);\n }\n if (colorSpace === \"LAB\") {\n return ColorRGB.fromString(hex).toLAB();\n }\n if (colorSpace === \"HCL\") {\n return ColorRGB.fromString(hex).toLAB().toHCL();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"colorTuple = (t) => {\n if (colorSpace === \"HCT\") {\n return intToHex(colorUtil.Hct.from(t[0], t[1], t[2]).toInt());\n }\n if (colorSpace === \"RGB\") {\n return new ColorRGB(t[0], t[1], t[2]).toString();\n }\n if (colorSpace === \"LAB\") {\n return d3.lab(t[0], t[1], t[2]).toString();\n }\n if (colorSpace === \"HCL\") {\n return d3.hcl(t[0], t[1], t[2]).toString();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"palette.map((p) => {\n const colorMetric = colorString(p.toString());\n return {\n x: p.meta.shade,\n y: colorMetric[metric]\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function ramp(color, n = 100) {\n const w = 40;\n const canvas = DOM.canvas(w, n);\n const context = canvas.getContext(\"2d\");\n // canvas.style.margin = \"-14px 0\";\n canvas.style.width = \"40px\";\n // canvas.style.imageRendering = \"-moz-crisp-edges\";\n // canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(0, i, w, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"import { generate, ColorRGB, ColorHCL, ColorLAB } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function themeFromSourceColor(source, customColors = []) {\n const palette = colorUtil.CorePalette.of(source);\n return {\n source,\n schemes: {\n light: colorUtil.Scheme.light(source),\n dark: colorUtil.Scheme.dark(source)\n },\n palettes: {\n primary: palette.a1,\n secondary: palette.a2,\n tertiary: palette.a3,\n neutral: palette.n1,\n neutralVariant: palette.n2,\n error: palette.error\n },\n customColors: customColors.map((c) => customColor(source, c))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function customColor(source, color) {\n let value = color.value;\n const from = value;\n const to = source;\n if (color.blend) {\n value = colorUtil.Blend.harmonize(from, to);\n }\n const palette = colorUtil.CorePalette.of(value);\n const tones = palette.a1;\n return {\n color,\n value,\n light: {\n color: tones.tone(40),\n onColor: tones.tone(100),\n colorContainer: tones.tone(90),\n onColorContainer: tones.tone(10)\n },\n dark: {\n color: tones.tone(80),\n onColor: tones.tone(20),\n colorContainer: tones.tone(30),\n onColorContainer: tones.tone(90)\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function hexToInt(hex) {\n const r = parseInt(hex.substring(1, 3), 16);\n const g = parseInt(hex.substring(3, 5), 16);\n const b = parseInt(hex.substring(5, 7), 16);\n const opaqueBlack = 0xff000000;\n return opaqueBlack | (r << 16) | (g << 8) | b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function intToHex(colorInt) {\n return \"#\" + (\"000000\" + colorInt.toString(16)).slice(-6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"colorUtil = import(\"https://cdn.skypack.dev/@material/material-color-utilities\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import { SwatchInput } from \"@mateh/swatch-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"isWhiteText = (color) => {\n return contrast(color, \"white\") > contrast(color, \"black\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import { contrast } from \"@mbostock/wcag-contrast-ratio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"function highlight(d) {\n return d[4] === -1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"function generateData() {\n const maxP = Math.pow(256, 3);\n const limit = 2000;\n const div = maxP / (limit - 1);\n let data = [];\n for (let i = 0; i < limit; i++) {\n let P = Math.floor(div * i);\n const pal = generate(ColorRGB.fromInt(P).toString());\n let shades = [];\n pal.forEach((c) => {\n const hct = colorUtil.Hct.fromInt(c.toInt());\n shades.push([c.meta.shade, hct.hue, hct.chroma, hct.tone, i]);\n });\n // if the hue switches to the other side\n let switched = false;\n for (let j = 0; j < shades.length - 1; j++) {\n const s = shades[j];\n const next = shades[j + 1];\n const diffHue = Math.abs(next[1] - s[1]);\n if (diffHue > 180) {\n switched = true;\n break;\n }\n }\n if (!switched) {\n data.push(...shades);\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"paletteData = generateData()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"