3

If I rotate the hue by 90deg using something like:

.foo
{
  -webkit-filter: hue-rotate(90deg);
}

it does rotate the hue, but it doesn't look correct. For instance, if I perform the same shift in photoshop I get different results. I also noticed that I get different results between Chrome and Safari.

If I take a screenshot and open up the modified image (via the -webkit-filter) in photoshop, I can see that the hue is only rotated by about 60 degrees, and also the saturation has been reduced.

Is there a way to get webkit browsers to rotate the hue more reliably, or am I missing something basic about this filter approach.

Here is a fiddle demonstrating the issue:

http://jsfiddle.net/xv5Ah/1/

3 Answers 3

Reset to default
2

I think you encountered a bug in Chrome, if I declare the color in hsl and add 90deg the result is not the same: http://jsfiddle.net/HrHpA/.

div {
    width:            50px;
    height:           50px;
    margin-bottom:    10px;
    /* hsl(131+90,100%,50%) */
    background: hsl(221,100%,50%);
}

.hue {
  background: hsl(131,100%,50%);
  -webkit-filter: hue-rotate(90deg);   
}

There are different color models that might account for this, but it seems to me that the results are way off.

I'd file a bug report at https://code.google.com/p/chromium/issues/entry

1
1

They're actually both correct. I think where you're probably messing up is that Photoshop uses the HSB color model and CSS uses HSL.

FYI:

In HSB, the (B)rightness goes from black at 0%, to full color at 100%.

In HSL, the (L)ightness goes from black at 0% to full color at 50%, to white at 100%.

1

This is not a bug. Hue-rotate does an approximation of a hue rotation in RGB space - which results in highly inaccurate results for certain (e.g. highly saturated) colors. Please see the answer to this question to see how badly this clipping distorts results:

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.