This year I’ve been lucky enough to be part of the team building the Red Hat keynote demo at Red Hat Summit.
The presentation ended up dynamically building a picture mosaic of the Red Hat logo out of selfies taken by the audience. It was an impressive visualisation that I helped Brian Leatheam create.
Mapping an image and building a mosaic following some CSS filters and blend modes took about 3 days to a skilful DOM manipulator like Brian.
But we’ve spent at least a moth iterating on designs details, trying new animations and optimising the performance.
During one of those iterations, and aiming to achieve good performance and smooth animation we’ve tried SVGs instead of HTML images. That also implied changing our CSS blend modes to an SVG filter, in this case the
The feColorMatrix SVG filters
This filter is really powerful and allows granular per channel color manipulation, kinda like editing the channels on Photoshop.
RGBA to feColorMatrix
Color manipulation with
feColorMatrix seems limitless, I could colorise an element any way I wanted. But what I needed for the mosaic was to reproduce an exact RGB value into the color matrix, and that was tricky.
It’s not a common problem to have, no one was asking about it on StackOverflow. But the answer was simple.
Since RGB are based on a 255 scale, I just needed to divide the RGB value by 255 and I get the matrix value for each channel.
For example RGB
255, 255, 255 becomes:
1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
255, 0, 0 becomes:
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
And a pink
255, 30, 150 becomes:
1 0 0 0 0 1.22 0 0 0 0 0.59 0 0 0 0 1
Now that I had the math sort out it was easy to colorise our mosaic.
Sharing is caring
In the very odd chance that there is someone else out there trying to transform an an RGA value into a color matrix, I set myself to build an RGBA to feColorMatrix converter.
Thanks to Patrick this converter is now an even cooler project.
This project is open and you can do whatever you want with it.
The source code for the webcomponent is here.
And you can use it here.