31:[] 2f:{"title":"Transparentize","cells":[{"id":0,"value":"# Transparentize","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"Make an opaque color transparent while looking (almost) identical on a given background. This won't work for all color combinations, similar colors allow for more transparency.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"viewof color = Inputs.text({ value: \"#5C5F78\", label: \"color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"viewof bg = Inputs.text({ value: \"#a0289d\", label: \"background\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":19,"value":"viewof alpha = Inputs.range([0, 1], { label: \"alpha\", step: 0.01, value: 0.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"red = {\n const c = +`0x${color.replace(/^#/, \"\").slice(0, 2)}`;\n const b = +`0x${bg.replace(/^#/, \"\").slice(0, 2)}`;\n return Math.round((c - (1 - alpha) * b) / alpha);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"green = {\n const c = +`0x${color.replace(/^#/, \"\").slice(2, 4)}`;\n const b = +`0x${bg.replace(/^#/, \"\").slice(2, 4)}`;\n return Math.round((c - (1 - alpha) * b) / alpha);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"blue = {\n const c = +`0x${color.replace(/^#/, \"\").slice(4, 6)}`;\n const b = +`0x${bg.replace(/^#/, \"\").slice(4, 6)}`;\n return Math.round((c - (1 - alpha) * b) / alpha);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"output = Math.min(red, green, blue) < 0 || Math.max(red, green, blue) > 255\n ? \"out of range\"\n : `rgba(${red},${green},${blue},${alpha})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}