

Mother-effing hsl() - bretthopper
http://mothereffinghsl.com/

======
duopixel
Note that hsl is a breeze to set, but a pain in the ass to get. Browser
engines convert it to rgb(a) and if you want to check if anything has, say,
saturation 100% you must first convert back to hsl from rgb.

To make matters worse, the hsl color spectrum covers colors that RGB can't
represent, so you if you're checking for a particular color the conversion
algorithm will throw you back something with a few digits off.

Otherwise yes, hsl rocks!

~~~
jacobolus
> _hsl color spectrum covers colors that RGB can't represent_

This is simply false. HSL is a simple deformation of the RGB cube into a
cylinder, as you can see in this nice diagram I drew up about a year ago:
[http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl...](http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl-
and-hsv.svg/1000px-Hsl-and-hsv.svg.png)

> _conversion algorithm will throw you back something with a few digits off_

These are rounding errors, and shouldn’t be especially noticeable. So what?

~~~
duopixel
> This is simply false.

You are right, what I meant is that you can set h = 200 s = 100% l = 0% and
you will get back R = 0, G = 0, B = 0.

> These are rounding errors, and shouldn’t be especially noticeable. So what?

Not to the eye, but for computers it is. Say you want to check if an element
has a background color of hsl(100, 30%, 30%) because you set this color
before. Well, you can't. I ran into this problem while building
<http://memela.com> and I had to switch to rgb because of this.

------
kemayo
To quote from the blog post that page links to: "HSL is supported in almost
all the major browsers: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 10+ and
Explorer 9.0+."

Not being supported in IE before IE9 means this is pretty unusable for
anything commercial, unfortunately. I mean, we only just got to drop support
for _IE6_...

Which is a shame, since it's pretty neat.

~~~
sonnyz
So what you are trying to tell me, is that the cup is half empty?

~~~
kemayo
The cup is half full... of Internet Explorer. :P

~~~
gwern
I see this thread is an example of '2 programmers, 1 cup'.

------
yan
If you mess with Processing, Cinder, oF or any other creative coding
frameworks, using HSL is much easier for programmatically creating visuals and
gradients...

~~~
wtracy
Could you provide links to those? I'm familiar with Processing, Google found
Cinder pretty quickly, but I can't track down oF with just the acronym.

~~~
paulirish
oF = <http://openframeworks.cc> Cinder = <http://libcinder.org> Processing =
<http://processing.org> / <http://processingjs.org>

------
die_sekte
Apparently no support in IE8.

Which means that I will probably use it anyway, just because it's that nice to
deal with mentally.

------
simonsarris
Alpha does not work (reverts) as soon as you hover over the color picker
again.

~~~
tghw
Click and it'll stay.

~~~
thefool
This is super not intuitive, and there's no way that I can see to revert back
to the original state.

------
joezydeco
In non-web programming areas, HSL (or HSV, take your pick) is a great way to
quickly make a heatmap out of a range of values. Just scale them and map them
from 0 (hot) to 240 (cold) and peg the other values. Purple looks out of place
so I avoid it.

------
thisisblurry
Paul Irish might be one of the most productive web developers of the past 6-9
months.

~~~
jiaaro
probably because he builds things that require (virtually) no support and
don't have any features not visible in the primary interface.

I love the guy and his projects, I'm just saying; let's not discount the
amazing work of others ;)

~~~
thisisblurry
Oh, I wouldn't think to discount the wonderful things that others create.

I'm just a bit biased to complement his projects (and feverish work ethic)
since I find myself using his work on a daily basis.

------
rdrimmie
Every now and then someone explains something that should have been completely
obvious and I get floored. Of COURSE that's how hsl works, how else could it
work? Love it.

------
joe24pack
> one sec, bro.

I have no idea what the heck that means ... The page appears broken.

~~~
franck
You might want to enable JavaScript or get a modern browser.

~~~
joe24pack
>You might want to enable JavaScript or get a modern browser.

Javascript enabled and browser is "Mozilla/5.0 (X11; U; Linux i686; en-US;
rv:1.9.0.12) Gecko/2009070811 Red Hat/3.0.12-1.el5_3 Firefox/3.0.12" so I
should be fine.

Error Console does report an interesting little tidbit;

Error: color is undefined Source File:
<http://mothereffinghsl.com/js/script.js> Line: 89

The function in question is

function inputchange(e){

    
    
      var target = e.target;
      
      if (target.id == 'alpha'){
        alpha = Math.floor(target.value)/100;
        if (alpha === 1){
          alpha = undefined;
        }
      }
      if (target.id == 'light'){
        var split = color.split('%');
        split[1] = split[1].replace(/\d+/, Math.round(target.value));
        color = split.join('%');
    
      }
      setText();

}

Sorry I dont have a full stack trace for you, nor am I inclined to fire up a
debugger right now to troubleshoot this any further.

...

page is still stuck at "One sec, bro."

~~~
paulirish
Firefox 3.0 is 2.5 years old, bro.

"Mozilla ended support for Firefox 3 on March 30, 2010 with the release of
3.0.19" which is 7 security updates after what you're carrying around.

I'm not the only one who doesn't test it anymore.

~~~
joe24pack
Then there is a real simple solution for you, don't claim that your site is
compatible with Firefox 3.0 + ... because it clearly is not. Say what you do,
do what you say.

