【发布时间】：2022-06-29 04:20:04
【问题描述】：
我打算更改视频的颜色。我希望用户传递 css 十六进制颜色，视频需要继承颜色。
我使用像这样的过滤器 css 样式 => style={{ filter: 'sepia(20) hue-rotate(150deg)' }} 来获得像这样的蓝色
但我希望用户传递他们最喜欢的颜色并在视频中显示该颜色。用户可以传递十六进制颜色值。有什么方法可以在 react 中使用 css 来做到这一点
【问题讨论】：
【发布时间】：2022-06-29 04:20:04
【问题描述】：
虽然棕褐色有时被定义为在 HSV 色轮上具有 30° 的色调，但当用作 CSS 过滤器时，结果可能会在 30° 到 60° 之间变化，具体取决于输入颜色。
但是，在实践中，我发现如果您假设色度约为 50°，它可以很好地伪装色调。
为此，您首先使用以下代码将输入颜色从十六进制转换为 HSV：How do you get the hue of a #xxxxxx colour?
然后，找出目标色调与 50° 之间的差异。例如，如果目标是 210° 蓝色，则差异为210 - 50 = -160。
然后在您的过滤器列表中使用该差异作为hue-rotate 值，首先转换为棕褐色：
filter: sepia(1) hue-rotate(-160deg)
或者，您可以使用calc 并内联更新过滤器值，例如：
filter: sepia(1) hue-rotate(calc(210deg - 50deg))
（注意：您可能需要调整saturate 或contrast 以获得您想要的效果。）
（另外：确保您使用的 React 版本支持 css 过滤器。）
【讨论】：