29:null 2a:["$","title",null,{"children":"Golden Tonal Palette Generation | Máté Homolya | Observable"}] 2f:T5b6,paletteImage = { // make it 64px x 64px const rootW = document.querySelector(".observablehq-root").clientWidth; const h = Math.min(64, rootW / 10); const w = h * palette.length; const canvas = DOM.canvas(w, h); const dppx = Math.ceil(window.devicePixelRatio); canvas.width = w * dppx; canvas.height = h * dppx; canvas.style.width = w + "px"; canvas.style.height = h + "px"; // get the context const ctx = canvas.getContext("2d"); // set the dppx ctx.scale(dppx, dppx); // draw the gradient const gradient = ctx.createLinearGradient(0, 0, w, 0); for (let i = 0; i < palette.length; i++) { gradient.addColorStop(i / (palette.length - 1), palette[i].toString()); } ctx.fillStyle = gradient; ctx.fillRect(0, 0, w, h / 2); // draw the palette for (let i = 0; i < palette.length; i++) { const x = i * h; ctx.fillStyle = palette[i].toString(); ctx.fillRect(x, h / 2, h, h / 2); // draw text ctx.fillStyle = isWhiteText(palette[i]) ? "white" : "black"; ctx.font = "12px system-ui, sans-serif"; // anchor text to the center of the square ctx.textAlign = "center"; ctx.textBaseline = "center"; if (palette[i].toString() === color.toLowerCase()) { const textWidth = ctx.measureText(palette[i].meta.shade).width; ctx.fillRect(x + h / 2 - textWidth / 2, h / 2 + 6, textWidth, 1); } ctx.fillText(palette[i].meta.shade, x + h / 2, h / 2 + 5); } return canvas; }30:T586,## Text legibility, color contrast, and accessibility The color palette is generated by reducing the lightness of the color. This is done by calculating the lightness of the source color and then adjusting the hue, chroma, and lightness to produce the resulting color palette with shades ranging from `50` to `900`. Contrast is calculated by calculating the difference between the lightness of the text color and the lightness of the background color. Text legibility is maintained with a sufficient contrast ratio of the text color and the background color. `WCAG 2.0 AA` is used to calculate the contrast ratio, which is `4.5:1` for small text and `3.0:1` for large text. ## Sources - [Adobe Color Contrast Analyzer](https://color.adobe.com/create/color-contrast-analyzer) - [WCAG 2.0 Contrast Ratio](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) - [Material Design Inline Color Tool](https://material.io/inline-tools/color/) - [Material Design Color Tool](https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=ffffff) - [uxdesign.cc/getting-the-wcag-color-contrast-right](https://uxdesign.cc/getting-the-wcag-color-contrast-right-799508389679) - [Tonal Palettes HCT - facelessuser.github.io](https://facelessuser.github.io/coloraide/colors/hct/#tonal-palettes) - [Color Fit API - facelessuser.github.io](https://facelessuser.github.io/coloraide/api/?h=color#fit)31:T61f,plotContrast = (palette, props) => { const tickFormat = props?.tickFormat || ((d) => ""); const res = 512; const data = new Array(res).fill(0).map((d, i) => i); return Plot.plot({ height: 320, width: res + 59, ...props, x: { // domain: palette.map(props?.x || ((p) => p.toString())) tickFormat: (d) => "" }, marks: [ Plot.areaY(data, { x: (d) => d, y: (d) => 21, z: 0, fill: (d) => { const t = d / res; const s = interpolateShades(palette, t); return s; } }), ...palette.map((p, i) => { return Plot.lineY(data, { x: (d) => d, y: (d) => { const t = d / res; const s = interpolateShades(palette, t); const con = contrast(s, p.toString()); return con; }, stroke: p.toString() }); }), Plot.lineY(data, { x: (d) => d, y: (d) => { const t = d / res; const s = interpolateShades(palette, t); const conW = contrast(s, "white"); const conB = contrast(s, "black"); return Math.max(conW, conB); }, stroke: (d) => { const t = d / res; const s = interpolateShades(palette, t); const conW = contrast(s, "white"); const conB = contrast(s, "black"); return conW > conB ? "white" : "black"; } }), Plot.ruleY([7, 4.5, 3], { stroke: "red" }), ...(props?.marks || []) ] }); }32:T46f,interpolateShades = (colorShades, factor) => { function mixColors(t, n, e, r, i) { const o = t * t; const a = o * t; return ( ((1 - 3 * t + 3 * o - a) * n + (4 - 6 * o + 3 * a) * e + (1 + 3 * t + 3 * o - 3 * a) * r + a * i) / 6 ); } function getColor(e) { const n = colorShades.length - 1; const r = Math.floor(Math.max(Math.min(e, 1), 0) * n); const [rr, gg, bb] = ["R", "G", "B"].map((component) => { function get(x) { let c = colorShades[x]; if (!c) return 0; return c[component] || 0; } for (let x = 0; x < n + 1; x++) { if (x == r) { const i = get(x); const o = get(x + 1); const a = r > 0 ? get(x - 1) : 2 * i - o; const u = r < n - 1 ? get(x + 2) || 0 : 2 * o - i; const fact = e * n - Math.floor(e * n); return mixColors(fact, a, i, o, u); } } return 0; }); return new ColorRGB( Math.min(1, rr), Math.min(1, gg), Math.min(1, bb) ).toString(); } return getColor(1 - Math.max(0.001, factor)); }33:T86b,/** * Red, Green, Blue color model */ class ColorRGB extends Color { /** * Red */ /** * Green */ /** * Blue */ constructor(a, b, c, d = 1) { super(); d = undefined === d ? 1 : d; this.R = a; this.G = b; this.B = c; this.alpha = d; this.meta = {}; assertRange(a, 1, "red"); assertRange(b, 1, "green"); assertRange(c, 1, "blue"); assertRange(d, 1, "alpha"); } setMeta(m) { this.meta = m; } toLAB() { return rgb2lab(this); } equals(a) { return ( Math.abs(this.R - a.R) < O && Math.abs(this.G - a.G) < O && Math.abs(this.B - a.B) < O && Math.abs(this.alpha - a.alpha) < O ); } static fromString(s) { const m = s.match( /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i ); if (m) { const a = m[4] ? parseInt(m[4], 16) / 255 : 1; return new ColorRGB( parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255, a ); } return ColorRGB.black; } static fromInt(colorInt) { return ColorRGB.fromString( "#" + ("000000" + colorInt.toString(16)).slice(-6) ); } toInt() { const transparent = 0x00000000; function f(v) { return Math.floor(v * 255); } return ( transparent | (f(this.a) << 32) | (f(this.R) << 16) | (f(this.G) << 8) | f(this.B) ); } mix(other, t) { return new ColorRGB( this.R * (1 - t) + other.R * t, this.G * (1 - t) + other.G * t, this.B * (1 - t) + other.B * t, this.alpha * (1 - t) + other.alpha * t ); } toString() { return toHexColor(this); } toTuple() { return [ Math.round(255 * this.R), Math.round(255 * this.G), Math.round(255 * this.B) ]; } /** Euclidean distance in LAB color space (delta E) */ distance(other) { const lab = rgb2lab(this); const lab2 = rgb2lab(other); const dE = Math.sqrt( Math.pow(lab.L - lab2.L, 2) + Math.pow(lab.A - lab2.A, 2) + Math.pow(lab.B - lab2.B, 2) ); return dE; } }34:T1f7b,generate = { function getPalette(rgbaColor) { const labColor = rgb2lab(rgbaColor); const { palette, mainColorIndex } = generateTonalPalette(labColor); let mainLAB = palette[mainColorIndex], mainHCL = lab2hcl(palette[mainColorIndex]), currentHCL = lab2hcl(labColor), chromaThreshold = 30 > lab2hcl(palette[5]).C, dL = mainHCL.L - currentHCL.L, dC = mainHCL.C - currentHCL.C, dH = mainHCL.H - currentHCL.H, refL = lightnessTable[mainColorIndex], refC = chromaTable[mainColorIndex], A = 100; return palette.map(function (inputColor, i) { if (inputColor === mainLAB) return (A = Math.max(currentHCL.L - 1.7, 0)), rgbaColor; const colorHCL = lab2hcl(inputColor); let newL = colorHCL.L - (lightnessTable[i] / refL) * dL; newL = Math.min(newL, A); const color = new ColorHCL( (colorHCL.H - dH + 360) % 360, Math.max( 0, chromaThreshold ? colorHCL.C - dC : colorHCL.C - dC * Math.min(chromaTable[i] / refC, 1.25) ), clipRange(newL, 0, 100) ); A = Math.max(color.L - 1.7, 0); const hue = (color.H * Math.PI) / 180; const outputColor = new ColorLAB( color.L, color.C * Math.cos(hue), color.C * Math.sin(hue), color.alpha ); let diffL = (color.L + 16) / 116; function getRatio(a) { let b = 6 / 29, c = 3 * Math.pow(b, 2); return a > b ? Math.pow(a, 3) : c * (a - 4 / 29); } const scalar = 0.95047 * getRatio(diffL + outputColor.A / 500); newL = 1 * getRatio(diffL); diffL = 1.08883 * getRatio(diffL - outputColor.B / 200); function transform(a) { return 0.0031308 >= a ? 12.92 * a : 1.055 * Math.pow(a, 1 / 2.4) - 0.055; } return new ColorRGB( clipRange( transform( 3.2404542 * scalar + -1.5371385 * newL + -0.4985314 * diffL ), 0, 1 ), clipRange( transform(-0.969266 * scalar + 1.8760108 * newL + 0.041556 * diffL), 0, 1 ), clipRange( transform(0.0556434 * scalar + -0.2040259 * newL + 1.0572252 * diffL), 0, 1 ), color.alpha ); }); } function generateTonalPalette(color) { if (!goldenPalettes.length || !goldenPalettes[0].length) throw Error("Invalid golden palettes"); let palette = goldenPalettes[0]; let mainColorIndex = -1; for (let c = Infinity, f = 0; f < goldenPalettes.length; f++) { for (let h = 0; h < goldenPalettes[f].length && 0 < c; h++) { let colorCurrent = goldenPalettes[f][h], avgL = (colorCurrent.L + color.L) / 2, currentLabDist = Math.sqrt( Math.pow(colorCurrent.A, 2) + Math.pow(colorCurrent.B, 2) ), targetLabDist = Math.sqrt( Math.pow(color.A, 2) + Math.pow(color.B, 2) ), labDist = (currentLabDist + targetLabDist) / 2; labDist = 0.5 * (1 - Math.sqrt( Math.pow(labDist, 7) / (Math.pow(labDist, 7) + Math.pow(25, 7)) )); let currentRefA = colorCurrent.A * (1 + labDist), targetRefA = color.A * (1 + labDist), currentRefDist = Math.sqrt( Math.pow(currentRefA, 2) + Math.pow(colorCurrent.B, 2) ), targetRefDist = Math.sqrt( Math.pow(targetRefA, 2) + Math.pow(color.B, 2) ); labDist = targetRefDist - currentRefDist; let refDist = (currentRefDist + targetRefDist) / 2; function transform(a, b) { if (1e-4 > Math.abs(a) && 1e-4 > Math.abs(b)) return 0; a = (180 * Math.atan2(a, b)) / Math.PI; return 0 <= a ? a : a + 360; } currentRefA = transform(colorCurrent.B, currentRefA); targetRefA = transform(color.B, targetRefA); currentRefDist = 2 * Math.sqrt(currentRefDist * targetRefDist) * Math.sin( (((1e-4 > Math.abs(currentLabDist) || 1e-4 > Math.abs(targetLabDist) ? 0 : 180 >= Math.abs(targetRefA - currentRefA) ? targetRefA - currentRefA : targetRefA <= currentRefA ? targetRefA - currentRefA + 360 : targetRefA - currentRefA - 360) / 2) * Math.PI) / 180 ); currentLabDist = 1e-4 > Math.abs(currentLabDist) || 1e-4 > Math.abs(targetLabDist) ? 0 : 180 >= Math.abs(targetRefA - currentRefA) ? (currentRefA + targetRefA) / 2 : 360 > currentRefA + targetRefA ? (currentRefA + targetRefA + 360) / 2 : (currentRefA + targetRefA - 360) / 2; targetLabDist = 1 + 0.045 * refDist; targetRefDist = 1 + 0.015 * refDist * (1 - 0.17 * Math.cos(((currentLabDist - 30) * Math.PI) / 180) + 0.24 * Math.cos((2 * currentLabDist * Math.PI) / 180) + 0.32 * Math.cos(((3 * currentLabDist + 6) * Math.PI) / 180) - 0.2 * Math.cos(((4 * currentLabDist - 63) * Math.PI) / 180)); const result = Math.sqrt( Math.pow( (color.L - colorCurrent.L) / (1 + (0.015 * Math.pow(avgL - 50, 2)) / Math.sqrt(20 + Math.pow(avgL - 50, 2))), 2 ) + Math.pow(labDist / (1 * targetLabDist), 2) + Math.pow(currentRefDist / (1 * targetRefDist), 2) + (labDist / (1 * targetLabDist)) * Math.sqrt( Math.pow(refDist, 7) / (Math.pow(refDist, 7) + Math.pow(25, 7)) ) * Math.sin( (60 * Math.exp(-Math.pow((currentLabDist - 275) / 25, 2)) * Math.PI) / 180 ) * -2 * (currentRefDist / (1 * targetRefDist)) ); result < c && ((c = result), (palette = goldenPalettes[f]), (mainColorIndex = h)); } } return { palette, mainColorIndex }; } function parseHexColor(hex) { if (!/^#[a-fA-F0-9]{3,8}$/.test(hex)) throw Error("Invalid hex color string: " + hex); hex = hex.substr(1); let arr; if (3 === hex.length || 4 === hex.length) arr = /^(.)(.)(.)(.)?$/ .exec(hex) ?.slice(1, 5) .map(function (e) { return e ? e + e : "ff"; }); else if (6 === hex.length || 8 === hex.length) (arr = /^(..)(..)(..)(..)?$/.exec(hex)?.slice(1, 5)), undefined === arr[3] && (arr[3] = "ff"); else throw Error("Invalid hex color string: " + hex); const r = parseHexString(arr[0]) / 255; const g = parseHexString(arr[1]) / 255; const b = parseHexString(arr[2]) / 255; const a = parseHexString(arr[3]) / 255; return new ColorRGB(r, g, b, a); } function parseHexString(a) { if (!/^[a-fA-F0-9]+$/.test(a)) throw Error("Invalid hex string: " + a); return parseInt(a, 16); } function clipRange(a, b, c) { return Math.min(Math.max(a, b), c); } /** * Generates a palette for any color input. * Hue, chroma, and lightness are adjusted by an algorithm that creates palettes that are usable and aesthetically pleasing. * The shades include lighter and darker options to separate surfaces and provide colors that meet accessibility standards. * * @param hex Input color in hex #aabbcc * @returns Pallette shades */ function generate(hex) { const inputColorRgba = parseHexColor(hex); const palette = getPalette(inputColorRgba); const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; return palette.map((color, i) => { color.setMeta({ shade: shades[i] }); return color; }); } return generate; }35:[{"id":"2071586d274a9201bcec4625100576564f31f08e9ead5c713b1f451dd3f6270730a327c7b6203a57841abcbab5b3ab10520e451388d219efc5e86310e7dde09b","href":"https://static.observableusercontent.com/files/2071586d274a9201bcec4625100576564f31f08e9ead5c713b1f451dd3f6270730a327c7b6203a57841abcbab5b3ab10520e451388d219efc5e86310e7dde09b","name":"golden-palette.json","type":"application/json","lastModified":1634495463962.641,"size":12506}] 2d:{"id":"3bb03484e9da1078","slug":"palette","title":"Golden Tonal Palette Generation","thumbnail":"816fd387d1785239b7dc3faa0bb9130b96e2f22fd69ede175ab23e7af6953907","access_level":"public","create_time":"$D2021-10-17T18:07:03.718Z","update_time":"$D2024-01-30T07:25:08.793Z","view_time":null,"first_public_time":"$D2021-10-17T19:15:49.316Z","has_unpublished_edits":null,"fork":false,"stars":8,"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":909,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"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 Generation","cells":[{"id":0,"value":"# Golden Tonal Palette Generation\n\nA color palette is a set of colors that are used to represent a specific range of values. The method described below is a way to generate a palette from a set of colors by changing the luminosity of the source color.\n\n## Palette generation and usage\n\nA color palette can be generated from a given input color. The color picker generates a palette for any color input. Hue, chroma, and lightness are adjusted by an algorithm that creates palettes that are usable and aesthetically pleasing. The shades include lighter and darker options to separate surfaces and provide colors that meet accessibility standards.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"// default is observablehq.com primary color: #596ab0\nviewof color = Inputs.color({\n label: \"Input color\",\n value: inputColor || \"#0f1432\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"paletteSwatches(palette, color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"## WCAG Contrast analysis\n\nThe plot below show the Contrast analysis of the color palette. Contrast is measured against pure black and pure white. The red lines are the following WCAG contrast levels.\n\n- 7.0:1 — **A**\n- 4.5:1 — **AA**\n- 3.0:1 — **AAA**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"plotContrast(palette)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"html`Download image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"> See next part for Golden Palette Analysis at [@mateh/palette-analysis](https://observablehq.com/@mateh/palette-analysis).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":361,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"colors = palette.map((s) => s.toString())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"palette.reduce((a, c) => a + `--red-${c.meta.shade}: ${c.toString()};\\n`, \"\\n\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"palette.reduce((a, c) => a + `${c.meta.shade}: \"${c.toString()}\",\\n`, \"\\n\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"'[\"' + palette.map((m) => m.toString()).join('\",\\n\"') + '\"]'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"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":251,"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":247,"value":"import { contrast } from \"@mbostock/wcag-contrast-ratio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"## Using the palette generator\n\nTo use the `generate` function in other notebooks on Observable, use this piece of code to import it:\n\n```js\nimport { generate, paletteSwatches } from \"@mateh/palette\"\n\npalette = generate(\"#596ab0\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"palette = generate(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"This function will generate a palette with the corresponding tone value (100 - 900)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"paletteSwatches = (palette, inputColor = \"\") => {\n return html`

\n${palette.map((p) => {\n let current = inputColor.toLowerCase() === p.toString().toLowerCase();\n return html`

${p.meta.shade}

`;\n})}\n

\n${colors.map((p) => {\n return html`

`;\n})}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## Color interpolation functions\n\nIn order to interpolate smoothly between the shades, this notebook exports the following functions for convenience.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"Contrast analysis plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"ramp((t) => interpolateShades(palette, t))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"ramp((t) => interpolateShadesD3(palette, t))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"interpolateShadesD3 = (colorShades, factor) => {\n const shadeCount = colorShades.length - 1;\n // left id is the index of the color at\n const factorInv = 1 - factor;\n if (factorInv === 1) return colorShades[shadeCount];\n const leftIdx = Math.floor(factorInv * shadeCount);\n const rightIdx = leftIdx + 1;\n const leftShade = colorShades[leftIdx].toString();\n const rightShade = colorShades[rightIdx].toString();\n const t =\n (factorInv - leftIdx / shadeCount) /\n (rightIdx / shadeCount - leftIdx / shadeCount);\n return d3.interpolateLab(leftShade, rightShade)(t);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Appendix\n\nThe code below was reverse-engineered from Google's tonal palette generator at:\n[https://material.io/inline-tools/color/](https://material.io/inline-tools/color/) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"Magic values for this script include the Material Design Golden palettes defined in the LAB color model, as well as a lightness and a chrome lookup table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"goldenPalettes = FileAttachment(\"golden-palette.json\").json().then(a => a.map(el => el.map(inEl => new ColorLAB(...inEl))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"lightnessTable = [\n 2.048875457, 5.124792061, 8.751659557, 12.07628774, 13.91449542, 15.92738893,\n 15.46585818, 15.09779227, 15.13738673, 15.09818372,\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"Plot.plot({\n y: { grid: true },\n marks: [Plot.lineY(lightnessTable)]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chromaTable = [\n 1.762442714, 4.213532634, 7.395827458, 11.07174158, 13.89634504, 16.37591477,\n 16.27071136, 16.54160806, 17.35916727, 19.88410864,\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"Plot.plot({\n y: { grid: true },\n marks: [Plot.lineY(chromaTable)]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// precision\nO = Math.pow(2, -16);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"assertRange = (a, b, c) => {\n if (isNaN(a) || 0 > a || a > b)\n throw new RangeError(a + \" for \" + c + \" is not between 0 and \" + b);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function toHexColor(a) {\n const b = 1 > a.alpha ? toHexString(Math.round(255 * a.alpha)) : \"\";\n return (\n \"#\" +\n (\n toHexString(Math.round(255 * a.R)) +\n toHexString(Math.round(255 * a.G)) +\n toHexString(Math.round(255 * a.B)) +\n b\n ).toLowerCase()\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"function toHexString(a) {\n const b = a.toString(16);\n return 2 <= b.length ? b : \"0\" + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"class Color {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"/**\n * CIELAB, CIE-L*ab, L*a*b color model\n */\nclass ColorLAB extends Color {\n constructor(L, A, B, alpha = 1) {\n super();\n alpha = undefined === alpha ? 1 : alpha;\n this.L = L; // lightness\n this.A = A; // A Green ↔ Red\n this.B = B; // B Blue ↔ Yellow\n this.alpha = alpha;\n assertRange(L, Number.MAX_VALUE, \"lightness\");\n assertRange(alpha, 1, \"alpha\");\n }\n\n toHCL() {\n return new ColorHCL(\n ((180 * Math.atan2(this.B, this.A)) / Math.PI + 360) % 360,\n Math.sqrt(Math.pow(this.A, 2) + Math.pow(this.B, 2)),\n this.L,\n this.alpha\n );\n }\n\n equals(a) {\n return (\n 1e-4 > Math.abs(this.L - a.L) &&\n 1e-4 > Math.abs(this.A - a.A) &&\n 1e-4 > Math.abs(this.B - a.B) &&\n Math.abs(this.alpha - a.alpha) < O\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function rgb2lab(a) {\n function transform(a) {\n return 0.04045 >= a ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4);\n }\n function getRatio(a) {\n let b = 6 / 29,\n c = 1 / (3 * Math.pow(b, 2));\n return a > Math.pow(b, 3) ? Math.pow(a, 1 / 3) : c * a + 4 / 29;\n }\n\n let b = transform(a.R),\n c = transform(a.G),\n d = transform(a.B),\n e = 0.2126729 * b + 0.7151522 * c + 0.072175 * d;\n return new ColorLAB(\n 116 * getRatio(e) - 16,\n 500 *\n (getRatio((0.4124564 * b + 0.3575761 * c + 0.1804375 * d) / 0.95047) -\n getRatio(e)),\n 200 *\n (getRatio(e) -\n getRatio((0.0193339 * b + 0.119192 * c + 0.9503041 * d) / 1.08883)),\n a.alpha\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"function lab2hcl(a) {\n return new ColorHCL(\n ((180 * Math.atan2(a.B, a.A)) / Math.PI + 360) % 360,\n Math.sqrt(Math.pow(a.A, 2) + Math.pow(a.B, 2)),\n a.L,\n a.alpha\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"/**\n * Hue, Chroma, Lightness color model\n */\nclass ColorHCL extends Color {\n /**\n * Lightness\n */\n /**\n * Chroma\n */\n /**\n * Hue\n */\n\n constructor(hue, chroma, lightness, alpha = 1) {\n super();\n alpha = undefined === alpha ? 1 : alpha;\n this.L = lightness; // lightness\n this.C = chroma; // chroma\n this.H = hue;\n this.alpha = alpha;\n assertRange(lightness, Number.MAX_VALUE, \"lightness\");\n assertRange(chroma, Number.MAX_VALUE, \"chroma\");\n assertRange(hue, 360, \"hue\");\n assertRange(alpha, 1, \"alpha\");\n }\n\n equals(a) {\n return (\n 1e-4 > Math.abs(this.L - a.L) &&\n 1e-4 > Math.abs(this.C - a.C) &&\n 1e-4 > Math.abs(this.H - a.H) &&\n Math.abs(this.alpha - a.alpha) < O\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 2e:"$2d:body"