I am planning to change the color of a video. I want user to pass the the css hex color and the video need to inherit the color.
This is the screenshot of the original video color
I use the filter css style like this => style={{ filter: 'sepia(20) hue-rotate(150deg)' }} to get blue color like this
But I want user to pass their favorite color and show that color in video. User can pass the hex color value. Is there any way that I can do this using the css in react
Although sepia is sometimes defined as having a hue at 30° on the HSV color wheel, when applied as a CSS filter the result can vary anywhere from 30° to 60° depending on the input color.
However, in practice I've found that if you assume a hue of around 50° it works pretty well for faking a tint.
To do this, you first convert your input color from hex to HSV using something like this: How do you get the hue of a #xxxxxx colour?
Then, find the difference between the target hue and 50°. For instance, if the target is 210° blue, the difference is 210 - 50 = -160.
Then use that difference as a hue-rotate value in your filter list, after first converting to sepia:
filter: sepia(1) hue-rotate(-160deg)
Or, you can could use a calc and update the filter value inline, with something like:
filter: sepia(1) hue-rotate(calc(210deg - 50deg))
(Note: You may need to adjust saturate or contrast to get the effect you want.)
(Also: make sure the version of React you are using supports css filters.)
