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

ScreenshotLive sample

## Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of '<feColorMatrix>' in that specification.
Working Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<feColorMatrix>' in that specification.
Recommendation Initial definition

## Browser compatibility

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

### Legend

Full support
Full support
Compatibility unknown
Compatibility unknown