31:[] 2f:{"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"},{"id":9,"value":"viewof fg = Inputs.color({ label: \"Foreground\", value: \"#4682b4\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof bg = Inputs.color({ label: \"Background\", value: \"#ffffff\" })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":24,"value":"equivalentColor = chroma.mix(bg, fg, alpha, \"rgb\").hex()","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { chroma } from \"@gka/chroma-js\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}