/SVG

# <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']`.

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 Any number of the following elements, in any order:``, ``

## 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"

<!-- 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

## Browser compatibilityUpdate compatibility data on GitHub

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