2

我有一张纯红色的图像，#FF0000。我的目标是将其更改为#1100FF。

就在几周前，我了解到我们在 CSS3 中具有着色/过滤功能。它工作得很好，但是图像的最终颜色不是#1100FF。我通过 Chrome 工具“真棒颜色选择器”检查颜色

所以我怎么做是你必须要问的。

function RGB_TO_HSV($R, $G, $B)    // RGB values:    0-255, 0-255, 0-255
                    {                                // HSV values:    0-360, 0-100, 0-100
                        $HSL = array();
                        // Convert the RGB byte-values to percentages
                        $R = ($R / 255);
                        $G = ($G / 255);
                        $B = ($B / 255);

                        $maxRGB = max($R, $G, $B);
                        $minRGB = min($R, $G, $B);
                        $chroma = $maxRGB - $minRGB;

                        $computedV = 100 * $maxRGB;

                        if ($chroma == 0)
                        {
                            $HSL['H']= "0deg";
                            $HSL['S']= "0%";
                            $HSL['V']= (3*$computedV)."%";
                            return $HSL;
                        }
                        $computedS = 100 * ($chroma / $maxRGB);

                        if ($R == $minRGB)
                            $h = 3 - (($G - $B) / $chroma);
                        elseif ($B == $minRGB)
                            $h = 1 - (($R - $G) / $chroma);
                        else // $G == $minRGB
                            $h = 5 - (($B - $R) / $chroma);

                        $computedH = 60 * $h;
                        $HSL['H'] = $computedH."deg";
                        $HSL['S'] = $computedS."%";
                        $HSL['V'] = $computedV."%";

                        return $HSL;
                    }

然后在 CSS 中，我这样做：

img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);}

现在请告诉我如何才能达到所需的颜色？我是否需要添加或减去原始颜色（即#FF0000）以获得所需的颜色或我使用的代码不正确或什么？

输出颜色为：#0F2DFF

编辑：没有限制图像的颜色是#FF0000。只要我可以准确地将图像着色为任何颜色，我就可以更改它。

4

2 回答 2

0

这似乎是一个 webkit 或 css 错误：https ://code.google.com/p/chromium/issues/detail?id=237524 或者 至少它背后的数学变换不像直接改变色调那么简单。在此示例中可以很容易地观察到这一点：

<div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%)">Original</div>
<div style="width: 200px; height: 100px; color:#333; background-color: hsl(200,100%,50%)">Expected</div>
<div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%); -webkit-filter: hue-rotate(100deg);">Filtered</div>

现场演示

因此，我认为如果不对 webkit 算法进行一些疯狂的逆向工程，就不可能将一种颜色精确地转换为另一种颜色。

于 2013-08-21T18:47:31.127 回答
0

我同意乔拉姆的观点。它没有按预期工作。

我最好的朋友是 CSS 形状技术。我在 css 中制作了形状并将其着色为我喜欢的任何颜色，它是像素完美的。虽然这需要一些时间，但这是值得的，而且比浪费时间在过滤技术上有效得多。

我厌倦了半生不熟的标准。: (

于 2013-08-23T10:43:17.167 回答