5 ms·
Mother-effing hsl()
- yan 16y agoIf you mess with Processing, Cinder, oF or any other creative coding frameworks, using HSL is much easier for programmatically creating visuals and gradients...
- wtracy 16y agoCould 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 16y agooF = http://openframeworks.cc http://openframeworks.cc Cinder = http://libcinder.org http://libcinder.org Processing = http://processing.org http://processing.org / http://processingjs.org http://processingjs.org
- die_sekte 16y agoApparently no support in IE8. Which means that I will probably use it anyway, just because it's that nice to deal with mentally.
- simonsarris 16y agoAlpha does not work (reverts) as soon as you hover over the color picker again.
- joe24pack 16y ago> one sec, bro. I have no idea what the heck that means ... The page appears broken.
- franck 16y agoYou might want to enable JavaScript or get a modern browser.
- joe24pack 16y ago>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 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 16y agoFirefox 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 16y agoThen 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.
- kemayo 16y agoTo 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 16y agoSo what you are trying to tell me, is that the cup is half empty?
- kemayo 16y agoThe cup is half full... of Internet Explorer. :P
- gwern 16y agoI see this thread is an example of '2 programmers, 1 cup'.
- JonnieCache 16y agoI keep half my water in a redundant cup.
- paulirish 16y agoFallback 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 http://css3please.com soon to make it a touch easier.
- pornel 16y agoYou could convert hsla to rgb/rgba automatically as part of build process or in some server-side mod_rewriting trickery.
- duopixel 16y agoNote 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 16y ago> 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-and-hsv.svg/1000px-Hsl-and-hsv.svg.png 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 16y ago> 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 http://memela.com and I had to switch to rgb because of this.
- thisisblurry 16y agoPaul Irish might be one of the most productive web developers of the past 6-9 months.
- jiaaro 16y agoprobably 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 ;)
- paulirish 16y ago+1
- thisisblurry 16y agoOh, 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 16y agoEvery 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.
- joezydeco 16y agoIn 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.