UUUP Tools

Design Tools

SVG Color Editor — Edit fill and stroke

Paste SVG markup, extract fill/stroke colors into an editable palette, preview changes live, and copy the updated SVG. Built for icon recolors and simple vector tinting.

Quick switch→SVG Optimizer
SVGRecolorIcons
Quick switch:SVG OptimizerSVG Placeholder GeneratorNamed CSS Colors

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Recolor icon-library SVGs to brand colors
  • Unify fill/stroke across a multi-color SVG
  • Preview icons on light and dark backgrounds

How to use

  1. Paste a complete SVG
  2. Edit extracted colors in the palette
  3. Preview, then copy the final SVG

Example input and output

Input

<path fill="#000000" d="M0 0h24v24H0z"/>

Output

<path fill="#ff0000" d="M0 0h24v24H0z"/>

FAQ

Can I edit gradients?

Solid fill/stroke values are the main target. Linear gradients in defs may not be fully listed or editable.

Is the preview safe?

Executable nodes and event attributes are stripped before preview to reduce script risk from hostile SVG.

Tools

Related tools

Continue with another translated tool for a nearby task.

SVG Optimizer

SVG Optimizer — Cleanup and Compress

Available

Clean SVG comments, editor metadata, and extra whitespace locally in the browser to produce shorter markup—useful for icon compression, export cleanup, and preparing inline SVG. This is a lightweight cleaner, not a full SVGO plugin pipeline.

SVG Optimize Minify
Open tool

SVG Placeholder Generator

SVG Placeholder Generator — Size and Label Placeholders

Available

Generate a lightweight SVG placeholder from width, height, background, label text, and font size—useful for prototype image slots, list skeletons, and loading placeholders. Copy the SVG markup when ready.

SVG Placeholder Prototype
Open tool

Named CSS Colors

Named CSS Colors — Standard Color Name Lookup

Available

Browse W3C/CSS named colors and their values. Filter by keyword or family, then copy the color name or HEX for native CSS work.

CSS Color Cheat sheet
Open tool