Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HSV←→HSL

HSV←→HSL

Converts back and forth between HSV and HSL.

I find it strange that they appear to be completely different, there's probably something I'm missing that will bring hsv2hsl down to the size of hsl2hsv.

Also see: hsl2rgb hsv2rgb

function hsv2hsl(hue,sat,val){
return[ //[hue, saturation, lightness]
//Range should be between 0 - 1
hue, //Hue stays the same
//Saturation is very different between the two color spaces
//If (2-sat)*val < 1 set it to sat*val/((2-sat)*val)
//Otherwise sat*val/(2-(2-sat)*val)
//Conditional is not operating with hue, it is reassigned!
sat*val/((hue=(2-sat)*val)<1?hue:2-hue),
hue/2 //Lightness is (2-sat)*val/2
//See reassignment of hue above
]
}
hsl2hsv=function(hue,sat,light){
sat*=light<.5?light:1-light;
return[ //[hue, saturation, value]
//Range should be between 0 - 1
hue, //Hue stays the same
2*sat/(light+sat), //Saturation
light+sat //Value
]
}
function hsv2hsl(a,b,c){return[a,b*c/((a=(2-b)*c)<1?a:2-a),a/2]}
function hsl2hsv(a,b,c){b*=c<.5?c:1-c;return[a,2*b/(c+b),c+b]}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "HSVHSLConverter",
"description": "Converts back and forth between HSV and HSL.",
"keywords": [
"color",
"hsl"
"hsv"
]
}
<!DOCTYPE html>
<title>HSV/HSL Converter</title>
<div>hsv2hsl Expected value: <b><br/>(0,1,0.5)<br/>(300,0.5,0.5)<br/>(14.3,0.817,0.624)</b></div><br/>
<div>hsv2hsl Actual value: <b id="ret"></b></div><br/>
<div>hsl2hsv Expected value: <b><br/>(0,1,1)<br/>(300,0.66667,0.75)<br/>(14.3,0.661,0.931)</b></div><br/>
<div>hsl2hsv Actual value: <b id="ret2"></b></div>
<script>
function hsv2hsl(a,b,c){return[a,b*c/((a=(2-b)*c)<1?a:2-a),a/2]}
function hsl2hsv(a,b,c){b*=c<.5?c:1-c;return[a,2*b/(c+b),c+b]}
//These are three random colors from the wikipedia page on HSL and HSV.
//http://en.wikipedia.org/wiki/HSL_and_HSV#Examples
out = "<br/>(" + (c1 = hsv2hsl(0, 1, 1)) + ")<br/>";
out += "(" + (c2 = hsv2hsl(300, 0.66667, 0.75)) + ")<br/>";
out += "(" + (c3 = hsv2hsl(14.3, 0.661, 0.931)) + ")<br/>";
document.getElementById( "ret" ).innerHTML = out;
out = "<br/>(" + hsl2hsv(c1[0], c1[1], c1[2])+ ")<br/>";
out += "(" + hsl2hsv(c2[0], c2[1], c2[2]) + ")<br/>";
out += "(" + hsl2hsv(c3[0], c3[1], c3[2]) + ")<br/>";
document.getElementById( "ret2" ).innerHTML = out;
</script>
@maettig
Copy link

maettig commented Nov 9, 2011

I'm not sure if the source you used is correct. Converting from HSV to HSL and back produces strange results. Many NaN, some negative values. Maybe it's better to use another source and create these functions from scratch?

@xpansive
Copy link
Author

xpansive commented Nov 10, 2011

Hmm, it seems to be a problem from hsl to hsv, but not the other way. See test page here: http://pastehtml.com/view/bdhocqqo6.html. It uses examples from the wikipedia page on hsv and hsl.

@xpansive
Copy link
Author

xpansive commented Nov 10, 2011

I managed to fix it, my brain told me that (c>.5)-c is the same as c<.5?c:1-c but it clearly isn't now that I look at it. It's two bytes more, but it works :)

I also screwed up the test page, by the way

@maettig
Copy link

maettig commented Nov 10, 2011

Saved 1 byte: function(a,b,c){b*=c<.5?c:1-c;c+=b;return[a,2*b/c,c]}

@erich666
Copy link

erich666 commented Feb 21, 2013

HSV to HSL give not-a-number when S = 0 and V = 1: you get 0/0 for the new "S", because the hue temporarily becomes 2 in line 10, then 2-2 is 0. You need to test for this condition.

@wcochran
Copy link

wcochran commented May 21, 2018

You should at least take care to not divide by zero (e.g., when val = 0).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment