svg-colour-replacer
Upload or paste an SVG and replace its colour literals with CSS colour variables from the site's shared palette. Detects colours in presentation attributes, inline styles, and embedded stylesheets, with a live preview and buttons to copy or download the resulting SVG. Processing happens locally in your browser. Exported SVGs reference the variables and should be embedded inline in a page that defines them.
Use Automatic replacement to select the nearest palette colour for every literal using perceptual OKLab distance and opacity. The dropdowns update with the selections and remain editable for manual overrides. Equal matches use the first variable in the dropdown order.