29:null 2a:["$","title",null,{"children":"Get non-transparent equivalent color | Gregor Aisch | Observable"}] 2f:[] 2d:{"id":"548bf18ea2915065","slug":"chroma-remove-alpha-from-color","title":"Get non-transparent equivalent color","thumbnail":"5aa4ac9acb9a353ceaaab98f60c67e0b91c8a1c61b97b6421e6b213bd4d243b1","access_level":"public","create_time":"$D2024-08-18T20:15:18.461Z","update_time":"$D2024-08-18T20:32:14.773Z","view_time":null,"first_public_time":"$D2024-08-18T20:15:18.461Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4e2b6d848bfc37f1","login":"gka","name":"Gregor Aisch","avatar_url":"https://avatars-next.observableusercontent.com/02fa3e2fe39d1962755f9a75e3a9ba66a3306203c605f71fa4f8c5ac6f7011db","tier":"starter_2024"},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6d0948f183bbbf46","login":"gka","name":"Gregor Aisch","avatar_url":"https://avatars-next.observableusercontent.com/02fa3e2fe39d1962755f9a75e3a9ba66a3306203c605f71fa4f8c5ac6f7011db","tier":null}],"members":[{"type":"team","id":"4e2b6d848bfc37f1","login":"gka","name":"Gregor Aisch","avatar_url":"https://avatars-next.observableusercontent.com/02fa3e2fe39d1962755f9a75e3a9ba66a3306203c605f71fa4f8c5ac6f7011db","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6d0948f183bbbf46","login":"gka","name":"Gregor Aisch","avatar_url":"https://avatars-next.observableusercontent.com/02fa3e2fe39d1962755f9a75e3a9ba66a3306203c605f71fa4f8c5ac6f7011db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Get non-transparent equivalent color","cells":[{"id":0,"value":"# Get non-transparent equivalent color\n\nThis notebook shows how to use [`chroma.mix()`](https://gka.github.io/chroma.js/#chroma-mix) to get the non-transparent equivalent of a transparent color against a given background.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof fg = Inputs.color({ label: \"Foreground\", value: \"#4682b4\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof bg = Inputs.color({ label: \"Background\", value: \"#ffffff\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof alpha = Inputs.range([0, 1], {\n label: \"Alpha\",\n value: 0.5,\n step: 0.01,\n unit: \"%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"equivalentColor = chroma.mix(bg, fg, alpha, \"rgb\").hex()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { chroma } from \"@gka/chroma-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"