How to Use SVG feColorMatrix  Color Effects in SVG Filters
SVG feColorMatrix transforms element colors  apply grayscale, sepia, hue rotation, or any custom color matrix transformation to SVG content.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG feColorMatrix Type Values
feColorMatrix has four shorthand types: `matrix` (full 4×5 matrix), `saturate` (0=grayscale, 1=original), `hueRotate` (0–360 degree hue shift), and `luminanceToAlpha` (converts brightness to alpha).
- saturate: <feColorMatrix type='saturate' values='0'/> → grayscale
- hueRotate: <feColorMatrix type='hueRotate' values='180'/> → hue flip
- matrix: full 5×4 color transform for custom effects
Creating Sepia and Color Shift Effects
For sepia, use the standard sepia matrix values that blend red, green, and blue channels toward warm brown tones. Animate the `values` attribute with CSS or SMIL for dynamic color shift effects.
- Sepia matrix values: 0.393 0.769 0.189 0 0 / 0.349 0.686 0.168 0 0 / ...
- Animate hueRotate values for rainbow color shift
- Combine with feGaussianBlur for hazy color effects
Frequently Asked Questions
How do I make an SVG element grayscale with feColorMatrix?
Apply <feColorMatrix type='saturate' values='0'/> inside a filter. This fully desaturates the element to grayscale. values='0.5' produces 50% saturation.
Can feColorMatrix be used to invert SVG colors?
Yes  use the matrix type with a specific matrix that negates RGB values: -1 0 0 0 1 / 0 -1 0 0 1 / 0 0 -1 0 1 / 0 0 0 1 0 for color inversion.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG