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.
-
-
Save xpansive/1337890 to your computer and use it in GitHub Desktop.
HSV←→HSL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "HSVHSLConverter", | |
| "description": "Converts back and forth between HSV and HSL.", | |
| "keywords": [ | |
| "color", | |
| "hsl" | |
| "hsv" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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.
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
Saved 1 byte: function(a,b,c){b*=c<.5?c:1-c;c+=b;return[a,2*b/c,c]}
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.
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
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?