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 → duopixel]

> 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...

> 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 → jacobolus]

> 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.

[danh → kemayo]

Just use less.js for all your hsl needs in IE:

https://github.com/cloudhead/less.js/wiki/Functions

[paulirish → kemayo]

Fallback style with HSL(a) is.... doable but kinda sucks:

  div { background-color: #BADA55; background-color: hsla(74, 64%, 59%, 0.7); }

And then hypothetically you could use a filter to get the alpha color in IE, but then you use AARRGGBB hex notation which kinda defeats the whole purpose. Might end up rolling this solution into http://css3please.com soon to make it a touch easier.

[pornel → kemayo]

You could convert hsla to rgb/rgba automatically as part of build process or in some server-side mod_rewriting trickery.

[sonnyz → kemayo]

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

[kemayo → sonnyz]

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

[gwern → kemayo]

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

[JonnieCache → sonnyz]

I keep half my water in a redundant 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 → yan]

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 → wtracy]

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 → simonsarris]

Click and it'll stay.

[thefool → tghw]

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 → thisisblurry]

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 → jiaaro]

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.

[paulirish → jiaaro]

+1

[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 → joe24pack]

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

[joe24pack → franck]

>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 → joe24pack]

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 → paulirish]

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.

[Xuzz → paulirish]

However, I see it around as an alternative to IE -- usually IE6.

[magicalist → joe24pack]

seriously? http://www.mozilla.org/security/known-vulnerabilities/firefo...

I wouldn't be so sure about being fine.

[joe24pack → magicalist]

In the context of this thread and the given subject matter, that the linked page supports Firefox 3.0+, the browser I was browsing with at that time should have been able to render and execute the page correctly according to what the author of the page claims. I did not say a word about that browser being vulnerable to any given browser exploits.

[magicalist → joe24pack]

well that was kind of the structure of the joke: juxtaposing a different meaning of the words you wrote with information on browser vulnerabilities.

I don't see a statement about browser support on the site or on the submission, but maybe you're referring to the linked blog post? The blog post lists Firefox 3.0+ as a browser that supports hsla, not browser support for the color picker site.

[joe24pack → magicalist]

mea culpa, I didn't read that blog post closely enough