Comments on: Yay for HSLa

By: Zoe Gillenwater

Zoe Gillenwater — Wed, 07 Jul 2010 23:52:38 +0000

Thanks so much for writing this article, Chris! I wish HSLA got more attention. So much more intuitive than RGBA. I'll second the recommendation of Rainbow for Firefox. A couple good online color tools that support HSLA: Doughnut Color Picker and http://serennu.com/colour/hsltorgb.php The third IE 9 preview supports HSLA now. Yay!

By: thinsoldier

thinsoldier — Wed, 23 Jun 2010 15:09:59 +0000

Plus, isn’t the Hue measured in (360) degrees? I though there was a “deg” measurement like “px” and “em”.

Why doesn’t the H use “deg”?

Speaking of which, in some other parts of css there are times when you can use a percentage (ie: 1% or 87%) but other times when you have to use a decimal (ie: 0.01 or 0.87).

Why not allow decimal or percentage in both cases?

By: thinsoldier

thinsoldier — Wed, 23 Jun 2010 15:06:43 +0000

.png saved from some versions of photoshop when shown in some versions of some browsers in some OS’s tends to come out brighter than the original image.

See: http://morris-photographics.com/photoshop/articles/png-gamma.html

If it’s a completely different color you need to calibrate your monitor then calibrate photoshop’s color management settings to make sure photoshop is working in the same color space as your monitor (or something like that…I never did fully comprehend it)

By: Tom J Nowell

Tom J Nowell — Mon, 21 Jun 2010 15:52:20 +0000

Your demo works on iPad until you try to move the sliders and the whole page scrolls instead!

But a good read nonetheless!

By: Catherine Azzarello

Catherine Azzarello — Mon, 21 Jun 2010 14:40:47 +0000

Thanks Chris! HSL is so much more intuitive for us old designers! Perfect for when you want tints or shades of a color w/o shifting color.

I’ve also noticed Photoshop is ‘off’ when grabbing RGB values. Colors I build with RGB in CSS are not matching the Photoshop graphics built w/hex values. My current project revolves around a violet hex value which is shifting. Not sure, but I think something’s happening when I save for web as PNG file.

By: Ant

Ant — Sat, 19 Jun 2010 21:23:23 +0000

HSL is confusing for me, because:

You need to add % for S and L, but not H (I would prefer if you don’t need to add it at all)

It wasn’t matching HSB from Photoshop, maybe I did something wrong.

I would use HSL only if need to animate colours, otherwise RGB.

By: Crypto

Crypto — Sat, 19 Jun 2010 13:51:54 +0000

SASS is a server-side CSS pre-processor that also supports HSLA, math, nesting, and mixins. However, SASS outputs HSLA colors as hex so it works on IE. SASS integrates seamlessly with Ruby on Rails but the command line version works for any project. Keep your stylesheets DRY with SASS and you’ll never use anything else.

By: thinsoldier

thinsoldier — Fri, 18 Jun 2010 04:55:34 +0000

Are there any professional design software (like photoshop) that use HSL instead of HSB?

If not, why did the group choose HSL over HSB?

Would it not be possible to have RGBa and HSLa and HSBa and maybe even Lab or CMYK if some browser dev feels like being a completist?

Somebody’s just going to make a javascript function that converts hsb to hsl anyway, so why not add hsb to the standard?

By: thinsoldier

thinsoldier — Thu, 17 Jun 2010 21:15:22 +0000

Why couldn’t the alpha value be a percentage as well?

Or is it yet another one of those things that was decided ages ago and nobody can find an explanation for (despite having working group e-mail logs going back to the big bang?)

By: james brocklehurst

james brocklehurst — Thu, 17 Jun 2010 14:17:52 +0000

The 'Rainbow' add-on for Firefox lets you inspect the colour of web page elements and gives you hex, rgb and hsl values. It also has a colour picker. Won't let you select anything off-page though. https://addons.mozilla.org/en-US/firefox/addon/14328/