Mother-effing hsl() | Hacker News Reader

Mother-effing hsl()

mothereffinghsl.com

58 pointsbretthopper34 comments

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!

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

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

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.

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

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

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

I keep half my water in a redundant cup.

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.

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

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

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

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

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.

oF = http://openframeworks.cc Cinder = http://libcinder.org Processing = http://processing.org / http://processingjs.org

Apparently no support in IE8.

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

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

Click and it'll stay.

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

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.

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

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 ;)

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.

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.

> one sec, bro.

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

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

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

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.

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.

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

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

I wouldn't be so sure about being fine.

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.

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.

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

Reply on news.ycombinator.com