Css 如何计算生成特定颜色所需的色调旋转？
我有一个白色的图像，我正在使用作为一个div的背景，我想颜色匹配的主题主色。我知道我可以做到：Css 如何计算生成特定颜色所需的色调旋转？,css,css-filters,Css,Css Filters,我有一个白色的图像，我正在使用作为一个div的背景，我想颜色匹配的主题主色。我知道我可以做到： filter: sepia() saturate(10000%) hue-rotate(30deg); 并循环通过色调旋转查找颜色，但是否可以提前计算该值？鉴于指定的十六进制值非常暗，我想我还需要包含invert（%）过滤器 给定一个十六进制值689d94我需要做什么数学运算来计算所需的色调旋转和反转值以将白色背景图像转换为相同的颜色 编辑 下面是一个div的片段，白色背景图像被过滤成绿色。这里的诀
filter: sepia() saturate(10000%) hue-rotate(30deg);
色调旋转invert（%）689d94色调旋转反转divdivdivdiv{
背景：url(http://richard.parnaby-king.co.uk/basket.svg)不重复滚动0 0透明；
背景尺寸：5em；
宽度：5em；
身高：5公分；
-webkit过滤器：倒置（25%）深褐色（）饱和（100000%）色调旋转（174度）；
过滤器：倒置（25%）深褐色（）饱和（100000%）色调旋转（174度）；
}在这种情况下，关键是定义初始颜色。从技术上讲，白色、黑色或任何灰度都是真实的颜色——你不能使其饱和或旋转。你必须以某种方式对其进行“着色”，而乌贼墨过滤器是唯一能够进行某种着色的过滤器 如果您的图像是纯100%红色，则会更容易。然后您可以直接添加目标度数，并使用HSL为目标调整饱和度和亮度。对于白色起始点，第一步是转换和定义中间颜色，以便稍后对其进行饱和和旋转 让我们先将白色图像变暗，然后应用深褐色，以获得我们可以使用的“基本”颜色：
过滤器：亮度（50%）深褐色（1）；
rgb（178160128）
hsl（38,24.5%，60%）；
div{
背景：url(http://richard.parnaby-king.co.uk/basket.svg)不重复；
背景尺寸：5em；
宽度：5em；
身高：5公分；
-webkit过滤器：亮度（50%）深褐色（1）；
滤光片：亮度（50%）乌贼墨（1）；
}var imgg=document.getElementById（“路径”）；
imgg.style=“填充：#4242”；
公认的答案是错误的。色调旋转不保存饱和度或亮度，您必须进行疯狂的数学运算才能得出正确的值。更简单的方法——这将产生正确的结果——是做一个引用SVG过滤器的CSS过滤器。SVG过滤器中的feColorMatrix原语允许您直接选择颜色，就像这样。取你的颜色#424242-将每种颜色的十六进制值除以#FF（.257），然后将它们放在第五列，颜色矩阵的前三行。像这样：
div{
背景：url(http://richard.parnaby-king.co.uk/basket.svg)不重复滚动0 0透明；
背景尺寸：5em；
宽度：5em；
身高：5公分；
-webkit筛选器：url（#着色）；
过滤器：url（#彩色化）；
}
/过滤器>