Watermark Color UI
Watermark Color UI makes recolorable stamps not miserable
- image
- watermark
- watermark_mask
- image
If you've ever tried to plop a transparent PNG logo onto a generated image in plain ComfyUI, you know the pain: you wire up two Load Image nodes, reach for a composite node, and then guess at pixel offsets until the watermark sits somewhere that isn't the dead center or the exact edge. This node is the fix for that one job. It's a WYSIWYG watermark editor - you drag the stamp around on a live preview, resize it with a handle, rotate it, and recolor it, and the node writes the final composite for you.
It's also refreshingly un-AI about it. This is a deterministic pixel operation in the spirit of the post-processing layer: no model, no API, no key, no new dependencies. The only inputs are your base image and the watermark image. That's the whole point - watermarking is one of those jobs you should never burn a diffusion pass on, and this node doesn't.
How it works
Under the hood it's a ColorWatermarkUI class (registered as WatermarkColorUI), a plain torch compositing routine wrapped in a custom front-end. Feed it your base image and your watermark (ideally a transparent PNG), and it builds an RGBA layer, tints it, scales and rotates it with bicubic sampling, and alpha-composites it onto the base. All five blend_mode options - normal, multiply, screen, overlay, soft_light - are computed on the watermark RGB and then blended by alpha, which is the correct order for getting the mode to actually look like Photoshop instead of a wash.
The one thing to understand about the mask: ComfyUI's Load Image hands you transparent-PNG alpha as an inverted mask (transparent = 1, opaque = 0), and this node knows it - it flips it back to real alpha for you. But it can only do that if you actually wire the mask in.
The inputs that matter
watermark_mask- the one that saves you. Connect theMASKoutput from the watermark'sLoad Image. Skip it and the node treats the watermark as flat RGB, so you get a solid rectangle instead of your shaped logo. This is the #1 way people mess this up.tint_color,tint_strength,preserve_luminance- the recolor trio.tint_strength100 slaps the selected color on flat; 0 keeps the original RGB. Flippreserve_luminanceon to keep the original brightness as shading, so a black-on-white stamp keeps its depth when you tint it.opacity- overall alpha multiplier.blend_mode- the compositing mode above.x_percent,y_percent,scale,rotation- position, size, and angle. You'll almost never type these by hand; the interactive editor writes them for you.
The output is a single image socket carrying the composited result, which you wire straight into Save Image. The node is marked as an output node so it renders its live preview - the image still flows onward.
The editor is the actual feature
Here's the part that makes this worth installing over a hand-rolled composite graph. Inside the node you can drag the watermark to position it, use the bottom-right square handle to scale it, and the top-right round handle to rotate it. There's a color swatch picker, a Pick button that samples a color from the preview itself, and guide lines that snap the stamp to the image center and snap rotation to 0/90/180. The S / M / L buttons switch preview heights, and the UI is bilingual (it follows your ComfyUI locale setting). One honest detail: the author replaced the browser-native EyeDropper with in-preview sampling because the native API froze in some browsers - the workaround is built in, so you don't need to care.
Install
ComfyUI Manager (search "Watermark Color UI") or the manual route:
cd ComfyUI/custom_nodes
git clone https://github.com/shuaixn/ComfyUI-WatermarkColorUI
Then restart ComfyUI and hard-refresh the browser (Ctrl+Shift+R / Cmd+Shift+R). That last step matters because this pack ships a web/ directory - the interactive editor is browser JavaScript, and stale cached assets are the most common reason the fancy UI doesn't show up. There's no requirements.txt and no models to download; it only uses torch, Pillow, numpy, and ComfyUI's built-in folder_paths, all already present.
Common issues
- Rectangular block instead of a shaped watermark - you forgot
watermark_mask. Wire theMASKoutput from the watermark'sLoad Image. - Preview looks stale after you add a Resize upstream - the node can't see the resize until you run it. Click the native run button above the node so it executes the upstream chain and refreshes with the real pixels.
- No interactive controls after install - hard refresh, and confirm the restart actually loaded the
web/directory. tint_colorlooks like a scary hex string - it is a#RRGGBBstring, but the widget gives you a color picker, so you rarely need to touch the text.
Is it overkill for stamping one logo once? Yeah, maybe. But if you batch watermark client work or portfolio pieces, the drag-and-snap editor turns a fiddly chore into something you can do in seconds.
Inputs (12)
| Name | Type | Default | Description |
|---|---|---|---|
| image | IMAGE | — | |
| watermark | IMAGE | — | |
| tint_color | STRING | #ffffff | Watermark color as #RRGGBB. The visual widget includes a color picker and eyedropper. |
| tint_strength | FLOAT | 1000–100 | 0 keeps original watermark RGB; 100 applies the selected color. |
| preserve_luminance | BOOLEAN | false | Use the original watermark brightness as shading when applying color. |
| x_percent | FLOAT | 90.0-100–200 | Watermark center X as percent of image width. |
| y_percent | FLOAT | 90.0-100–200 | Watermark center Y as percent of image height. |
| scale | FLOAT | 20.00.1–200 | Watermark width as percent of image width. |
| opacity | FLOAT | 900–100 | Watermark alpha multiplier. |
| rotation | FLOAT | 0-360–360 | Watermark rotation in degrees. |
| blend_mode | COMBO | normal | Color blending mode used when compositing the watermark. |
| watermark_maskopt | MASK | Optional. Connect the MASK output from the watermark Load Image node to preserve transparent PNG alpha. |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| image | IMAGE | — |