CSS оттенок-поворот / насыщенность / яркость не точно показывает некоторые цвета
Я использую Javascript для фильтрации / смещения изображения красного значка в другой цвет, указанный в RGB. В частности, я использую CSS-фильтры hue-rotate, яркость и насыщенность, чтобы сместить цвета с чистого красного на целевой цвет. Мой результат хорошо работает для многих цветов, но некоторые цвета не получаются правильно. Какие-либо предложения?
Вы можете видеть в моем коде, что я попробовал и HSL и HSB вычисления, по существу с теми же результатами. Текущий код работает с HSB, который, я думаю, лучше соответствует свойствам CSS-фильтра.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV2 {
position: absolute;
width: 200px;
height: 200px;
}
</style>
<script>
function rgbToHsl(r, g, b){
r /= 256, g /= 255, b /= 256;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = d == 0 ? 0 : d / (1 - Math.abs(2 * l - 1)) ;
if (d == 0) {
h = 0
} else {
switch(max){
case r: h = ((g - b) / d) % 6; break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
}
/* testing out HSB instead of HSL = H is the same */
var br_hsb = max;
var s_hsb = (max-min)/br_hsb;
return [h, s_hsb, br_hsb]; // [h, s, l];
}
function setHue(r, g, b){
hsl = rgbToHsl(r, g, b);
h_str = Math.round(hsl[0]*360).toString();
s_str = (Math.round(hsl[1]*1000)/10).toString();
l_str = (Math.round((hsl[2]+.5)*1000*1)/10).toString(); /* *2 SEEMS TO WORK BETTER FOR HSL */
styleString = "hue-rotate(" + h_str + "deg) saturate(" + s_str + "%) brightness(" + l_str + "%)";
document.getElementById("myDIV2").style.filter = styleString;
document.getElementById('hue').value = h_str;
document.getElementById('hsl_str').value = styleString;
}
</script></head>
<body>
<p>Set the RGB for the icon:</p>
R: <input type=text size=3 name=r id=r value=0>
G: <input type=text size=3 name=g id=g value=255>
B: <input type=text size=3 name=b id=b value=13>
<button onclick="setHue(document.getElementById('r').value, document.getElementById('g').value, document.getElementById('b').value)">
set color
</button>
Hue: <input type=text size=5 name=hue id=hue value="">
HSL: <input type=text size=40 name=hsl_str id=hsl_str value="">
<p><hr><p>
<div id="myDIV2" >
<img src=http://www.clker.com/cliparts/T/m/K/p/d/W/man-icon.svg.med.png
width=200 height=200>
</div>
</script>
</body>
</html>Работающие цвета: красный: 255,0,0 лайм: 0,255,0 синий: 0,0,255 фиолетовый: 128,0,128 серебро: 192,192,192 серый: 128,128,128
но цвета, которые не работают, включают: желтый: 255,255,0 белый: 255,255,255 черный: 0,0,0
Все предложения приветствуются.