Visualizing Colors in HSL Space

Published 5 years, 7 months ago

I’ve been working through and rewriting the chapters of CSS: The Definitive Guide for its fourth edition, and at present I’m nearing the end of chapter 4, “Values and Units”.  That means I just worked through the color values, which required a lot more of a rewrite than you might think.  After all, when the third edition came out, RGBa, HSL, and HSLa weren’t viable options, so they didn’t get coverage.  Expanding the color-values section to incorporate them posed two major challenges.

First, I couldn’t just drop them in as add-ons; the whole section had to be partially rearranged, and chunks of the text rewritten or replaced.  Okay, yes, I admit, that’s par for the new-edition course, and I’m not complaining so much as describing.  The far more troubling challenge: how to explain HSL in a grayscale book.

(I should note that I’m hoping to convince O’Reilly to make the move to color, even though that likely means reshooting damn near every figure in the text.  Even if full color for 600-700 pages is not economically viable, which has always been the problem in the past, then I’m hoping for at least a set of color plates.  We’ll see!  At present, though, I have to assume we’ll be committing grayscale to paper.)

Partly the challenge here is one of clear explanation and illustration, which is never easy even in the most ideal of environments; but the other part is that I’ve never really been comfortable with HSL.  I know it’s held to be far more intuitive than RGB, but I have 30 years of RGB experience and next to no HSL experience.  I can’t help but have that color my perception (ah HA ha).

In an effort to overcome my discomfort, I started messing around with the relationships between HSL and more familiar colors, starting with keyword sets.  I’ve spun two visualizations out of that effort:

  • HTML4 Color Keywords in HSL—wherein I map the sixteen color keywords defined in HTML4 onto an HSL color wheel and grayscale bar.  What I really like about the end result is the clear evidence of careful color selection.  It’s a balanced set, at least mathematically, and seeing the relationships between the colors and thus how to present them helped me develop a fair amount of HSL intuition.

    This was also an excuse to attempt cleverness with CSS Transforms.  The results please me.

  • SVG/CSS3 Color Keyword Distribution—mapping out how the full set of 147 SVG/CSS3 (neé X11) color keywords are distributed around the hue wheel.  Not very well, as it turns out.  I don’t know that this taught me very much about HSL itself, but I did get a firmer grip on the interplay between saturation, lightness, and luminance, all of which helped a great deal in the arrangement of the ‘spikes’.

    This one turned into an excuse to play with canvas drawing, after Mårten Björk responded to a Twitter request with a huge head start on the problem.  Originally, this was going to be another Transformapalooza, but I’m glad it went in this direction instead.

Thanks to these visualizations and (more importantly) the programming and thinking I did to create them, I’m now much more comfortable with HSL.  As a result, the “HSL and HSLa Colors” section of chapter 4 is a lot better than it would have been.  I even came up with what I think are some pretty good ways for illustrating HSL in a grayscale environment and ways to link it to the RGB model for the benefit of people like me.  The book will be a lot better for it when it finally comes out.  In the meantime, I hope you enjoy the visualizations!

  1. One thing I thought was interesting was just how closely related HSL and RGB are, by learning how to very simply transform one into the other.

    Start with the RGB cube, where black is in one corner, and the three axises are R, G, and B, with white in the opposite corner.

    Rotate the cube so that the black corner is at the bottom, the white corner is at the top, and the six primaries are zig-zagging around the middle. This, more or less, is already the HSL color-space. The vertical line connecting black to white is the lightness axis, the angle around that axis is the hue, and the distance from the axis is the saturation. We just need to modify it a little bit more to be easier to work with.

    First, compress the zig-zaggign primaries so that they all sit on a disc at 50% lightness. This changes it from a rotated cube to a double hex-pyramid. Then, “pop” out the sides of the hexagon base so it becomes a circle, giving you a double cone. Finally, expand the point of each cone so that it becomes a cylinder. You’re done! That’s the HSL colorspace, exactly.

  2. For me, the breakthrough was when I realized that you can get the HSL wheel like this:

    1. Put ‘red’ rgb(255,0,0) at 0º, ‘green’ rgb(0,255,0) at 120º, and ‘blue’ rgb(0,0,255) at 240º.
    2. Have each color extend 60º to either side of its starting point.
    3. In the 60º to either side of those 120º wedges, run down from 255 to 0. (Or fade from 100% opacity to 0% opacity.)

    That’s the hue wheel.

    Given that we assume the RGB-decimal values max out at 255 (step 1), then this particular wheel will be at 100% saturation and 50% lightness. You can get other saturation/lightness values by varying the starting RGB colors in step 1, though that makes the fading a little more involved.

    I may produce this visualization as well, though it likely requires animation and so will take a little longer to plan out and put together.

  3. Is it possible to have a web link to show the color examples instead of requesting the book in full color?

  4. […] Visualizing Colors in HSL Space […]

  5. Jim, that is a possibility, though I try to make books self-contained if at all possible, since that seems to me one of their primary benefits. But if all else fails, yes, I can toss in a URL that I’ll do my utmost to never break.

  6. I made this demo using SVG for my students.

    Although the page design leaves something to be desired, I think it is quite useful.

  7. […] CSS – Visualizing Colors in HSL Space “In an effort to overcome my discomfort, I started messing around with the relationships […]

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

Comment Preview

If you're satisfied with what you've written, then go ahead...