RGBA to feColorMatrix converter

feColorMatrix is an SVG filter that 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.

This filter is really powerful and allows granular per channel color manipulation. Una Kravets wrote an excellent article explaining how to use it.

Scope

This project aims to easily translate an RGBA value into an SVG color matrix.

Bare in mind you can do much more than this with the matrix, but if you want to colorize an SVG element following an exact RGBA value, then this converter will help you out.

Web Component

This project makes use of the awesome polymer project.

rgba-matrix element has the following attributes:

<rgba-matrix r="1" g="1" b="1" a="1"></rgba-matrix>

The polymer element exposes a set matrix method for setting rgba values:

document.querySelector('rgba-matrix').setMatrix(r,g,b,a);

RGB Values will be converted to decimal from 0 to 255.

Example:

document.querySelector('rgba-matrix').setMatrix(100,200,300,0.5);

Will result in:

<rgba-matrix r="0.39" g="0.78" b="1.18" a="0.5"></rgba-matrix>

Development

You’ll need npm to install the dev dependencies. First make sure you have node installed on your system.

1. To install the dependencies run:

npm install

2. To start a server and sass compiler, run:

gulp

3. Open http://localhost:3000/ :tada:

Enjoy!

Appreciation

Thanks to Brian Leathem, Patrick Riley and the Red Hat UXD team for the breakaway sprint :smile: