How do I grayscale SVG colors?

Click Grayscale. Each parseable fill, stroke, and stop-color is rewritten to a gray hex from Rec. 601 luminance (0.299R + 0.587G + 0.114B). none, currentColor, and url(#) stay.

How is grayscale different from converting colors to currentColor?

currentColor (and the old monochrome URL) makes paints inherit CSS color. Grayscale keeps hardcoded hex — a dark red becomes dark gray, a yellow becomes light gray.

Does grayscale invert the palette?

No. Invert SVG Gradient Colors reverses stop order/colors on a gradient. This page only drops saturation. Darken / Lighten keep hue.

Are gradient stop-colors converted to gray too?

Yes. stop-color on linearGradient and radialGradient is included. Mask and clipPath internals are skipped so luminance masks stay white/black.

Grayscale SVG Colors — Free Tool

FAQ

Quick answers

How do I grayscale SVG colors?: Click Grayscale. Each parseable fill, stroke, and stop-color is rewritten to a gray hex from Rec. 601 luminance (0.299R + 0.587G + 0.114B). none, currentColor, and url(#) stay.
How is grayscale different from converting colors to currentColor?: currentColor (and the old monochrome URL) makes paints inherit CSS color. Grayscale keeps hardcoded hex — a dark red becomes dark gray, a yellow becomes light gray.
Does grayscale invert the palette?: No. Invert SVG Gradient Colors reverses stop order/colors on a gradient. This page only drops saturation. Darken / Lighten keep hue.
Are gradient stop-colors converted to gray too?: Yes. stop-color on linearGradient and radialGradient is included. Mask and clipPath internals are skipped so luminance masks stay white/black.

Darken colors → Lighten colors → Colors → hex → Colors → currentColor →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Grayscale SVG Colors

Live preview