SVG colour tool
Drop in a real SVG file, preview it at high zoom, hover over the artwork to see the colours under your pointer, and copy exact colour values from the preview or the full colour list.
Current SVG
Waiting for SVG Upload an SVG to scan its fills, strokes, gradients, and CSS colours locally in your browser.Preview
Colours
An SVG logo or icon can contain colour values in its shapes, outlines, gradients and styles. The SVG Colour Extractor brings those detected values together so you can inspect the artwork and copy colours for a website, presentation or design project.
A fill colours the inside of a shape. A stroke colours its outline. A gradient blends between specified colour stops, so the colour visible between those stops may not appear as a separate value in the SVG source.
The tool can inspect defined colours and sample parts of the rendered preview. A sampled gradient colour describes the point you selected; it is not necessarily one of the original colour stops.
Add your SVG logo, identify its main solid fill and copy that colour. Use it as a starting point for the button background, then check the contrast with the button text. If the logo uses a gradient, choose a deliberate solid colour rather than assuming any sampled point is the official brand colour.
An SVG may contain separate fill and stroke colours, several gradient stops, and colours declared in styles or definitions. Some declared values may not contribute to the visible artwork. Use the preview to understand where the colours are used.
Gradients, transparency, overlapping shapes and smoothing at edges can change the colour visible at a particular point. For a defined solid colour, inspect its fill or stroke value. For the appearance of a gradient, compare the sampled point with the original stops.
This tool accepts SVG files. Placing a PNG or JPG inside an SVG does not turn its pixels into individually defined SVG fills and strokes. For a logo's original colour values, use the vector source file where possible.
An SVG can depend on styles, inherited values or linked content supplied by the website where it normally appears. An isolated file may not include that context. Try a self-contained SVG export with its required styles included, and compare it with the original artwork.
No. An SVG colour value does not establish a physical ink specification. The HEX to RGB and Pantone converter can help compare approximate matches, but approved brand guidelines and a physical reference should guide print colour choices.
If one of these tools helped you, feel free to support 27tools ☕
Buy me a coffee