last day (16 days later) » 

1:01 AM
6
Q: How to transform black (#000) into a given color using only CSS filters

glebmMy question is: given a target RGB color, what is the formula to recolor black (#000) into that color using only CSS filters? The context for this is the need to recolor an SVG inside a background-image . In this case, it is to support certain TeX math features in KaTeX: https://github.com/Khan...

 
Not sure if it's a LERP, but yes I want to get to #RGB from #000 using CSS filters (sepia, hue-rotate etc).
I've updated the question with more resources on this that I've found
Thanks but I've seen it, it's the second link in "Resources", it has a problem as explained above.
All pixels are black (it doesn't matter what happens to the other pixels).
@vals Recoloring external SVGs in browsers that do not support mask-iamge.
 
Why from black ? Did you read any of your linked question ??? Let's take an extract from the last one where it states how sepia is calculated : "newRed: oldRed * 0.393 + oldGreen * 0.769 + oldBlue * 0.18". Black is all zeroes, and 0 * 0.393 + ... = ??? Why don't you use an prime instead ? But colorizing an svg like this sounds like an hack anyway, you stated in comments it's to improve browser support, but you'll support only 6 months of browser versions. To support the maximum, create a font from your monochrome svg, then just color: myfancycolor; + ::after{content:'\u4242;}
And if you really want hack because you're an hacker : gist.github.com/LeaVerou/5198257
 
@Kaiido, there is a link to a KaTex issue in the description if you want full detail. Black is a requirement (needs to be black for non-filter supporting browser fallback). A fixed list of colors is not an option. If you read the links in the Resources section you'll learn about the sepia filter which allows to get a non-black color from black. This is not an impossible problem, but it does require math skills to solve in a non-brute force way.
 
Which link exactly in this "Resources section" ? All I see are answers about white images, none starts from a black one.
 
white is just invert(100%)
 
1:13 AM
;-) you're right somehow I forgot about invert... Apologies.
But still, you'll make yourself an hard time to provide such an CSS way, for supporting only 6 months of browsers.
For your KaTex width issue, can't you generate inline svg instead of background-images? Simply link the original elements with `<use>` tags.
 
1:25 AM
Other solutions are possible (not the <use> one though), but that's not the question
If such a formula is implemented, it will be very useful in a lot of cases
The KaTeX issue is resolved by using mask-image and a hack to always render black for browsers that don't support it
For example, it will be possible to recolor images with partial transparency using only CSS
 
1) Good question, voted up
2) It is in the type "do my work instead me", thus it would be in theory offtopic
@glebm 3) I don't agree this rule, particularly in the case of interesting questions, and your is a highly interesting and useful one
4) The solution to your problem is lying really in the linear algebra, you have to translate the color into the predefined css filter directions
5) ...and then rotate it where you wish
6) I would happily do this for +500 rep
7) but probably I wouldn't get this +500
8) thus it doesn't deserve its price, to develop it would require too much work for a "maybe" +500
 
1:58 AM
@peterh 4) I've added an example implementation of hue-rotate in Ruby. There you can see the values are actually clamped. So non-linear and I'm not sure how to deal with that.
I can't put more than +500 rep on a question
The system doesn't let me
 
2:17 AM
@glebm Probably the transformation rules aren't specified exactly in the RGB space. There are very deep problems with the color spaces, it is similar what we have in the electonical music: actually, none of them is perfect, but all hi-fi fans have a strong concept what is the perfect in their mind only
@glebm Thus, I think the solution will be browser-dependent.
@glebm If at least some of the css transformation rules are linear, I am thinking it mainly to the HSV transformations, then your problem can be solved.
 
I know it's not what you are after, but still, I though I had to come up with something : jsfiddle.net/bq5hqhbp/1
 
2:34 AM
@peterh The actual approximations used by the browsers are part of the spec. I've added links to some browser implementations of hue-rotate
@Kaiido Wow, that looks great, thank you! Not sure if it can be adapted to the KaTeX case but seem so. Please submit an answer
@Kaiido it might even work on IE as IE has a DropShadow filter!
 
3:04 AM
@glebm I did undelete my answer but please give the bounty to Dave's answer, he provided far more work.
 

  last day (16 days later) »