2d:null 2e:["$","title",null,{"children":"Color filter generator | Michiel Dral | Observable"}] 33:Ted9,class Color { constructor(r, g, b) { this.set(r, g, b); } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round( this.b )})`; } set(r, g, b) { this.r = this.clamp(r); this.g = this.clamp(g); this.b = this.clamp(b); } hueRotate(angle = 0) { angle = (angle / 180) * Math.PI; const sin = Math.sin(angle); const cos = Math.cos(angle); this.multiply([ 0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.14, 0.072 - cos * 0.072 - sin * 0.283, 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072 ]); } grayscale(value = 1) { this.multiply([ 0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value) ]); } sepia(value = 1) { this.multiply([ 0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value), 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value), 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value) ]); } saturate(value = 1) { this.multiply([ 0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value ]); } multiply(matrix) { const newR = this.clamp( this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2] ); const newG = this.clamp( this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5] ); const newB = this.clamp( this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8] ); this.r = newR; this.g = newG; this.b = newB; } brightness(value = 1) { this.linear(value); } contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); } linear(slope = 1, intercept = 0) { this.r = this.clamp(this.r * slope + intercept * 255); this.g = this.clamp(this.g * slope + intercept * 255); this.b = this.clamp(this.b * slope + intercept * 255); } invert(value = 1) { this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255); this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255); this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255); } hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA. const r = this.r / 255; const g = this.g / 255; const b = this.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 100, s: s * 100, l: l * 100 }; } clamp(value) { if (value > 255) { value = 255; } else if (value < 0) { value = 0; } return value; } }34:Td5e,class Solver { constructor(target, baseColor) { this.target = target; this.targetHSL = target.hsl(); this.reusedColor = new Color(0, 0, 0); } solve() { const result = this.solveNarrow(this.solveWide()); return { values: result.values, loss: result.loss, filter: this.css(result.values) }; } solveWide() { const A = 5; const c = 15; const a = [60, 180, 18000, 600, 1.2, 1.2]; let best = { loss: Infinity }; for (let i = 0; best.loss > 25 && i < 1000; i++) { const initial = [50, 20, 3750, 50, 100, 100]; const result = this.spsa(A, a, c, initial, 10000); if (result.loss < best.loss) { best = result; } } return best; } solveNarrow(wide) { const A = wide.loss; const c = 2; const A1 = A + 1; const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; return this.spsa(A, a, c, wide.values, 500); } spsa(A, a, c, values, iters) { const alpha = 1; const gamma = 0.16666666666666666; let best = null; let bestLoss = Infinity; const deltas = new Array(6); const highArgs = new Array(6); const lowArgs = new Array(6); for (let k = 0; k < iters; k++) { const ck = c / Math.pow(k + 1, gamma); for (let i = 0; i < 6; i++) { deltas[i] = Math.random() > 0.5 ? 1 : -1; highArgs[i] = values[i] + ck * deltas[i]; lowArgs[i] = values[i] - ck * deltas[i]; } const lossDiff = this.loss(highArgs) - this.loss(lowArgs); for (let i = 0; i < 6; i++) { const g = (lossDiff / (2 * ck)) * deltas[i]; const ak = a[i] / Math.pow(A + k + 1, alpha); values[i] = fix(values[i] - ak * g, i); } const loss = this.loss(values); if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; } } return { values: best, loss: bestLoss }; function fix(value, idx) { let max = 100; if (idx === 2 /* saturate */) { max = 7500; } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; } if (idx === 3 /* hue-rotate */) { if (value > max) { value %= max; } else if (value < 0) { value = max + (value % max); } } else if (value < 0) { value = 0; } else if (value > max) { value = max; } return value; } } loss(filters) { // Argument is array of percentages. const color = this.reusedColor; color.set(0, 0, 0); color.invert(filters[0] / 100); color.sepia(filters[1] / 100); color.saturate(filters[2] / 100); color.hueRotate(filters[3] * 3.6); color.brightness(filters[4] / 100); color.contrast(filters[5] / 100); const colorHSL = color.hsl(); return ( Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l) ); } css(filters) { function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); } return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt( 2 )}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt( 5 )}%);`; } }35:[] 31:{"id":"0d5bb67ea6b4726a","slug":"color-filter-generator","title":"Color filter generator","thumbnail":"ac4095928eda98d671980d983d074173d92d12885125293e5f40d049756af5ca","access_level":"public","create_time":"$D2022-06-28T15:55:20.213Z","update_time":"$D2025-03-19T03:52:29.998Z","view_time":null,"first_public_time":"$D2022-09-17T11:51:42.314Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":"starter_2024"},"version":698,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null}],"members":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Color filter generator","cells":[{"id":0,"value":"# Color filter generator\n\nA color-filter-solver that will continue looking for better answers as long as you keep the page open.\n\nThere seems to be something wrong in the original code, as it doesn't get me close to some colors (even though it says the loss is tiny).\n\nCredit goes to [https://codepen.io/sosuke/pen/Pjoqqp](https://codepen.io/sosuke/pen/Pjoqqp),\nwho in turn yields credit to MultiplyByZer0 for their post at [https://stackoverflow.com/a/43960991/604861](https://stackoverflow.com/a/43960991/604861).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"md`\nMaybe use [colorjs](https://colorjs.io/)?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof input_color = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"htl.html`\n

Original

New!

Huh?

\n\n

\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`\nresult css:
\n${result.filter}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"{\n if (result.loss < 1) {\n return md`This is a pretty much perfect result.`;\n } else if (result.loss < 5) {\n return md`The color is close enough.`;\n } else if (result.loss < 15) {\n return md`The color is somewhat off. Consider running it again.`;\n } else {\n return md`The color is extremely off. Run it again!`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n${result.loss.toFixed(3) + \"%\"} match\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"color_block = (color) => {\n return htl.html`

${color}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"box = (children) => {\n return htl.html`

${children}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"stupid_hue_rotate = (hue, color) => {\n let new_color = new Color(color.r, color.g, color.b);\n new_color.hueRotate(hue);\n return new_color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"hex_to_color = (hex) => {\n let rgb = hexToRgb(hex);\n return new Color(rgb[0], rgb[1], rgb[2]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"firefox_hue_rotate_matrix = (hue_degree) => {\n const lumR = 0.2126;\n const lumG = 0.7152;\n const lumB = 0.0722;\n\n const oneMinusLumR = 1 - lumR;\n const oneMinusLumG = 1 - lumG;\n const oneMinusLumB = 1 - lumB;\n\n const hueRotateR = 0.143;\n const hueRotateG = 0.14;\n const hueRotateB = 0.283;\n\n let matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];\n let c = Math.cos((hue_degree * Math.PI) / 180);\n let s = Math.sin((hue_degree * Math.PI) / 180);\n\n matrix[0] = lumR + oneMinusLumR * c - lumR * s;\n matrix[1] = lumG - lumG * c - lumG * s;\n matrix[2] = lumB - lumB * c + oneMinusLumB * s;\n\n matrix[5] = lumR - lumR * c + hueRotateR * s;\n matrix[6] = lumG + oneMinusLumG * c + hueRotateG * s;\n matrix[7] = lumB - lumB * c - hueRotateB * s;\n\n matrix[10] = lumR - lumR * c - oneMinusLumR * s;\n matrix[11] = lumG - lumG * c + lumG * s;\n matrix[12] = lumB + oneMinusLumB * c + lumB * s;\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"color_block(hex_to_color(input_color))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"hue = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"hue_rotate_box = (hue, child) => {\n return htl.html`

${child}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Colors = import(\"https://colorjs.io/dist/color.js\").then((x) => x.default)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"c = new Colors(input_color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"c.lch.h","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"new Colors(\"#000\").lch.h","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"hue_rotate_box(hue, color_block(hex_to_color(input_color)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"htl.html`\n

\n ${color_block(\n multiply_color(hex_to_color(input_color), firefox_hue_rotate_matrix(hue))\n )}\n ${color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))}\n ${color_block(\n multiply_color(hex_to_color(input_color), hue_rotate_color_chrome(hue))\n )}\n ${hue_rotate_box(hue, color_block(hex_to_color(input_color)))}\n ${color_block(hex_to_color(input_color))}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"identity = (x) => x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"hue_rotate_color_chrome(hue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"firefox_hue_rotate_matrix(hue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"multiply_color = (color, matrix) => {\n let new_color = new Color(color.r, color.g, color.b);\n\n const newR = clamp_bit(\n color.r * matrix[0] + color.g * matrix[1] + color.b * matrix[2] + matrix[5]\n );\n const newG = clamp_bit(\n color.r * matrix[5] + color.g * matrix[6] + color.b * matrix[7] + matrix[9]\n );\n const newB = clamp_bit(\n color.r * matrix[10] +\n color.g * matrix[11] +\n color.b * matrix[12] +\n matrix[14]\n );\n\n console.log(\"newR:\", newR);\n console.log(\"newG:\", newG);\n console.log(\"\");\n return new Color(newR, newG, newB);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"hue_rotate_color_chrome = (hue) => {\n let cosHue = Math.cos((hue * Math.PI) / 180);\n let sinHue = Math.sin((hue * Math.PI) / 180);\n\n let matrix = [];\n matrix[0] = 0.213 + cosHue * 0.787 - sinHue * 0.213;\n matrix[1] = 0.715 - cosHue * 0.715 - sinHue * 0.715;\n matrix[2] = 0.072 - cosHue * 0.072 + sinHue * 0.928;\n matrix[3] = matrix[4] = 0;\n matrix[5] = 0.213 - cosHue * 0.213 + sinHue * 0.143;\n matrix[6] = 0.715 + cosHue * 0.285 + sinHue * 0.14;\n matrix[7] = 0.072 - cosHue * 0.072 - sinHue * 0.283;\n matrix[8] = matrix[9] = 0;\n matrix[10] = 0.213 - cosHue * 0.213 - sinHue * 0.787;\n matrix[11] = 0.715 - cosHue * 0.715 + sinHue * 0.715;\n matrix[12] = 0.072 + cosHue * 0.928 + sinHue * 0.072;\n matrix[13] = matrix[14] = 0;\n matrix[15] = matrix[16] = matrix[17] = 0;\n matrix[18] = 1;\n matrix[19] = 0;\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"result","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// rgb = hexToRgb(input_color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"/// WTF!!! How does just using the p3 values here suddenly work??\n/// ...... I Guess Chrome is sneakily doing p3 somewhere?\nrgb = new Colors(input_color).p3.map((x) => x * 255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"result = {\n if (rgb == null || rgb.length !== 3) return null;\n\n const color = new Color(rgb[0], rgb[1], rgb[2]);\n const solver = new Solver(color);\n\n let last_result = solver.solve();\n yield last_result;\n while (true) {\n if (last_result.loss < 0.01) {\n break;\n }\n\n const result = solver.solve();\n if (result.loss < last_result.loss) {\n yield result;\n last_result = result;\n } else {\n await new Promise((yell) => setTimeout(yell, 10));\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"multiply_color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"clamp_bit = (value) => {\n if (value > 255) {\n value = 255;\n } else if (value < 0) {\n value = 0;\n }\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"color_to_rgb = (color) => {\n return `rgb(${color.r}, ${color.g}, ${color.b})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"filters_to_color = (filters) => {\n // Argument is array of percentages.\n const color = new Color();\n color.set(0, 0, 0);\n\n color.invert(filters[0] / 100);\n color.sepia(filters[1] / 100);\n color.saturate(filters[2] / 100);\n color.hueRotate(filters[3] * 3.6);\n color.brightness(filters[4] / 100);\n color.contrast(filters[5] / 100);\n\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, (m, r, g, b) => {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"