i🩵SVG
Fast, clean SVG utilities

Free Color Picker + Palette Extractor (SVG & Images)

Extract palette from file
Upload an SVG or an image to generate a palette. The extracted palette below shows the current output colors. Use Reset to restore the original input colors.
Copy values
HEX
RGB
RGBA
HSL
HSLA
Uploaded file
This is the original input preview. It does not change when you edit the output colors.
Upload an SVG or image to preview the input file here.
Output image preview
This preview updates from the output palette and alpha settings on the left.
Upload an SVG or image to generate the output preview here.
RGB
11, 45, 255
HSL
232°, 100%, 52%
Export output

Download the recolored result or save a compact report with the preview and color values.

Preview fill and stroke on simple SVG shapes.
Quick SVG snippet

Use these directly as fill or stroke.

<rect width="120" height="120" fill="#0b2dff" />
<path d="..." stroke="#0b2dff" stroke-width="2" fill="none" />

Color picker + palette extractor

Pick colors fast, extract palettes from SVG and images

Use this free tool to choose a color, preview it as SVG fill/stroke, and copy HEX/RGB/HSL. You can also upload an SVG or image to extract a palette and click swatches to apply them instantly.

Pick a color, preview fills and strokes, copy HEX/RGB/HSL, and extract palettes from SVG or images. Runs in your browser.

Copy instantly
HEX, RGB, HSL (+ alpha variants)
Palette extraction
From SVG or PNG/JPG/WebP
Preview included
Fill + stroke on shapes
Private
Runs in your browser

How to use

  1. 1
    Pick a color or upload a file
    Use the color input or upload an SVG/image to extract a palette.
  2. 2
    Click a swatch
    When a palette appears, click any output swatch to choose which color you want to edit.
  3. 3
    Adjust the output color
    Use the color picker and alpha slider to update the selected output color while the input preview stays unchanged.
  4. 4
    Copy values
    Copy HEX/RGB/HSL (and alpha variants) for your SVG, CSS, or design work.

Color workflow

Free Color Picker: practical workflow notes

Pick colors and extract palettes from SVG, PNG, JPG, JPEG, or WebP with HEX, RGB, and HSL output. Use this page when that specific output is the fastest path, then jump to the related tools below if you need a different export, cleanup, or craft-file workflow.

Best for

  • color picker
  • Creator, design, web, and SVG production workflows
  • Fast visual checks before copy or download
  • Moving between related SVG tools without restarting from scratch

Settings to try

  • Use the route-specific controls shown inside the tool.
  • Preview the result before downloading or copying.
  • Open related tools when you need cleanup, export, color, or sizing changes.

Useful limits

  • This tool only exposes controls that affect the current output.
  • Use a related converter if your input or output format is different.
  • Some browser-rendered previews can differ when external assets are missing.

Need help choosing?

Read the concise workflow, preset, settings, and troubleshooting docs without adding clutter to the converter.

How it worksPreset Guide

Frequently asked questions

What formats can I copy?

HEX, RGB, and HSL are available. Alpha is supported with RGBA and HSLA.

Can I extract a palette from an SVG or image?

Yes. Upload an SVG (reads fill/stroke/style colors) or an image (PNG/JPG/WebP) to generate swatches.

Does this upload my file?

No. Palette extraction runs locally in your browser.

Why do SVG colors sometimes look incomplete?

If an SVG uses external CSS, injected filters, or unusual color expressions, extraction may miss some. For most normal SVGs, it works well.

Tips

SVG fill vs stroke

Use the same value for both, or keep stroke darker for readability.

Alpha in SVG

SVG supports opacity. If you want transparency, use opacity or RGBA in CSS.

Palettes from images

Image palette replacement works best on icons, logos, and graphics with clean color blocks.

Copying into CSS

HEX is common, but HSL makes it easier to create consistent tints/shades.

All SVG tools

Browse every SVG converter, editor, inspector, optimizer, and craft-file utility available on iLoveSVG.

Image to SVG converters

Convert raster images, logos, drawings, sketches, scans, text, stickers, and outlines into scalable SVG files.

Image -> SVG
Convert an image into an SVG vector for scaling, logos, icons, and clean print output.
Convert
Open tool
PNG -> SVG
Convert PNG images to SVG vectors for scalable logos, icons, graphics, and print-ready artwork.
Convert
Open tool
JPG -> SVG
Convert JPG images into scalable SVG files for web graphics, posters, and print projects.
Convert
Open tool
JPEG -> SVG
Convert JPEG images to SVG with clean vector-style output for resizing without blur.
Convert
Open tool
WebP -> SVG
Convert WebP images to SVG for scalable assets and consistent rendering across sizes.
Convert
Open tool
Logo -> SVG
Turn a logo into a scalable SVG for brand kits, websites, printing, and sharp resizing.
Convert
Open tool
Icon -> SVG
Convert icons to SVG for crisp scaling, theming, UI use, and consistent rendering.
Convert
Open tool
Emoji -> SVG
Convert emoji-style images to SVG for scalable stickers, icons, overlays, and graphics.
Convert
Open tool
Text -> SVG
Convert text into SVG for logos, wordmarks, headings, and scalable typography graphics.
Convert
Open tool
Sticker -> SVG
Convert sticker images to SVG for clean cut lines, scaling, decals, and print-ready output.
Convert
Open tool
Line Art -> SVG
Convert line art into SVG for crisp outlines, coloring pages, decals, and cut-friendly paths.
Convert
Open tool
Drawing -> SVG
Convert a drawing into SVG so it stays sharp at any size for prints, merch, and design edits.
Convert
Open tool
Scan -> SVG
Convert scanned images to SVG for cleanup, scaling, document graphics, and printable art.
Convert
Open tool
Sketch -> SVG
Vectorize sketches into SVG for clean scaling, editing, and consistent line output.
Convert
Open tool
Image -> Outline
Generate an outline SVG from an image for clean line art, decals, and cut-ready shapes.
Convert
Open tool
Photo -> Outline
Create an outline-style SVG from a photo for posters, stickers, simplified art, and decals.
Convert
Open tool
B&W -> SVG
Convert black and white images to SVG with clear edges for stencils, decals, signs, and prints.
Convert
Open tool
GIF -> SVG
Convert static GIF artwork, old web graphics, transparent GIFs, and sticker-style art into SVG.
Convert
Open tool
AVIF -> SVG
Convert AVIF graphics into SVG for modern web artwork, logos, icons, and illustration cleanup.
Convert
Open tool
BMP -> SVG
Convert BMP files into SVG for legacy bitmap art, scans, line art, and old archive graphics.
Convert
Open tool
TIFF -> SVG
Convert TIFF scans and archival artwork into SVG for cleanup, line extraction, and print handoff.
Convert
Open tool
Transparent PNG -> SVG
Convert transparent PNG logos, stickers, and product art into SVG with background-aware tracing.
Convert
Open tool
Image -> Layered SVG
Create layered SVG output from image artwork for editable color regions and creator workflows.
Convert
Open tool
JPG -> Layered SVG
Convert JPG artwork into layered SVG output for separated colors and editable creator assets.
Convert
Open tool
Logo -> Layered SVG
Convert logo artwork into layered SVG output for separated colors, brand marks, and reusable graphics.
Convert
Open tool

Cricut, stickers, vinyl, Etsy, Silhouette, and laser cutting

Tools for craft workflows, cut files, layered SVG output, vinyl projects, stickers, Print Then Cut, Etsy listings, Silhouette projects, and laser cutting prep.

Cricut SVG Converter
Convert artwork into SVG files for Cricut Design Space, vinyl decals, stickers, labels, stencils, cards, and craft projects.
Craft
Open tool
Image -> Cricut SVG
Convert PNG, JPG, WebP, GIF, BMP, TIFF, AVIF, HEIC, HEIF, or SVG files into Cricut-friendly SVG output.
Craft
Open tool
PNG -> Cricut SVG
Convert PNG images into Cricut-friendly SVG files for cut files, decals, stickers, and crafts.
Craft
Open tool
JPG -> Cricut SVG
Convert JPG images into Cricut-friendly SVG files for stickers, decals, vinyl, labels, and craft projects.
Craft
Open tool
JPEG -> Cricut SVG
Convert JPEG images into Cricut-friendly SVG files for cut files, decals, stickers, and craft use.
Craft
Open tool
WebP -> Cricut SVG
Convert WebP images into Cricut-friendly SVG files for Design Space, vinyl, stickers, and crafts.
Craft
Open tool
Photo -> Cricut SVG
Convert photos into Cricut-friendly SVG output for simplified art, decals, stickers, and craft projects.
Craft
Open tool
B&W -> Cricut SVG
Convert black and white images into Cricut-friendly SVG files for stencils, decals, stickers, and signs.
Craft
Open tool
Line Art -> Cricut SVG
Convert line art into Cricut-friendly SVG outlines for decals, coloring pages, vinyl, and cut projects.
Craft
Open tool
Drawing -> Cricut SVG
Convert drawings into Cricut-friendly SVG files for craft projects, stickers, decals, and vinyl cuts.
Craft
Open tool
Sketch -> Cricut SVG
Convert sketches into Cricut-friendly SVG files for decals, labels, stickers, and cut-file workflows.
Craft
Open tool
Sticker -> Cricut SVG
Convert sticker artwork into Cricut-friendly SVG files for Print Then Cut, decals, labels, and sticker sheets.
Craft
Open tool
Logo -> Cricut SVG
Convert logo files into Cricut-friendly SVG cut files for decals, branding, signs, labels, and craft projects.
Craft
Open tool
Base64 -> Cricut SVG
Decode Base64 SVG data and prepare the SVG for Cricut Design Space, downloads, and craft workflows.
Craft
Open tool
Code -> Cricut SVG
Convert SVG code or markup into a downloadable Cricut-friendly SVG file for Design Space.
Craft
Open tool
Layered Cricut SVG
Create or prepare layered SVG files for Cricut projects, multicolor artwork, vinyl, stickers, and craft designs.
Craft
Open tool
Image -> Layered SVG
Convert PNG or JPG images into color-separated layered SVG files for Cricut Design Space.
Craft
Open tool
PNG -> Layered SVG
Create layered SVG output from PNG artwork for Cricut projects, vinyl, stickers, and multicolor designs.
Craft
Open tool
JPG -> Layered SVG
Convert JPG or JPEG images into color-separated layered SVG files for Cricut Design Space.
Craft
Open tool
Logo -> Layered SVG
Convert logos into layered SVG files for Cricut projects with editable color-separated layers.
Craft
Open tool
Print Then Cut SVG
Prepare PNG artwork for Cricut Print Then Cut workflows, stickers, labels, and printable designs.
Craft
Open tool
Vinyl Cricut SVG
Convert PNG artwork into SVG files for Cricut vinyl projects, decals, and cut-friendly designs.
Craft
Open tool
Sticker Cricut SVG
Turn PNG sticker artwork into SVG files for Cricut sticker projects, decals, labels, and prints.
Craft
Open tool
PNG -> Etsy SVG
Convert PNG designs into SVG files for Etsy digital downloads, craft bundles, decals, stickers, and printable product listings.
Craft
Open tool
PNG -> Silhouette SVG
Convert PNG artwork into SVG files for Silhouette Studio projects, decals, stickers, labels, and cut-file workflows.
Craft
Open tool
Laser Cut SVG
Convert PNG artwork into SVG files for laser cutting, engraving prep, outlines, and cut paths.
Craft
Open tool

Seller, Shopify, Etsy, and store asset workflows

Focused routes for shop graphics, listing previews, store logos, favicons, seller exports, and ecommerce asset cleanup.

PNG -> Shopify SVG
Prepare PNG store graphics, badges, and brand assets as scalable SVG files.
Seller
Open tool
Logo -> Shopify SVG
Convert store logos into SVG for Shopify themes, brand assets, and favicon prep.
Seller
Open tool
Shopify SVG -> PNG
Export Shopify-ready PNG copies from SVG logos, badges, icons, and theme graphics.
Seller
Open tool
Shopify Favicon
Generate favicon assets from Shopify store SVG logos and brand marks.
Seller
Open tool
Shopify SVG Resize
Resize Shopify SVG logos, theme graphics, and badges while keeping the file editable.
Seller
Open tool
Shopify Logo Favicon
Generate Shopify favicon assets from a logo image or SVG.
Seller
Open tool
Etsy SVG -> PNG
Export Etsy listing previews and digital product visuals from SVG artwork.
Seller
Open tool
Etsy SVG -> JPG
Export flattened JPG previews from SVG artwork for Etsy product images and mockups.
Seller
Open tool
Logo -> Etsy SVG
Convert Etsy shop logos and brand marks into scalable SVG seller assets.
Seller
Open tool
Sticker -> Etsy SVG
Convert sticker artwork into SVG for Etsy digital downloads, decals, and product art.
Seller
Open tool
Image -> Etsy SVG
Convert images into SVG for Etsy listing assets, digital downloads, and mockup prep.
Seller
Open tool
JPG -> Etsy SVG
Convert JPG artwork into SVG for Etsy shop graphics, listings, and seller files.
Seller
Open tool
Etsy SVG Resize
Resize SVG assets for Etsy previews, product graphics, and digital download files.
Seller
Open tool

Print-on-demand and printing prep

Export transparent PNG files, sticker previews, product mockup assets, and practical print handoff graphics from SVG artwork.

SVG -> Printify PNG
Export transparent PNG artwork from SVG for Printify mockups and product visuals.
Print
Open tool
SVG -> Printful PNG
Export SVG artwork to PNG for product mockups, print previews, and seller handoff.
Print
Open tool
Sticker SVG -> PNG
Export sticker SVG artwork to transparent PNG for labels, decals, and print previews.
Print
Open tool
SVG -> Transparent PNG
Export SVG artwork as transparent PNG for printing previews, stickers, and product mockups.
Print
Open tool

Glowforge, Silhouette, and laser prep

Convert, clean, and resize SVG artwork for laser, vinyl, sticker, decal, and cutting software workflows.

PNG -> Glowforge SVG
Convert PNG artwork into SVG for Glowforge-style laser prep, sizing, and testing.
Cut
Open tool
JPG -> Glowforge SVG
Convert JPG artwork into SVG for Glowforge-style outline cleanup and engraving prep.
Cut
Open tool
Logo -> Glowforge SVG
Convert logo artwork into SVG for Glowforge-style engraving, cutting prep, and sizing checks.
Cut
Open tool
Glowforge SVG Clean
Clean SVG markup before Glowforge-style laser import and path review.
Cut
Open tool
Glowforge SVG Resize
Resize SVG artwork for Glowforge-style laser prep and predictable dimensions.
Cut
Open tool
Image -> Glowforge SVG
Convert images into SVG for Glowforge-style laser prep, outlines, and cleanup.
Cut
Open tool
JPG -> Silhouette SVG
Convert JPG artwork into SVG for Silhouette-style cutting, vinyl, and sticker prep.
Cut
Open tool
Image -> Silhouette SVG
Convert images into SVG for Silhouette-style vinyl, decals, labels, and stickers.
Cut
Open tool
Logo -> Silhouette SVG
Convert logo artwork into SVG for Silhouette-style vinyl, decals, and labels.
Cut
Open tool
Sticker -> Silhouette SVG
Convert sticker artwork into SVG for Silhouette-style decals, labels, and vinyl workflows.
Cut
Open tool
Silhouette SVG Clean
Clean SVG markup before Silhouette-style import, sizing checks, and path review.
Cut
Open tool
Silhouette SVG Resize
Resize SVG artwork for Silhouette-style vinyl, stickers, decals, and cut files.
Cut
Open tool

Canva and Figma handoff

Prepare SVG and PNG files for design app handoff, predictable sizing, cleanup, and flattened previews.

PNG -> Canva SVG
Convert PNG artwork into SVG for Canva design reuse, scalable logos, and simple graphics.
Design
Open tool
JPG -> Canva SVG
Convert JPG graphics into SVG for Canva design reuse, logos, and scalable layout assets.
Design
Open tool
Canva SVG -> PNG
Export SVG artwork to PNG for Canva uploads, transparent graphics, and previews.
Design
Open tool
Logo -> Canva SVG
Convert logo images into SVG for Canva brand graphics and reusable design assets.
Design
Open tool
Canva SVG Resize
Resize SVG logos and design assets before Canva handoff.
Design
Open tool
Figma SVG Clean
Clean SVG markup for Figma handoff while preserving practical SVG structure.
Design
Open tool
Figma SVG Resize
Resize SVG assets for Figma handoff, viewBox checks, and predictable exports.
Design
Open tool
Figma SVG -> PNG
Export SVG assets to PNG for Figma previews, thumbnails, and flattened sharing files.
Design
Open tool
PNG -> Figma SVG
Convert PNG assets into SVG for Figma handoff, icon prep, and cleanup workflows.
Design
Open tool

Developer SVG utilities

Convert SVG markup into JSX, embed snippets, Base64 output, and cleaner code-oriented assets without changing converter behavior.

SVG -> JSX
Convert SVG markup into React-friendly JSX with common attribute conversion and optional component wrapping.
Dev
Open tool

SVG to image and PDF converters

Export SVG files to PNG, JPG, WebP, PDF, and favicon formats for web, print, sharing, and app icons.

SVG -> PNG
Convert SVG to PNG with clean edges, transparent background support, and fast export.
Export
Open tool
SVG -> JPG
Export SVG as JPG or JPEG for sharing, email, previews, and standard image workflows.
Export
Open tool
SVG -> WebP
Convert SVG to WebP for smaller files, modern websites, and efficient image delivery.
Export
Open tool
SVG -> PDF
Convert SVG to PDF for printing, sharing, design handoff, and document workflows.
Export
Open tool
Favicon Generator
Generate favicon.ico and common icon sizes from an SVG for browsers and app shortcuts.
Export
Open tool
SVG -> ICO
Create favicon.ico output from SVG logos and icons with the existing favicon generator.
Export
Open tool
Image -> Favicon
Generate favicon ICO and PNG icon assets from SVG, PNG, JPG, or WebP images.
Export
Open tool
PNG -> Favicon
Turn PNG logos and app icons into favicon ICO and supporting icon sizes.
Export
Open tool
JPG -> Favicon
Create favicon assets from JPG or JPEG logo images with square padding and background controls.
Export
Open tool
Logo -> Favicon
Generate favicon ICO and PNG icon assets from logo images or SVG brand marks.
Export
Open tool
PNG -> ICO
Convert PNG logo or icon files into favicon.ico output and supporting icon sizes.
Export
Open tool

SVG editors

Edit common SVG properties such as background, size, scale, color, stroke width, rotation, and flipping.

Background Editor
Add or remove an SVG background rectangle for solid color or transparent output.
Edit
Open tool
Resize & Scale
Resize and scale SVGs safely by updating viewBox, width, height, and sizing attributes.
Edit
Open tool
Recolor
Replace SVG fill and stroke colors quickly with live preview and copy-ready output.
Edit
Open tool
Stroke Width
Adjust SVG line thickness by editing stroke widths across attributes, styles, or CSS.
Edit
Open tool
Flip & Rotate
Flip horizontally or vertically, and rotate SVGs without rasterizing the original file.
Edit
Open tool

SVG viewers, inspectors, and embed tools

Preview SVGs, inspect dimensions and file size, generate embed code, compare inline SVG vs img, and check accessibility.

Preview Viewer
Preview SVGs instantly in the browser to verify rendering, layout, and visible output.
Inspect
Open tool
Embed Code
Generate embed snippets for inline SVG, img tags, CSS backgrounds, and HTML usage.
Inspect
Open tool
Inline vs IMG
Compare inline SVG vs img for styling, caching, accessibility, and performance tradeoffs.
Inspect
Open tool
Dimensions
Inspect width, height, viewBox, aspect ratio, and computed pixel size for an SVG.
Inspect
Open tool
File Size
Check SVG file size and see what changes affect KB, bytes, and optimization potential.
Inspect
Open tool
A11y + Contrast
Check WCAG contrast, preview color blindness modes, and test higher-contrast options.
Inspect
Open tool

SVG cleanup and optimization

Clean and minify SVG markup so files are easier to ship, embed, and maintain.

Minifier
Minify SVG markup to reduce file size while preserving visual appearance.
Optimize
Open tool
Cleaner
Clean SVG files by removing metadata, comments, unnecessary attributes, and extra markup.
Optimize
Open tool

Base64 and color tools

Encode or decode SVG Base64 data, generate data URLs, and pick or extract colors from graphics.

SVG -> Base64
Encode SVG as Base64 for embedding in CSS, HTML, image tags, or data URLs.
Base64
Open tool
Base64 -> SVG
Decode Base64 or SVG data URLs back into SVG source you can preview, copy, and download.
Base64
Open tool
Color Picker
Pick colors and extract palettes from SVG, PNG, JPG, JPEG, or WebP with HEX, RGB, and HSL output.
Color
Current tool

Follow i🩵SVG On Social Media