During a recent client project, our team stumbled upon an intriguing challenge that we thought could be both fascinating and useful to share. The mission was to enable clients to upload a color image and, at the same time, generate a monochrome version without complicating the uploading process.

We initially explored a grayscale approach, which seemed promising until we hit a roadblock with our client’s single-color logos having an unwanted green tint. Navigating through the complexities of greyscale and CSS filter adjustments proved to be a bit of a maze with no straightforward solution in sight.

During brainstorming sessions on possible solutions, we stumbled upon an interesting article by CSS-Tricks titled Monotone Image in CSS. The last option presented, SVG color filters, caught our attention. Successfully implementing this would allow us to control the red, green, and blue levels in the image, facilitating the desired hue adjustments.

Embarking on this endeavor, I dived into understanding the significance of each row in the SVG filter matrix. Initial attempts involved extracting the exact color hex code and RGB values, aiming to match these values in the filter. However, my attempts to leverage AI for color conversion didn’t quite pan out.

A breakthrough came when GitHub Copilot provided insights into the filter’s functionality, clarifying that an exact color match was unattainable due to the filter’s dependency on the original image’s color. This left me at a crossroads, unsure of how to proceed in achieving the desired color.

Our team collectively brainstormed and unraveled the intricacies of the SVG color filter. Each row in the matrix represents a color, with the fourth row dedicated to the Alpha channel. Columns within each row allow for positive numbers, influencing the output for each color. While this topic delves into the realms of algebra and demands a deep understanding, we grasped the fundamental concept – altering the red, green, and blue output to filter the colors of an image.

Now, you may wonder, how did we implement it? To simplify our task, we initially grayscale the image, creating a foundation akin to off-black. Applying mathematical calculations, we derived RGBA numbers matching the desired color, converted the percentage to a decimal, and added it to the fourth column. This addition influenced the output for red, green, and blue.

<svg class="defs-only">
    <filter 
        id="monochrome" 
        color-interpolation-filters="sRGB"
        x="0" y="0" 
        height="100%" 
        width="100%"
    >
        <feColorMatrix 
            type="matrix"
            values="1 0 0 0 0.078
                    0 1 0 0 0.212
                    0 0 1 0 0.175
                    0 0 0 1 0" 
        />
    </filter>
</svg>

Through iterative adjustments, we achieved the perfect color. Admittedly, the entire challenge could have been circumvented by directly editing the image or requesting the client to upload both versions. However, sometimes, diving down the rabbit hole opens doors to new insights. In this case, we unearthed a technique that may prove handy in future endeavors, potentially offering value to others. For a more in-depth exploration of the algebra and filter intricacies, refer to Color Filters Can Turn Your Gray Skies Blue on CSS-Tricks.