12

I have a flat red .png image that I am wanting to change to a specific colour by using CSS filters. I think this is the best approach.

I'm using SASS and by using this I can get the hue, saturation and lightness of a colour. By using a 'red' image it would mean that the rotation degree of the hue is starting at 0 so by using hue-rotate I would then rotate it, from 0, to the hue degree of the specific colour. Same with saturation and lightness.

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

This outputs as:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); and if I check what the HSL of the specific colour is...

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

However when applying this the image is super dark. Looks like the right hue but the saturation and brightness is wrong?

Any thoughts on where I am doing wrong? I had a look at this example: How to calculate required hue-rotate to generate specific colour? but seems to give me the same issue.

https://jsfiddle.net/gosj0ur2/

John the Painter
  • 2,495
  • 8
  • 59
  • 101
  • Can you create a [mcve] that demonstrates the issue? Particularly the compiled CSS. Also, are you sure you're viewing this on a browser that can handle the filter property? Not all browsers can. – Mr Lister Jun 19 '17 at 18:36
  • @MrLister Thanks, will do! And yes don't worry re filter... I'll supply fallbacks. – John the Painter Jun 19 '17 at 19:11
  • 1
    I'm not really proficient in HSL, so I can't provide a complete solution, but one problem is that the `brightness` function is a multiplier, so, therefore what you are actually doing is multiply the brightness of the original red (which is 31%), by 60%. but you really should be multiplying by 194% if you want to end up with 60% in absolute terms! – Mr Lister Jun 20 '17 at 08:48
  • [Here](https://jsfiddle.net/MrLister/gosj0ur2/2/) is a new fiddle with an extra box with the correct brightness value. I haven't been able to find out why the hue is still off though, so not posting as an answer. – Mr Lister Jun 20 '17 at 08:50
  • Isn't HSL for red 0,100,100 though? Where did you get 31% for the red from? – John the Painter Jun 20 '17 at 12:29
  • 1
    31% is the luminosity for the red color channel in an RGB system. So a relative brightness of 31% (relative to 100% for pure white), which is not the same as the lightness in the HSL notation. But as I said, I'm not a HSL expert, and I can't seem to produce the same color by experimenting with the CSS functions in the fiddle. – Mr Lister Jun 20 '17 at 12:36
  • Have you looked at [Why doesn't hue rotation by +180deg and -180deg yield the original color?](https://stackoverflow.com/a/19325417/1942033) – woestijnrog Jun 23 '17 at 10:35

2 Answers2

1

If the objective is simply to change the color of an image from red to some other specific color, you could use CSS pseudo selectors to create a kind of overlay, so you don't need to fiddle with filters. Something like this, perhaps:

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}
<div class='boo'></div>

https://codepen.io/thebabydino/pen/AtzpB

In your case, you wouldn't have a picture of a cat... and the overlay wouldn't be semi-transparent, it would be completely opaque (just change the last param input for the RGBA value).

Is that what you're looking for, or do you specifically need to use filters?

Pablo Lozano
  • 10,122
  • 2
  • 38
  • 59
David
  • 1,620
  • 3
  • 20
  • 39
0

As was pointed out in "Why doesn't hue rotation by +180deg and -180deg yield the original color?" the filters do not actually follow the HSL color space. I tried matching the color manually: I got my best results from the following values: hue-rotate(174deg) saturate(64%) brightness(224%).

Brightness is not at all the same as lightness. Lightness is a scale that runs from 0 (black) to 50% (pure color) to 100% (white). Brightness is a multiplier of the R, G, and B values, so Brightness(0) creates black, Brightness(1) leaves the color unmodified, but brightness(2) just doubles each of the RGB values. There is no simple formula to go from one to the other.

I'm unclear why you're trying to create colors in the manner you are, but I would suggest an alternate approach. jQuery UI, for example, allows you to animate color changes, if that is your intention; to visually change your flat red .png to a different color, you could simply create an overlay in the desired color and animate its opacity from zero to one. If this doesn't help, please add more details about what you are hoping to accomplish and why.

WahhabB
  • 520
  • 3
  • 8