I have a site that allows users to perform live editing of custom CSS in a sandbox to style elements in a document. I provide some logos/background graphics. One common request users have is to be able to easily change color of those graphics on the page (i.e, change a logo/photo from red to blue, make it darker/lighter, etc.)
It's fairly simple to have them type filter:brightness(50%) or whatever to change lightness, and filter: hue-rotate(90deg) to change hue, but arriving at a target hex value in this way is not intuitive. Unless there is some secret colorize filter I don't know about.
My goal is to intercept a custom CSS variable --myColor and do some JS to supply the required CSS functions before insertion into the DOM (I already do other pre-processing on the CSS in a similar way). This works fine, I'm just struggling with the math. If a user specifies a hex value, assuming the base image is mostly Red 255, 0, 0 (and assuming other colors don't matter, i.e., a red image with blue highlight might turn into a yellow image with green highlight. That's fine). What is the calculation to turn a target #ABCDEF into the relevant hue-rotate/brightness/etc. filters to make Red that into that target color? There is a similar question that turns black into any color here but obviously that has different steps to get working.
