This method converts color values from hue-saturation-lightness (HSL) to it's red-green-blue representation.
Check out the demo!
See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.
To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.
140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.
| function( | |
| a, // hue | |
| b, // saturation | |
| c // lightness | |
| ){ | |
| function f(a){ | |
| return (a %= 6) <1 ? | |
| c + b * a : | |
| a < 3 ? | |
| b + c : | |
| a < 4 ? | |
| c + b * (4 - a) : | |
| c | |
| } | |
| b = c >.5 ? | |
| c + b - c * b : | |
| c * b + c, | |
| b -= c = c * 2 - b, | |
| a *= 6; | |
| return [ | |
| f(a + 2), | |
| f(a), | |
| f(a + 4) | |
| ] | |
| } |
| function(a,b,c){function f(a){return(a%=6)<1?c+b*a:a<3?b+c:a<4?c+b*(4-a):c}b=c>.5?c+b-c*b:c*b+c,b-=c=c*2-b,a*=6;return[f(a+2),f(a),f(a+4)]} |
| 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. |
| // From: https://github.com/dantman/jquery.color/blob/master/src/color.hsl.js | |
| var hsl = function(h,s,l){ | |
| var | |
| q = l < 0.5 ? l * (1 + s) : l + s - (l * s), | |
| p = 2 * l - q, | |
| k = (q - p) * 6, | |
| tr = (h + 1/3) % 1, | |
| tg = (h) % 1, | |
| tb = (h - 1/3) % 1, | |
| j = function(a){ | |
| return a < 1/6 ? p + (k * a) : | |
| a < 1/2 ? q : | |
| a < 2/3 ? p + (k * (2/3 - a)) : | |
| p; | |
| }; | |
| return [ | |
| j( tr ), | |
| j( tg ), | |
| j( tb ) | |
| ]; | |
| }; |
| { | |
| "name": "hsl2rgb", | |
| "description": "Converts hue-saturation-lightness to red-green-blue color value.", | |
| "contributors": [ | |
| { | |
| "name" : "Martin Kleppe", | |
| "url" : "https://github.com/aemkei" | |
| }, | |
| { | |
| "name" : "tsaniel", | |
| "url" : "https://github.com/tsaniel" | |
| }, | |
| { | |
| "name" : "Alex Kloss", | |
| "url" : "https://github.com/atk" | |
| }, | |
| { | |
| "name" : "subzey", | |
| "url" : "https://github.com/subzey" | |
| }, | |
| { | |
| "name": "Jed Schmidt", | |
| "url": "https://github.com/jed" | |
| } | |
| ], | |
| "keywords": [ | |
| "color", | |
| "convert", | |
| "hsl", | |
| "rgb" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>hsl2rgb - 140byt.es</title> | |
| <style type="text/css" media="screen"> | |
| span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| } | |
| #output { | |
| margin-bottom: 1em; | |
| } | |
| #output div { | |
| height: 8px; | |
| } | |
| </style> | |
| <div id="output"></div> | |
| <a href="https://gist.github.com/1325937">Source Code</a> | |
| <script> | |
| var hsl=function(a,b,c){function f(a){return(a%=6)<1?c+b*a:a<3?b+c:a<4?c+b*(4-a):c}b=c>.5?c+b-c*b:c*b+c,b-=c=c*2-b,a*=6;return[f(a+2),f(a),f(a+4)]} | |
| var html = "", h, s, l, rgb; | |
| for (h = 0; h <= 1; h += 0.1){ | |
| html += "<div>"; | |
| for (s = 0; s <= 1; s += 0.1){ | |
| for (l = 0; l <= 1; l += 0.1){ | |
| rgb = hsl(h, s, l); | |
| rgb = [ | |
| ~~(rgb[0] * 255), | |
| ~~(rgb[1] * 255), | |
| ~~(rgb[2] * 255) | |
| ].join(",") | |
| html += "<span style='background:rgb(" + rgb + ")'></span>" | |
| } | |
| } | |
| html += "</div>"; | |
| } | |
| document.getElementById("output").innerHTML = html; | |
| </script> |
