为什么+ 180deg和-180deg的色调旋转不会产生原始颜色？

Question

通过阅读HSL/HSV色彩理论,我得到的印象是色调分量是一个循环属性,每360度重复一次,并且可以独立于饱和度和亮度/值进行更改.如果我错了,请纠正我,但这些陈述逻辑上遵循先前的定义:

1. 旋转色调360度产生相同的颜色
2. 将色调旋转180度两次产生原始颜色
3. 将色调旋转180度,然后旋转-180度,得到原始颜色

但是,只有选项1是正确的.旋转色调4次+90度会产生与原始颜色甚至不相似的颜色.

此外,使用-webkit-filter和SVG

<filter><feColorMatrix in="SourceGraphic" type="hueRotate" values="..." /></filter>

不要为相同的旋转产生相同的结果.另一方面,SVG过滤器生成的颜色在浏览器中是一致的.

是否存在色调旋转的"隐藏"属性,使操作不相关？

---

webkit过滤器和SVG的示例可以在这里找到:http://jsfiddle.net/maros_urbanec/ARsjb/5/

Answer 1

在CSS和SVG滤波器中,没有转换为HSV或HSL - hueRotation shorthands使用RGB空间中的线性矩阵近似来执行色调旋转.对于小旋转和高度饱和的颜色,这不能很好地保持饱和度或亮度 - 正如您所看到的那样.

真正的色调旋转,首先将输入RGB颜色转换为HSL,调整H然后转换回RGB.过滤器不会这样做.并且这种转换不能用线性矩阵精确地近似,因此当色调被准确地改变(大多数)时,饱和度和亮度遍布整个地方.这些效果是非线性的,因此将较小的ops加在一起会产生不同的颜色,而不是进行一次大的操作.

(SVG和CSS过滤器中的huerotation之间的区别可能是由于使用了不同的颜色空间(sRGB与linearRGB) - 这些应该是相同的.)

更新:我有兴趣去做一个手动比较.正如您所看到的,过滤器在0到180度范围内旋转纯色的色调非常糟糕.此图像比较通过手动插入hsl颜色(外环)与基色(内环)上的滤镜色调旋转完成的手动色调旋转

但是,正如你所看到的,他们在不太纯净的颜色上做得更好,比如hsl(0,50%,75%).

codepen链接,如果你想玩:http://codepen.io/mullany/pen/fwHrd

Answer 2

迈克尔的回答太棒了,我希望我以前见过它; 但是因为我不仅需要了解它们本来就很奇怪而且还需要以哪种方式(我想解决它们的逻辑以便我需要数学),我已经hue-rotate用Javascript 编写了一个实现(主要是从阅读Firefox的源代码中获取)代码),它模仿hue-rotateWebkit/Blink/Gecko使用的.

同样,这里的重点只是了解它产生的结果.

function calculate() {
    // Get the RGB and angle to work with.
    var color = document.getElementById('color').value;
    if (! /^[0-9A-F]{6}$/i.test(color)) return alert('Bad color!');
    var angle = document.getElementById('angle').value;
    if (! /^-?[0-9]+$/i.test(angle)) return alert('Bad angle!');
    var r = parseInt(color.substr(0, 2), 16);
    var g = parseInt(color.substr(2, 2), 16);
    var b = parseInt(color.substr(4, 2), 16);
    var angle = (parseInt(angle) % 360 + 360) % 360;
    
    // Hold your breath because what follows isn't flowers.
    
    var matrix = [ // Just remember this is the identity matrix for
        1, 0, 0,   // Reds
        0, 1, 0,   // Greens
        0, 0, 1    // Blues
    ];
    
    // Luminance coefficients.
    var lumR = 0.2126;
    var lumG = 0.7152;
    var lumB = 0.0722;
    
    // Hue rotate coefficients.
    var hueRotateR = 0.143;
    var hueRotateG = 0.140;
    var hueRotateB = 0.283;
    
    var cos = Math.cos(angle * Math.PI / 180);
    var sin = Math.sin(angle * Math.PI / 180);
    
    matrix[0] = lumR + (1 - lumR) * cos - lumR * sin;
    matrix[1] = lumG - lumG * cos - lumG * sin;
    matrix[2] = lumB - lumB * cos + (1 - lumB) * sin;
    
    matrix[3] = lumR - lumR * cos + hueRotateR * sin;
    matrix[4] = lumG + (1 - lumG) * cos + hueRotateG * sin;
    matrix[5] = lumB - lumB * cos - hueRotateB * sin;
    
    matrix[6] = lumR - lumR * cos - (1 - lumR) * sin;
    matrix[7] = lumG - lumG * cos + lumG * sin;
    matrix[8] = lumB + (1 - lumB) * cos + lumB * sin;
    
    function clamp(num) {
        return Math.round(Math.max(0, Math.min(255, num)));
    }
    
    var R = clamp(matrix[0] * r + matrix[1] * g + matrix[2] * b);
    var G = clamp(matrix[3] * r + matrix[4] * g + matrix[5] * b);
    var B = clamp(matrix[6] * r + matrix[7] * g + matrix[8] * b);
    
    // Output the result
    var result = 'The original color, rgb(' + [r,g,b] + '), '
               + 'when rotated by ' + angle + ' degrees '
               + 'by the devil\'s logic, gives you '
               + 'rgb(' + [R,G,B] + '). If I got it right.';
    document.getElementById('result').innerText = result;
}
// Listen for Enter key press.
['color', 'angle'].forEach(function(i) {
    document.getElementById(i).onkeypress = function(event) {
        var e = event || window.event, c = e.which || e.keyCode;
        if (c == '13') return calculate();
    }
});

body {
    font: 14px sans-serif;
    padding: 6px 8px;
}

input {
    width: 64px;
}

<p>
    This algorithm emulates the wierd, nonsensical and completely 
    idiotic <code>hue-rotate</code> CSS filter. I wanted to know
    how it worked, because it is out of touch with any definition
    of "hue" I've ever seen; the results it produces are stupid
    and I believe it was coded under extreme influence of meth,
    alcohol and caffeine, by a scientologist listening to Death Metal.
</p>
<span>#</span>
<input type="text" id="color" placeholder="RRGGBB">
<input type="text" id="angle" placeholder="degrees">
<button onclick="calculate()">Calculate</button>
<p id="result"></p>

该片段取自这个答案.