<feColorMatrix>

The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'].

Note: The prime symbol ' is used in mathematics indicate the result of a transformation.

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1 |   | 1 |

In simplified terms, below is how each color channel in the new pixel is calculated. The last row is ignored because its values are constant.

R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5

Take the amount of red in the new pixel, or R':

It is the sum of:

r1 times the old pixel's red R,
r2 times the old pixel's green G,
r3 times of the old pixel's blue B,
r4 times the old pixel's alpha A,
plus a shift r5.

These specified amounts can be any real number, though the final R' will be clamped between 0 and 1. The same goes for G', B', and A'.

R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]

If, say, we want to make a completely black image redder, we can make the r5 a positive real number x, boosting the redness on every pixel of the new image by x.

An identity matrix looks like this:

     R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |

In it, every new value is exactly 1 times its old value, with nothing else added. It is recommended to start manipulating the matrix from here.

Usage context

Categories	Filter primitive element
Permitted content	Any number of the following elements, in any order: `<animate>`, `<set>`

Attributes

Global attributes

Specific attributes

in
type
values

DOM Interface

This element implements the SVGFEColorMatrixElement interface.

Example

SVG

<svg width="100%" height="100%" viewBox="0 0 150 500"
    preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- identity matrix -->
  <filter id="colorMeTheSame">
    <feColorMatrix in="SourceGraphic"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0" />
   </filter>
  <use href="#circles" transform="translate(0 70)" filter="url(#colorMeTheSame)" />
  <text x="70" y="120">Identity matrix</text>

  <!-- Combine RGB into green matrix -->
  <filter id="colorMeGreen">
    <feColorMatrix in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0
                1 1 1 1 0
                0 0 0 0 0
                0 0 0 1 0" />
  </filter>
  <use href="#circles" transform="translate(0 140)" filter="url(#colorMeGreen)" />
  <text x="70" y="190">rgbToGreen</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="0.2" />
  </filter>
  <use href="#circles" transform="translate(0 210)" filter="url(#colorMeSaturate)" />
  <text x="70" y="260">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
        type="hueRotate"
        values="180" />
  </filter>
  <use href="#circles" transform="translate(0 280)" filter="url(#colorMeHueRotate)" />
  <text x="70" y="330">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
        type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
  <text x="70" y="400">luminanceToAlpha</text>
</svg>

Result

Screenshot	Live sample

Specifications

Specification
Filter Effects Module Level 2 (Filter Effects 2) # feColorMatrixElement

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`feColorMatrix`	Yes	12	Yes	Yes	Yes	?	Yes	Yes	Yes	?	?	Yes
`in`	Yes	12	Yes	Yes	Yes	?	Yes	Yes	Yes	?	?	Yes
`type`	Yes	12	Yes	Yes	Yes	?	Yes	Yes	Yes	?	?	Yes
`values`	Yes	12	Yes	Yes	Yes	?	Yes	Yes	Yes	?	?	Yes