问题
Hello I'm trying to create HEX to HSL converter function. I know that at first I should convert HEX to RGB and then from RGB to HSL. I've done so using some script from StackOverflow. S and L is working correctly but H (hue) is not. I do not know why, here's my code:
toHSL: function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
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 = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
s = s*100;
s = Math.round(s);
l = l*100;
l = Math.round(l);
var colorInHSL = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
$rootScope.$emit('colorChanged', {colorInHSL});
When the input is #ddffdd
then the output is hsl(0.3333333333333333, 100%, 93%)
but should be hsl(120, 100%, 93%)
.
回答1:
You forgot to multiply the hue by 360.
s = s*100;
s = Math.round(s);
l = l*100;
l = Math.round(l);
h = Math.round(360*h);
var colorInHSL = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
来源:https://stackoverflow.com/questions/46432335/hex-to-hsl-convert-javascript