28:null 29:["$","title",null,{"children":"Transparentize | fidel | Observable"}] 2e:[] 2c:{"id":"bf423527545ee79c","slug":"transparentize","title":"Transparentize","thumbnail":"1247f5199f2f6210e3fddfe179ec669df79ccd4f3f682d3ac24a21ed48677c47","access_level":"public","create_time":"$D2021-11-04T15:47:27.791Z","update_time":"$D2021-11-05T08:04:54.023Z","view_time":null,"first_public_time":"$D2021-11-05T07:44:36.619Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8611c7650cb0e350","login":"fidel","name":"fidel","avatar_url":"https://avatars-next.observableusercontent.com/909b72f472080f40fc914af43bed4f59fb217b8f3820d0ef803c7eae943c6a94","tier":"starter_2024"},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78ac84bfdcd0eea1","login":"fidel","name":"fidel","avatar_url":"https://avatars-next.observableusercontent.com/909b72f472080f40fc914af43bed4f59fb217b8f3820d0ef803c7eae943c6a94","tier":null}],"members":[{"type":"individual","id":"78ac84bfdcd0eea1","login":"fidel","name":"fidel","avatar_url":"https://avatars-next.observableusercontent.com/909b72f472080f40fc914af43bed4f59fb217b8f3820d0ef803c7eae943c6a94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Transparentize","cells":[{"id":0,"value":"# Transparentize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof color = Inputs.text({ value: \"#5C5F78\", label: \"color\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof alpha = Inputs.range([0, 1], { label: \"alpha\", step: 0.01, value: 0.5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"