How do I darken SVG colors?

Set Amount and click Darken. Each parseable fill, stroke, and stop-color is mixed toward #000000 by that percent. none, currentColor, and url(#) stay.

How is darkening different from a grayscale conversion?

Grayscale drops hue to gray. Darken keeps the hue and only pulls the mix toward black — a sky blue stays blue, just darker.

Does darken add an inner-shadow filter?

No. Inner shadow is a filter on the shape. This page only rewrites paint hex. Add SVG Inner Shadow if you want an inset shade, not darker fills.

Can I darken more than once?

Yes. Each click mixes from the current paints, so a second pass is darker still. Lighten SVG Colors is the opposite mix toward white.

Darken SVG Colors — Free Tool

FAQ

Quick answers

How do I darken SVG colors?: Set Amount and click Darken. Each parseable fill, stroke, and stop-color is mixed toward #000000 by that percent. none, currentColor, and url(#) stay.
How is darkening different from a grayscale conversion?: Grayscale drops hue to gray. Darken keeps the hue and only pulls the mix toward black — a sky blue stays blue, just darker.
Does darken add an inner-shadow filter?: No. Inner shadow is a filter on the shape. This page only rewrites paint hex. Add SVG Inner Shadow if you want an inset shade, not darker fills.
Can I darken more than once?: Yes. Each click mixes from the current paints, so a second pass is darker still. Lighten SVG Colors is the opposite mix toward white.

Grayscale colors → Lighten colors → Colors → hex → Colors → currentColor →

Privacy Terms

Source

Amount

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Darken SVG Colors

Live preview