Screencast: Why HSL Colors are Awesome

on | 5 Comments

Some of you might know that I did a screencast series for that served as a companion piece to the book of the same name that I co-authored.

In that video series, I covered a number of the new CSS3 and HTML5 features, and one in particular that I haven’t written much about on this site is HSL (or HSLA) colors.

Below you’ll find the video originally titled “HSLA Colors”. In the Learnable series, this video is Step 2 of Lesson 7. Enjoy.

Viewing tip: Click the “change quality” icon (next to the “CC” icon) to select “720p HD” quality, and then use full screen. I can’t figure out how to embed YouTube videos in HD.

If something’s wrong with the embed above, here’s a direct YouTube link:

Some related links:

5 Responses

  1. Natan Shalva:


  2. Ana:

    I may be wrong, but I think the embedded player automatically plays the version that is appropriate for its size – in this case, the player is not large enough to display the HD version.

    • You might be right, I’ll have to test that out, thanks. All the methods that I read about that claimed to embed HD never worked for me, which I thought was odd. I guess it would make sense that it needs a minimum size.

  3. Hi Louis – Thanks for featuring my RGBa / HSLa for IE converter in your screencast and for pointing out that bug. I’ve gone in and tweaked it so it doesn’t require the leading 0 anymore.

    • Cool. I probably should have informed you about that a while ago, because I’ve known about it for a while. But it wasn’t too big a deal anyhow. Thanks again for the tool.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.