Color me impressed

Among the primitives available in the <filter> element, feColorMatrix looks refreshingly simple, both in purpose and function.

You benefit from knowing about matrix algebra, but the syntax is clear and intuitive. And at the end of the day, you need only to trust your better judgment to appreciate the result.

Take an <svg> element, detailing a crisp, pixelated graphic. You can set the color of its many shapes with the fill or stroke attribute.

<path stroke="hsl(85 6% 62%)" d="M 16 0 h 18 ..." />
<path stroke="hsl(83 10% 42%)" d="M 34 0 h 1 ..." />

This sets you up with one visual and precise colors. What feColorMatrix allows is to tweak the design, tweak the appearance by changing the colors down to the smallest unit, down to the single pixel.

<filter id="color-filter">
	<feColorMatrix type="" values="" />
</filter>

<g filter="url(#color-filter)">
	<!-- ...paths -->
</g>

The element takes the source graphic and returns an output image, updated per at least two attributes: type and values. And the two open a lot of possibilities with even the most basic instructions.

With a type of saturate change the saturation.

<feColorMatrix type="saturate" values="1" />

A value of 1 leaves the shapes untouched, while greater numbers increase the saturation. Smaller numbers strip out the color, until a value of 0 which removes every hue.

<feColorMatrix type="saturate" values="0" />

Your precious picture goes back in time, essentially grayscale.

With a type of hueRotate spin the colors around the color wheel.

<feColorMatrix type="hueRotate" values="120" />

The number rotates the hues in the 0 to 360 range, through red, green and blue.

<feColorMatrix type="hueRotate" values="240" />

Your red-infused sprite moves between versions, exploring the luminous spectrum.

The two operations are immediate, and already allow for intriguing changes. For a more refined touch, however, the primitive supports yet another type: matrix.

<feColorMatrix
	type="matrix"
	values="
		r1 r2 r3 r4 r5
		g1 g2 g3 g4 g5
		b1 b2 b3 b4 b5
		a1 a2 a3 a4 a5
	"
/>

In the values attribute you add a string of 20 numbers. Numbers you can arrange in four neat rows to modify four distinct channels: red, green, blue and alpha.

Technically, the values are piped in a larger matrix, and multiplied with the existing channels to obtain a new set of values. For every pixel.

\begin{matrix} R' \\ G' \\ B' \\ A' \\ 1 \end{matrix} = \begin{matrix} r_{1} & r_{2} & r_{3} & r_{4} & r_{5} \\ g_{1} & g_{2} & g_{3} & g_{4} & g_{5} \\ b_{1} & b_{2} & b_{3} & b_{4} & b_{5} \\ a_{1} & a_{2} & a_{3} & a_{4} & a_{5} \\ 0 & 0 & 0 & 0 & 1 \end{matrix} * \begin{matrix} R \\ G \\ B \\ A \\ 1 \end{matrix}

And in detail, each value is found multiplying all possible channels with the chosen weights.

R' = r_{1} * R + r_{2} * G + r_{3} * B + r_{4} * A + r_{5}

This means one of two things: an identity matrix, composed of 1s along the diagonal, leaves the picture unstyled. Similarly to the saturate filter with value of 1.

<feColorMatrix
	type="matrix"
	values="
		1 0 0 0 0
		0 1 0 0 0
		0 0 1 0 0
		0 0 0 1 0
	"
/>

A different string, increasing the weights of only one channel, updates the picture with a specific hue.

<feColorMatrix
	type="matrix"
	values="
		1 1 1 0 0
		0 1 0 0 0
		0 0 1 0 0
		0 0 0 1 0
	"
/>

This is similar to hueRotate, but more nuanced, more subtle. And instead of relying on logic alone, it is something you have to explore and judge for yourself.

Color matrix Game Boy Red Green Blue

Tints of your journey await!