2013-05-02 2 views
3

내가 좋아하는 뭔가를 사용 90DEG하여 색조를 회전 할 경우는 색조를 회전 않지만, 올바른 보이지 않는-webkit-필터의 색조 회전을 크롬에서 올바른 결과를 생성하지 않는 것

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

. 예를 들어 포토샵에서 같은 변화를 수행하면 결과가 달라집니다. 또한 크롬과 사파리간에 다른 결과를 얻는 것으로 나타났습니다.

Photoshop에서 수정 된 이미지 (-webkit-filter를 통해)를 열면 색조가 약 60도 회전하고 채도가 감소 된 것을 볼 수 있습니다.

웹킷 브라우저에서 색조를보다 안정적으로 돌려 볼 수있는 방법이 있습니까, 아니면이 필터 접근법에 대한 기본 사항이 누락되었습니다.

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

답변

3

내가 HSL의 색상을 선언하고 90DEG를 추가하면 결과는 동일하지 않습니다, 당신은 크롬에 버그가 발생 생각 : 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); 
} 

이 문제를 설명 할 수있는 여러 가지 색상 모델이 있지만 결과가 좋지 않은 것 같습니다.

나는 그들은 실제로 둘 다 맞아요 https://code.google.com/p/chromium/issues/entry

+0

감사합니다. 다음 버그를 제출했습니다. https://code.google.com/p/chromium/issues/detail?id=237524 – CMS

2

에 버그보고를 것입니다. 아마 당신이 엉망인 곳은 Photoshop이 HSB 색상 모델을 사용하고 CSS가 HSL을 사용한다는 것입니다. FYI

: HSB에서

는 (B)의 정당성이 100 %에서 풀 컬러로, 0 %에서 블랙에서 진행한다.

HSL에서 (L) 경도는 0 %에서 검은 색에서 50 %에서 100 %까지 흰색으로 바뀝니다.

0

이것은 버그가 아닙니다. 색조 - 회전은 RGB 공간에서 색상 순환의 근사를 수행하므로 특정 (예 : 매우 포화 된) 색상에 대해 매우 부정확 한 결과가 발생합니다.