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

by

In both CSS and SVG filters, there is no conversion into HSV or HSL – the hueRotation shorthands are using a linear matrix approximation in RGB space to perform the hue rotation. This doesn’t conserve saturation or brightness very well for small rotations and highly saturated colors – as you’re seeing.

A true hue rotation, would first convert the input RGB color to HSL, adjust the H and then convert back to RGB. Filters don’t do this. And this conversion can’t be accurately approximated with a linear matrix, so while the hue is accurately changed(mostly), the saturation and brightness goes all over the place. These effects are non-linear, so adding smaller ops together results in different colors vs. doing one big operation.

(The difference between huerotation in SVG and CSS filters could be due to using different color spaces (sRGB vs. linearRGB) – these should be the same.)

Update: I got interested enough to go and do a manual comparison. As you can see, filters do a terrible job of hue rotating pure colors in the 0 to 180 degree range. This image compares a manual hue rotation done by plugging in hsl colors manually (outer ring) vs. a filter hue rotation on the base color (inner ring)

Explicit HSL Hue Rotation vs. CSS Filter Hue Rotation

But, they do a better job at less pure colors like hsl(0,50%,75%) as you can see.
hue rotation with mid HSL

codepen link in case you want to play: http://codepen.io/mullany/pen/fwHrd

More Related Contents:

  1. HSL to RGB color conversion
  2. How to change the color of an svg element?
  3. Ball to Ball Collision – Detection and Handling
  4. SVG drop shadow using css3
  5. Does anyone know of a low level (no frameworks) example of a drag & drop, re-order-able list?
  6. How to print R graphics to multiple pages of a PDF and multiple PDFs?
  7. GraphViz – How to connect subgraphs?
  8. Closest point on a cubic Bezier curve?
  9. Why doesn’t this Javascript RGB to HSL code work?
  10. In d3, how to get the interpolated line data from a SVG line?
  11. SVG shadow cut off
  12. How to calculate required hue-rotate to generate specific colour?
  13. How to recognize rectangles in this image?
  14. svg multiple color on circle stroke
  15. Blackberry – how to resize image?
  16. Convert HSB/HSV color to HSL
  17. How to test if a line segment intersects an axis-aligned rectange in 2D?
  18. Generate colors between red and green for a power meter?
  19. SVG fill color transparency / alpha?
  20. How can I change the color of an ‘svg’ element?
  21. Adding feDropShadow to a vertical line in SVG makes it disappear
  22. Transformation of 3D objects related to vanishing points and horizon line
  23. Creating SVG graphics using Javascript?
  24. Scripting data in SVG (reading and modifying)
  25. How do you check for intersection between a line segment and a line ray emanating from a point at an angle from horizontal?
  26. Three.js: What Is The Exact Difference Between Lambert and Phong?
  27. Bouncing Ball. Making it slow down at peak of height
  28. Bump-map a sphere with a texture map
  29. Most underused data visualization [closed]
  30. Polygon Triangulation with Holes

Leave a Comment