Fill Example: Canvas Color Picker

This is the showpiece of the pack, and the first thing you'll notice when you drop it on the canvas: instead of a boring text field, you get an actual interactive color picker - a gradient you can click and drag across, RGB sliders, a hex input, and a reset button. It feels like a polished utility node. Then it does the thing that makes you laugh: it outputs a completely flat, solid-color image. The color you just spent a satisfying minute picking becomes a featureless rectangle of that exact shade.

Don't let that fool you. The solid image is the excuse; the picker is the point. This node is MachineDelusions' showcase for how to build a custom UI widget in ComfyUI's frontend - JavaScript that pairs with a backend node - and it's genuinely one of the better worked examples of that pattern you can clone and study.

How it works

There are two halves talking to each other. The Python side (fl_example_canvas_color_picker.py) is dead simple: it takes a hex color string, parses it to RGB, builds a solid numpy array of that color, and converts it to a (1, H, W, 3) float tensor by dividing by 255 - which is the shape and value range every ComfyUI IMAGE expects. The real magic lives in web/fl_example_canvas_color_picker.js, which the pack loads automatically through its WEB_DIRECTORY. That script replaces the plain hex text widget with a drawn canvas: a horizontal hue gradient over a vertical black gradient, with mouse handlers to sample the color under your cursor, plus R/G/B sliders and a hex field that all stay in sync. It's a complete mini-app riding on ComfyUI's frontend API.

Inputs and outputs

• selected_color (STRING, default #FF0000) - the hex color. On the backend this is the master value; in the frontend it's hidden behind the canvas picker. Changing it externally (say, converting the widget to an input) still drives everything.
• width and height (INT, default 512, min 64, max 4096, step 8) - the dimensions of the solid-color canvas that comes out. Step 8 keeps sizes divisible by 8, which matters if you're going to feed the image into anything that produces latents.

Outputs are IMAGE - the flat color canvas - and STRING - the hex color you picked. The IMAGE is handy as a background, a mask base, a test canvas, or a "start from a solid color" in an img2img or color-grade experiment. The STRING is there to wire your chosen color into any node that takes a hex color as an input.

Install

Same story as the rest of the pack: zero dependencies, no models.

• ComfyUI Manager → Install Custom Nodes → search "ComfyUI_Fill-Example-Nodes" → install → restart.
• Or:

cd ComfyUI/custom_nodes
git clone https://github.com/filliptm/ComfyUI_Fill-Example-Nodes

Restart ComfyUI. The JS loads with the pack - there's no separate step.

Common issues

A few things that will confuse you on first contact:

• The canvas picker isn't there. If you're driving ComfyUI headlessly through the API, or the frontend JS didn't load, you get the raw hex text widget instead. The node still works fine either way - the backend only ever reads the hex string.
• The original text field is hidden. When the JS loads, it hides the selected_color widget and substitutes the canvas. If you're hunting for a hex box and can't find one, that's why - there's a separate Hex Color field lower in the node, and the RGB sliders below it.
• Everything resets to red. The Reset Color button returns you to #FF0000. Not a bug, that's the default.
• The output image is flat. Again, not a bug. If you expected the picker to produce a gradient, it won't - the canvas is just the interface, and the product is a single solid color.

Worth saying plainly: if your goal is actually making images, the solid-color IMAGE has limited uses, and you're probably better off with the Color / Solid Color nodes from the big utility suites. If your goal is learning how to put a custom widget on a ComfyUI node - which is what this pack is for - this is the file to open. It's the rare example that's both complete enough to be real and small enough to read in one sitting.