This filter changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color.

Usage context

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:

<animate>, <set>


<svg width="100%" height="100%" viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"

  <text x="70" y="50">Reference</text>
    <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" />

  <text x="70" y="120">matrix</text>

  <filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />

  <g filter="url(#colorMeMatrix)">
    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />

  <text x="70" y="190">saturate</text>

  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
      values="0.2" />

  <g filter="url(#colorMeSaturate)">
    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />

  <text x="70" y="260">hueRotate</text>

  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
      values="180" />

  <g filter="url(#colorMeHueRotate)">
    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />

  <text x="70" y="320">luminanceToAlpha</text>

  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
      type="luminanceToAlpha" />

  <g filter="url(#colorMeLTA)">
    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />

The rendering for this example is:

ScreenshotLive sample


Global attributes

Specific attributes

DOM Interface

This element implements the SVGFEColorMatrixElement interface.


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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

Document Tags and Contributors

 Contributors to this page: Sebastianz, erickj, kscarfone, trevorh, Jeremie, Manuel_Strehl
 Last updated by: Sebastianz,