How do I lighten SVG colors?

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

How is lightening different from darkening SVG colors?

Darken mixes toward black. Lighten mixes toward white. Both keep hue; neither converts to gray. Use Grayscale SVG Colors to drop saturation.

Does lighten turn fills into white only?

No. Amount 30% pulls 30% of the way to white, so a navy becomes a lighter blue. 90% is almost white; it is not a hard #fff replace.

Are currentColor and url() paints left alone when lightening?

Yes. Inheritance and gradient references stay. Stop-color inside the gradient def is lightened; the url(#id) pointer on a shape is not rewritten.

Lighten SVG Colors — Free Tool

FAQ

Quick answers

How do I lighten SVG colors?: Set Amount and click Lighten. Each parseable fill, stroke, and stop-color is mixed toward #ffffff by that percent. none, currentColor, and url(#) stay.
How is lightening different from darkening SVG colors?: Darken mixes toward black. Lighten mixes toward white. Both keep hue; neither converts to gray. Use Grayscale SVG Colors to drop saturation.
Does lighten turn fills into white only?: No. Amount 30% pulls 30% of the way to white, so a navy becomes a lighter blue. 90% is almost white; it is not a hard #fff replace.
Are currentColor and url() paints left alone when lightening?: Yes. Inheritance and gradient references stay. Stop-color inside the gradient def is lightened; the url(#id) pointer on a shape is not rewritten.

Grayscale colors → Darken colors → Colors → hex → Colors → currentColor →

Privacy Terms

Source

Amount

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Lighten SVG Colors

Live preview