Skip to main content
edited tags
Link
Michael Mullany
  • 31.3k
  • 6
  • 83
  • 107
Source Link

Why doesn't hue rotation by +180deg and -180deg yield the original color?

By reading HSL/HSV color theory, I get the impression that hue component is a cyclical attribute that repeats every 360 degrees and can be changed independently of saturation and lightness/value. Correct me if I am wrong, but these statements logically follow the previous definition:

  1. Rotating hue by 360 degrees yields the same color
  2. Rotating hue by 180 degrees twice yields the original color
  3. Rotating hue by 180 degrees followed by -180 degrees yields the original color

However, only the option 1 is correct. Rotating hue 4 times by +90 degrees yields a color that isn't even remotely similar to the original.

Furthermore, using -webkit-filter and SVG's

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

don't produce the same result for the same rotation. On the other hand, colors produced by SVG filters are consistent across browsers.

Is there any "hidden" property of hue rotation that makes the operation not associative?


Examples of both webkit filters and SVGs can be found here: http://jsfiddle.net/maros_urbanec/ARsjb/5/