Visualizing Colors Again
Published 12 years, 6 months pastJust a quick followup on HSL color visualizations and CSS: The Definitive Guide.
To take those two things in reverse, I got word from my editor that color is definitely an option for the book, though the exact form it will take is not 100% certain. The options range from an insert of color plates to printing color on a per-page as-needed basis, and it’s hard right now to know what will make the most sense for the book and its price. We’re hoping for the per-page approach, but it will depend on just how fast color prices plunge in the near(ish) future and what the book requires. The glorious, glorious upshot is that I can abandon all thought of grayscale requirements and only concentrate on avoiding light yellows, which I guess print badly.
As for visualizations, I created another to go with the HSL-16 and HSL-147 visualizations I mentioned in an earlier post:
- Getting HSL from RGB — a look at how the arrangement and fading of the three primaries yields the complete hue wheel. Its point is a little less obvious than the others, but (I hope) only by a little. If you’ve ever wondered how RGB and the hue part of HSL relate to each other, this visualization should help answer the question.
I think I’m done with visualizing colors for now, but I think I said that before, so you never know. I mean, you know, colors, man! What do they mean?
Comments (7)
My feeling is that you are treating HSL too much like RGB. That misses the intuitive way that we think about color. HSL is desirable because we see a color and say to ourselves, we want it to be a little warmer or cooler, lighter or darker or more or less saturated.
HSL allows us to do that intuitively. If all the colors are already determined before hand, it does not matter what model you use. But if you are trying to tweak a color, even with years of RGB experience, it is not as intuitive as HSL.
Our relation to the HSL color model is relative, while the RGB is more absolutem since that is how the computer itself sees it.
I hope you realise that RGB is an optical illusion that makes you see the entire colour wheel even though it isn’t there. There’s no yellow on any page on the web (for instance) only a trick that makes you think there is. HSL is a declarative specification for real colours (implementation independent). RGB is an implementation that tricks your eyes into thinking it sees what has been specified.
onno, I’m better able to intuitively tweak colors in RGB than in HSL—or, at least, I was until I started doing these exercises. Now they’re about even, I‘d say. Scoff if you like, but I worked exclusively in RGB for about three decades and thus built up an intuitive feel for it. If I could hit a reset button on my internal color models, sure, I’d start with HSL. It would be a lot easier to grasp quickly. I don’t have that luxury(?) but must instead work from where I am. I bet there are other people in similar situations.
Steven, since I can see yellow on web pages, it hardly matters whether it’s a trick or not.
onno: I’m in the same boat as our esteemed host: HSL is totally NOT intuitive to me, but RGB is, because I’ve been using it for over a decade and a half.
I will grant that “lighter/darker” is intuitive, because, well, duh.
But “warmer/cooler”? In my mind, that only really (justabout) maps to red/orange=warm, blue/white=cold. I have no feel at all for how that maps to the HSL wheel. I can’t figure out where black fits into the model. Is purple “cooler” than red? Doesn’t necessarily feel like it to me.
I have even less intuition about saturation, and the idea of mapping the ROYGBIV of the spectrum to a 0-100 numeric just feels bizarre.
So, regarding “the intuitive way we think about colour”, I would suggest that HSL is a way of thinking that is taught in the graphics/print world (and thus photoshop etc.), and it feels “intuitive” to many people due to familiarity.
Those of us who’ve come up from non-print backgrounds, and been moulded more by the RGB model used in TV/computer display hardware (and thus most programming colour models under the hood) may have a different view of “intuitive”.
In short: I think this is a very subjective area, and there are going to be very different answers for different people. Thus: HSL in CSS is a good thing; I might give me a headache, but for people who grok it, it will be easier for them to work with, and there are conversion tools I can use when I need to read someone else’s code.
Which one is easier to learn for those ignorant of both? I have no idea.
Steven: wikipedia alleges that HSL is a mathematical transform of RGB, and thus also device-dependent. However, chasing down the device dependency distinction is probably going to end at “it’s all just different wavelengths of light, and here’s how your eyeball translates it into concepts you perceive as colour”. Which is even more “real”, but much less useful to most people.
Until colour management really works cross-platform (for all the meanings of that term) I think that which RGB/HSL model you use is kinda moot.
I would imagine that light yellow would be hard to see on non coated stock.
Habits are different than intuition.
Our eyes see RGB, as does the monitor, so the way everything works is RGB. RGB is absolutely useless if you are a painter, however, for everything works on the bases of warm or cool, based around the properties of certain pigments, of at least five or so colors used to create the rest of the colors, in addition to black and white.
With the HSL, you start at the warmest point, 0 for red, and slowly get cooler, orange, yellow, green, until you get to red’s complement, which is cyan, at 180 degrees. You start warming up the colors with blue, purple and magenta.
Cool colors recede, while warm colors do the opposite.
Saturation is how much pigment is used to create the color, so no pigment, all you have is the base, or white.
The main thing to think of in my mind is seeing that the colors change every 60 steps, so red (0), yellow (60), green (120), cyan (180), blue (240), magenta (300). You can see both Red Green and Blue (RGB have the compliment of cyan, Yellow and Magenta (CMY(K is added because inks are not pure, and need black to compensate)
These numbers repeat themselves, so you can put in 420 to get yellow in Chrome.
Relationships to colors are actually different than the way HSL is modeled, but it is a lot closer than RGB.
As to switching from RGB to HSL, it is hard to break habits, but once you do get HSLA, I think you will find it easier to tweak a color to be exactly where you want it, because adding or subtracting red, green or blue is not intuitive, while saturating or desaturating colors, lightening or darkening them, or making them warmer or cooler is.
I do understand that once you have worked in RGB, and have developed an internal map of how changing RGB values changes the color, that also works, but that does not mean it is intuitive.
It actually took me a while to warm up to HSL, even though my painting background should have made it a natural, but now that I have, I prefer it.
So habits can be broken.
And my attitude is not a scoffing at all. I was trying to be mindful of the habits and the reasons why HSL is more attractive to people who think in color, and I wanted to share that.
Apparently you and I have different definitions of “intuitive“, onno—but that’s the beauty of language, non? Anyway, nothing against HSL (any more than RGB), it’s just interesting to look at ways they interact.