How do I convert SVG named colors to hex?

Click Convert names. fill, stroke, and stop-color written as CSS names (red, crimson, rebeccapurple, …) become #RRGGBB. none, currentColor, and url(#) stay.

How is this different from Convert SVG Colors to Hex?

The all-notation page also rewrites rgb(), hsl(), and 3-digit #RGB. This page only bakes names so a mixed file can keep rgb() or already-hex paints.

Does a name like red match #ff0000 on the hex page only?

The all-hex tool would rewrite both. Here #ff0000 and rgb(255,0,0) are left alone; only the token red is replaced. Replace SVG Color if you need to retarget one hex everywhere.

Are gradient stop-color names converted too?

Yes. Named stop-color on linearGradient and radialGradient becomes hex. Paints inside mask, clipPath, pattern, and marker are skipped so luminance masks can keep keyword white/black.

Convert SVG Named Colors to Hex — Free Tool

FAQ

Quick answers

How do I convert SVG named colors to hex?: Click Convert names. fill, stroke, and stop-color written as CSS names (red, crimson, rebeccapurple, …) become #RRGGBB. none, currentColor, and url(#) stay.
How is this different from Convert SVG Colors to Hex?: The all-notation page also rewrites rgb(), hsl(), and 3-digit #RGB. This page only bakes names so a mixed file can keep rgb() or already-hex paints.
Does a name like red match #ff0000 on the hex page only?: The all-hex tool would rewrite both. Here #ff0000 and rgb(255,0,0) are left alone; only the token red is replaced. Replace SVG Color if you need to retarget one hex everywhere.
Are gradient stop-color names converted too?: Yes. Named stop-color on linearGradient and radialGradient becomes hex. Paints inside mask, clipPath, pattern, and marker are skipped so luminance masks can keep keyword white/black.

Colors → hex → Replace color → Colors → CSS variables → Colors → currentColor →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Convert SVG Named Colors to Hex

Live preview