Use the hue-rotate() function to apply a hue rotation on an image. The CSS hue-rotate() function is used with the filter property to apply a hue rotation an image. A hue rotation is where you specify an angle around the color circle that the input samples will be adjusted by.
The hue-rotate() CSS function rotates the hue of an element and its contents.
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.
The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a <filter-function> .
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color - you can't saturate or rotate it. You'll have to "colorize" it somehow, and the sepia filter is the only filter which do some form of colorizing.
It would be easier if your image was pure 100% red. Then you could just add the target degree directly and adjust saturation and lightness using HSL for target. For a white color start point the first step is to convert and define an intermediate color so we can saturate and rotate it later on.
Lets first darken the white image and apply sepia to get a "base" color we can work with:
filter: brightness(50%) sepia(1);
This will produce RGB color value of approximately:
rgb(178, 160, 128)
Step two is to convert that to HSL color-space which gives us:
hsl(38, 24.5%, 60%);
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: brightness(50%) sepia(1);
filter: brightness(50%) sepia(1);
}
<div></div>
These two first steps are static and its result will be reused every time we need to find a target adjustment (the actual value of sepia is defined in the SVG Filters specification).
Now we need to calculate what we need to apply to this base color to get target color. First convert target color, for example #689d94 as given in the question, to HSL:
hsl(170, 21.3%, 51.2%);
Then we have to calculate the difference between those. Hue is calculated by simply subtracting base from target. The same for Saturation and Lightness, but as we assume 100% of the base value we need to subtract the result from 100% to end up with a diff for the accumulated values:
H: 170 - 38 -> 132°
S: 100 + (24.5 - 21.3) -> 103.2% (relative to base 100% = 3.2%)
L: 100 + (51.2 - 60.0) -> 91.2% (relative to base 100% = -8.8%)
Convert those values to a filter-string by appending it to the existing filter, then set it on the div:
/* ------ base color ------ ------- new target -------------------------------*/
filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
And to set it you would probably do something like this assuming filter and divElement are already declared:
...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;
Note that there is likely rounding errors as RGB is represented as integer, while HSL is floating point, so the actual result may not be exact, but it should get pretty close.
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
background-size:5em;
width:5em;
height:5em;
-webkit-filter:
brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
filter:
brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}
<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
Viable alternative options are:
The accepted answer is wrong. Hue-rotate does not conserve saturation or brightness and you have to do crazy math to come up with the correct values. The far easier way - which will result in a correct result - is to do a CSS filter that references an SVG filter. The feColorMatrix primitive in SVG filters allows you to pick a color directly - like so. Take your color #424242 - divide each color's hex value by #FF (.257) and put them in the fifth column, first three rows of your color matrix. Like so:
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: url(#colorize);
filter: url(#colorize);
}
<div>
</div>
<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
0 0 0 0 .257
0 0 0 0 .257
0 0 0 1 0"/>
/filter>
</defs>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With