<feColorMatrix>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.

Usage context

CategoriesPermitted content

Filter primitive element

Any number of the following elements, in any order:
<animate>, <set>

Attributes

in
type: Values include matrix, saturate, hueRotate, and luminanceToAlpha
values: The value for the matrix type set in the type attribute
Filter primitive attributes: x, y, width, height, result

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Oct 27, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

<feColorMatrix>

In this article

Usage context

Attributes

DOM Interface

Example

SVG

Result

Specifications

Browser compatibility

See also

Help improve MDN