Nodes/ComfyUI_SVG-Suite/SVG Color Manipulation
ComfyUI Node

SVG Color Manipulation

Recolor, brighten, hue-shift β€” a mini image editor for SVG colors

By MushroomFleetΒ·Created about a year agoΒ·Updated 5 months agoΒ· 9
SVG Color Manipulation
    • STRING
    β—„svg_stringβ€”β–Ί
    β—„operationreplace_colorβ–Ί
    β—„target_color#000000β–Ί
    β—„replacement_color#FF0000β–Ί
    β—„brightness_factor1.2β–Ί
    β—„saturation_factor1.2β–Ί
    β—„hue_shift_degrees180β–Ί
    β—„affect_fillstrueβ–Ί
    β—„affect_strokestrueβ–Ί
    β—„color_tolerance0β–Ί

    SVG Color Manipulation is the closest thing svg-suite has to opening your SVG in a photo editor. Where SVG Color Replacer does exact-match swaps, this node gives you transformations: brighten everything, desaturate, invert, or spin the hue. It's the "adjustment layer" of the pack, and it's the node you reach for when your traced SVG comes out too dark or your palette is just slightly off.

    What you can do

    One operation at a time, with a target_color that decides what gets changed:

    • replace_color - swap target_color for replacement_color. This is the exact-match sibling of SVG Color Replacer, but single-color at a time.
    • adjust_brightness - multiply every color by brightness_factor (1.2 default, 0.1–5.0).
    • adjust_saturation - scale saturation by saturation_factor (0 = fully desaturated).
    • grayscale and invert_colors - the whole-SVG versions, same as the batch node's presets.
    • shift_hue - rotate hue by hue_shift_degrees (180 default, 0–360).

    Under the hood it converts hex to RGB, does the math (using colorsys for HSL work), and writes back. Two toggles matter here: affect_fills and affect_strokes, both default true - flip one off if you only want to touch one or the other. And color_tolerance (0–255, default 0) is the sleeper feature: it lets replace_color catch near-misses of your target color instead of requiring an exact hex match. Bump it to 10–20 when a traced SVG has 15 nearly-identical reds you want gone.

    The inputs that matter

    • operation + target_color are all you need to start.
    • Add replacement_color for replace mode, brightness_factor / saturation_factor / hue_shift_degrees for the transform modes.
    • color_tolerance when exact matching is failing you.

    Output is a single STRING - the recolored SVG, ready to chain onward.

    Install

    Shared with the pack:

    cd ComfyUI/custom_nodes
    git clone https://github.com/MushroomFleet/svg-suite
    pip install -r requirements.txt
    

    Restart ComfyUI, or install via Manager under "svg-suite". No special dependencies - pure string processing.

    Where people get burned

    The tolerance mechanic only applies to replace_color; brightness/saturation/hue ops always hit every matching color, which is the point. And remember it transforms the color values that are written in the markup - colors applied through a <style> block or CSS class won't move until you inline them first. If your recolored output looks unchanged, that's the first thing to check.

    Also, unlike the batch node, this one does respect strokes via affect_strokes - nice, but if you set both to true on a busy icon you'll often want to double-check the preview, since stroke colors can react oddly to hue shifts. Start with one toggle, look, then widen.

    CategoryπŸ’ŽTOSVG/StringEdit

    Inputs (10)

    NameTypeDefaultDescription
    svg_stringSTRINGβ€”
    operationCOMBOreplace_color6 options: replace_color, adjust_brightness, adjust_saturation, grayscale, invert_colors, shift_hue
    target_colorSTRING#000000β€”
    replacement_coloroptSTRING#FF0000β€”
    brightness_factoroptFLOAT1.20.1–5β€”
    saturation_factoroptFLOAT1.20–5β€”
    hue_shift_degreesoptINT1800–360β€”
    affect_fillsoptBOOLEANtrueβ€”
    affect_strokesoptBOOLEANtrueβ€”
    color_toleranceoptINT00–255β€”

    Outputs (1)

    NameTypeDescription
    STRINGSTRINGβ€”