Screencast: Why HSL Colors are Awesome

Some of you might know that I did a screencast series for Learnable.com 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:

http://www.youtube.com/watch?v=A60HjujkzhI

Some related links:

5 Responses

  1. Natan Shalva says:

    Thanks!

  2. Ana says:

    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 and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).