28:null 29:["$","title",null,{"children":"RGB Color Mixer | Benny Schudel | Observable"}] 2e:Tb87,function RgbColorInput(options = {}) { const { label } = options; let { expanded = false, value } = options; const uid = DOM.uid("color-input"); const rootEl = htl.html`

`; if (expanded) { rootEl.setAttribute("data-expanded", ""); } const mixerEl = createRgbColorMixer({ ...options }); mixerEl.classList.add("mixer"); function setValue(v) { value = v; rootEl.style.setProperty("--color", v); outputEl.value = v; } mixerEl.addEventListener("input", (event) => { const { value } = event.target; setValue(value); rootEl.value = value; }); const labelEl = label ? htl.html`${label}` : undefined; const buttonEl = htl.html``; buttonEl.addEventListener("click", () => { expanded = !expanded; expanded ? rootEl.setAttribute("data-expanded", "") : rootEl.removeAttribute("data-expanded"); }); const outputEl = htl.html`${value}`; Object.defineProperty(rootEl, "value", { get() { return value; }, set(v) { setValue(v); mixerEl.setColor(v); } }); const formEl = htl.html`

${labelEl}

${buttonEl}${outputEl}

`; const styleEl = htl.html``; rootEl.appendChild(formEl); rootEl.appendChild(mixerEl); rootEl.appendChild(styleEl); return rootEl; }2f:[] 2c:{"id":"316300bfc863bde8","slug":"rgb-color-mixer","title":"RGB Color Mixer","thumbnail":"6dd171666164682c6b0d9dc71f6ad9944d779b16ec855c31ba8457b5253a2b3c","access_level":"public","create_time":"$D2025-03-27T13:59:48.072Z","update_time":"$D2025-05-03T16:29:12.462Z","view_time":null,"first_public_time":"$D2025-03-29T17:50:49.817Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"5654f2551bef587e","login":"bennyschudel","name":"Benny Schudel","avatar_url":"https://avatars-next.observableusercontent.com/d85730e0e60b27e2788e6c873836d4956c19d4aa31e2a8c201e3936ed66f68b5","tier":"starter_2024"},"version":465,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e794d8d29f76833c","login":"bennyschudel","name":"Benny Schudel","avatar_url":"https://avatars-next.observableusercontent.com/d85730e0e60b27e2788e6c873836d4956c19d4aa31e2a8c201e3936ed66f68b5","tier":null}],"members":[{"type":"team","id":"5654f2551bef587e","login":"bennyschudel","name":"Benny Schudel","avatar_url":"https://avatars-next.observableusercontent.com/d85730e0e60b27e2788e6c873836d4956c19d4aa31e2a8c201e3936ed66f68b5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e794d8d29f76833c","login":"bennyschudel","name":"Benny Schudel","avatar_url":"https://avatars-next.observableusercontent.com/d85730e0e60b27e2788e6c873836d4956c19d4aa31e2a8c201e3936ed66f68b5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"RGB Color Mixer","cells":[{"id":0,"value":"# RGB Color Mixer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"color2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof color2 = createRgbColorMixer({\n value: \"hotpink\",\n onUpdateValue(value) {\n mutable color = value;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"color3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"viewof button = Inputs.button(\"Set to tomato\", {\n reduce: () => {\n viewof color3.value = \"tomato\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof color3 = RgbColorInput({\n value: \"hotpink\",\n label: \"Background Color\",\n expanded: true,\n onUpdateValue(value) {\n mutable color = value;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof settings = Inputs.form({\n count: Inputs.bind(\n RgbColorInput({ value: \"chocolate\", label: \"Color\" }),\n viewof color3\n )\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function createRgbColorMixer({\n value = \"hotpink\",\n channels = \"rgbhsl\",\n format = \"rgb\",\n noBlender = false,\n noValue = false,\n onUpdateValue = () => {}\n} = {}) {\n RGBColorMixer;\n\n const mixerEl = html`\n \n `;\n\n mixerEl.addEventListener(\"update:value\", (event) => {\n const { value } = event.detail;\n\n onUpdateValue(value);\n\n const inputEvent = new Event(\"input\", { bubbles: true });\n mixerEl.setColor(value);\n mixerEl.dispatchEvent(inputEvent);\n });\n\n return mixerEl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"mutable color = 'black'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"lit = import(\"https://esm.sh/lit\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"spectral = import(\"https://esm.sh/spectral.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"RGBColorMixer = import(\"https://esm.sh/rgb-color-mixer@0.8.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"