SVG Color Formats — Hex vs RGB vs HSL
SVG supports hex (#FF0000), RGB (rgb(255,0,0)), HSL (hsl(0,100%,50%)), and named colors (red). Here's which format to choose for different SVG use cases.
Color Format Options in SVG
SVG accepts all standard CSS color formats for fill and stroke values.
- Hex: fill='#3b82f6' — most common, compact, widely used in design tools
- RGB: fill='rgb(59, 130, 246)' — readable decimal format
- HSL: fill='hsl(217, 91%, 60%)' — useful for systematic color design (theme shifts)
- Named: fill='red' — 140 CSS named colors supported, for simple designs only
- CSS variable: fill='var(--brand-color)' — dynamic, themeable, modern best practice
Best Practices for SVG Color Formats
Choose the format based on your SVG use case.
- Web SVG: use CSS variables (var(--color)) for theming, fallback hex for compatibility
- Craft cutter SVG (Cricut/Silhouette): use hex — design software reads hex accurately
- Exported SVG from Illustrator: hex (Illustrator outputs hex by default)
- Handcoded SVG: HSL for systematic palette design; hex for copying from design tools
- Email SVG: hex only — CSS variables don't work in most email clients
Frequently Asked Questions
Does SVG support rgba (transparent colors)?
Yes — SVG supports rgba() for semi-transparent fills: fill='rgba(59,130,246,0.5)'. You can also use fill-opacity='0.5' separately with any color format. Both methods produce semi-transparent SVG elements.
Should I use currentColor in SVG icons?
Yes — currentColor is the most flexible SVG icon color value. It inherits the CSS color property of the parent element, making icons trivially styleable with CSS: .icon { color: #3b82f6; } colors all currentColor fills in that icon.
Can I use CSS custom properties in SVG fill attributes?
Yes for inline SVG. Use fill='var(--brand-color)' in inline SVG and the variable resolves from the document's CSS. For external SVG files loaded as images: CSS variables from the document don't cascade in — use inline SVG for dynamic color control.
What color format does imagetosvg.com output?
imagetosvg.com outputs hex color codes for SVG paths. These are directly editable in Inkscape, Cricut Design Space, and any SVG editor. You can change hex values to CSS variables or other formats in any text editor post-conversion.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free