2d:null 2e:["$","title",null,{"children":"Blend modes in culori | Dan Burzo | Observable"}] 33:T8f6,html`

Browser implementation

Culori implementation

`34:[] 31:{"id":"b234510ec182dc9e","slug":"culori-blend-modes","title":"Blend modes in culori","thumbnail":"c408ee8afbc89de3110d8344d1f50a8c3f70034d3cbbcafbe14c543e02f02d18","access_level":"public","create_time":"$D2019-05-04T15:23:07.203Z","update_time":"$D2019-05-05T07:34:35.081Z","view_time":null,"first_public_time":"$D2019-05-04T19:11:53.742Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":"starter_2024"},"version":133,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}],"members":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"496ce6a89b187242","slug":"color-exploration","title":"Color","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"type":"notebook","body":{"title":"Blend modes in culori","cells":[{"id":0,"value":"md`# Blend modes in culori`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof colors = {\n const form = html``;\n \n form.oninput = () =>\n form.value = ['a','b','c','a_alpha','b_alpha','c_alpha'].reduce((acc, curr) => { acc[curr] = form[curr].value; return acc; }, {});\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof mode = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof space = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"a = culori.formatter('rgb')(({ ...culori.rgb(colors.a), alpha: parseFloat(colors.a_alpha) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"b = culori.formatter('rgb')(({ ...culori.rgb(colors.b), alpha: parseFloat(colors.b_alpha) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"c = culori.formatter('rgb')(({ ...culori.rgb(colors.c), alpha: parseFloat(colors.c_alpha) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"culori = require('culori@0.8.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"