Comments on: Visualizing Colors in HSL Space

By: Design Focus: A Concentration of Orange | Devlounge

Design Focus: A Concentration of Orange | Devlounge — Fri, 08 Jun 2012 13:06:07 +0000

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

By: Lars Gunther

Lars Gunther — Thu, 07 Jun 2012 19:57:48 +0000

I made this demo using SVG for my students. Although the page design leaves something to be desired, I think it is quite useful.

By: Eric Meyer

Eric Meyer — Tue, 05 Jun 2012 13:50:44 +0000

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.

By: Some links for light reading (5/6/12) | Max Design

Some links for light reading (5/6/12) | Max Design — Tue, 05 Jun 2012 10:46:32 +0000

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

By: Jim

Jim — Tue, 05 Jun 2012 03:25:50 +0000

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

By: Eric Meyer

Eric Meyer — Mon, 04 Jun 2012 15:51:06 +0000

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.

By: Tab Atkins Jr

Tab Atkins Jr — Mon, 04 Jun 2012 15:40:19 +0000

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.