CODEWITHSUNDEEP
google-chromecssfilterwebkithue
CMS
CMS

Reputation: 31

-webkit-filter's hue-rotate does not seem to produce correct results in chrome

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.

It appears 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?

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

div.sample {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAADJGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkFGQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIwQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mjk1OTU4RUFBQTU2MTFFMkE1NEVENDU4MTVCNkE1QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTJEMzQ2QUVBQTU3MTFFMkE1NEVENDU4MTVCNkE1QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Lx9yCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUWMPtzgENAAAIAyCfyP7ptIZukIDUdN0TLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0trV+tBfHSOy90wM8FAAAAAElFTkSuQmCC');
}

div.photoshop
{
  width: 50px;
  height: 50px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MkQzNDZCM0FBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MkQzNDZCNEFBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkIxQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIyQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2s4ZagAAAEBJREFUeNrszjEBADAIA7Ayhfg3Awr2cyQKUunJPS8naWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaf2sAAMAdvMBs/7dIkQAAAAASUVORK5CYII=');
}
Original:
<div class="sample"></div>

Hue Rotated by 90deg:
<div class="sample hue"></div>

Photoshop Result Rotate Hue by 90deg:
<div class="photoshop"></div>

Upvotes: 3

Views: 4830

Answers (3)

Michael Mullany
Michael Mullany

Reputation: 31715

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?

Upvotes: 2

Paul Gordon
Paul Gordon

Reputation: 2622

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%.

Upvotes: 1

methodofaction
methodofaction

Reputation: 72395

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

Upvotes: 2

Related Questions