Speaking about color: hue, value, saturation, chroma, shade, tint, tone | Hacker News Reader

Speaking about color: hue, value, saturation, chroma, shade, tint, tone

landor.com

52 pointsDiamondsSteak16 comments

He says "value", but he seems to mean "lightness". See http://en.wikipedia.org/wiki/HSL_and_HSV for a discussion (and neat graphs) of the differences between the two. I really like using HSL to choose colors since it is very intuitive (much more than RGB) and it's really nice to programmatically choose similar colors by just tweaking the saturation and lightness parameters.

First, value and lightness are synonyms in this context. The name value comes from the Munsell system, http://en.wikipedia.org/wiki/Munsell near the beginning of the 20th century, and the name lightness is what color scientists finally settled on a few decades later. Unfortunately the terms’ usage in the HSL and HSV models doesn’t have terribly much to do with the human-vision-relevant definition.

It’s too bad that the author of the linked-to post claims that chroma and saturation mean the same thing though. They don’t.

Anyhow, thanks, I’m glad you liked the pictures (I drew many of them). If there’s anything about that HSL/HSV article that could use improvement, feel free to comment here or send me an email (or you could of course leave a message on the wiki talk page).

For what it’s worth, I don’t think HSL is very intuitive. It’s basically the same thing as RGB, just tilted on one end and squished a bit into a cylinder shape (as shown here e.g., http://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg). For some discussion of why, see http://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages but the short explanation is: HSL is a model designed for the hardware limitations of 1970s workstations, and much more perceptually relevant models are computationally cheap enough today.

The idea would be that human vision is more responsive to ligh intensity than color intensity, and so, to optimize a display medium, we can use more bits for lightness and less for other color information. And to do that, we need a color space that treats lightness as a separate coordinate.

Secondly, designers need a color space that conforms more naturally to human vision.

I think we should be doing most of this math in floating point, so it's not about optimizing numbers of bits (modern buses are getting fast enough to send 12 or 16 bits per channel per pixel to the display, so we don’t really need to optimize bandwidth there either necessarily), but mostly about helping everyone (designers, photographers, regular people) use models which are related to the way we see, rather than computer reproduction technology.

We could attempt to use an "unbound" version of a color sistem (i.e. RGB with -inf..+inf ranges rather than 0-255 for each channel). Even if the display medium can only handle a limited band of colors, more color information may be useful (like in HDR).

I find that HSL is intuitive when I'm trying to get some similar colors together for a UI element where I need kind of a gray version and a highlight version in addition to the base color. The grey is just saturation dropped and the highlight is some extra lightness. If the hue stays the same then everything matches nicely. That's much harder for me to do directly in RGB.

What do you think is a more intuitive model? I'm always happy to learn something new.

I think the wikipedia page is great--I've used the math on it to write conversion routines in the past.

If you just drop the HSL "saturation" to get a gray, you quite dramatically change the lightness in many cases.

More intuitive models:

Munsell Color System (related to rigorous experiment in the "Renotations" of the 40s. Many later models were attempts to model Munsell space with a closed formula instead of the lookup table that defines the Munsell System itself): http://en.wikipedia.org/wiki/Munsell_color_system

CIELAB, the de facto standard for many decades in colorimetry, used for example in many color management modules, defined in the mid-70s. (pretty weak article) http://en.wikipedia.org/wiki/Lab_color_space

IPT: I have no great links handy, but there's a mention here http://documentation.apple.com/en/color/usermanual/index.htm...

CIECAM02, the 2002 recommendation of the technical committee scientists studying this stuff, http://en.wikipedia.org/wiki/CIECAM02

Not sure if it'd be useful to people here, but years back I wrote a few chapters for a book: Web Graphics for Non-Designers. Parts of one of my chapters, Using Color, were made available as an excerpt to read here:

http://www.webreference.com/authoring/graphics/color/nondesi...

Not sure if any of the screenshots date it embarrassingly, but it might be useful to someone wanting to become more comfortable with their colour use.

To be honest (and I mean no offense), a lot of that material is somewhat misleading. For example, this statement,

> “At the heart of basic color theory lie the three Primary colors: red, yellow, and blue,”

comes straight out of the 19th century (or the 17th) – for coverage of primary colors see http://www.handprint.com/HP/WCL/color6.html – and this:

> “Intensity: Also known as saturation or chromaticity”

is not the way those terms are used today by people trying to use precise terminology. Intensity is reserved for counts of photons, chromaticity encompasses two dimensions, and as you describe it what you’re really talking about is chroma, not saturation.

All the stuff about triadic and tetradic and alternate complementary schemes, while it seems to be popular among some “color theorists” (whatever that means) is pseudoscientific creation of jargon divorced from any evidence-based underlying structure.

Edit: definitely take a look at the Maureen Stone SIGGRAPH course notes for something pretty accessible and good, http://graphics.stanford.edu/courses/cs448b-02-spring/04cdro...

I must acknowledge your superior knowledge in this space (and upvote!) and perhaps excuse my effort back then by saying that the publishers were after something fairly accessible - perhaps a shortcut to creating something attractive despite not being a designer first and foremost. If I were introduced to colour/design via the link you provided, I would've run away screaming. :)

When I design, the colour choices just come naturally. I've never consciously made decisions based on the schemes listed (though they often fit those), so it's one of those things that's difficult to describe in a single chapter within a 10mm thick book, or even at all.

Interesting article. Really though, a lot of it is more the connotation (this has too high contrast = too much saturation) vs. definition (the tint should be moved 56 to the right). One of my side projects tries to help people understand these relationships between color [1]. Really, the easiest thing to do is show the a color wheel (kuler rocks for this).

[1] - http://colorstreamapp.com/

> Shade means to add black to a color and deepen it in value

This is really useful bit of information to keep in mind when working with colors - darkening a color requires not only decreasing its L (lightness), but also increasing its saturation (S). Without that the color will loose their intensity and will appear more gray-ish. It took me over a year to arrive at this empirically, so designer wannabes do pay attention here :-)

This is likely an artifact of working in a color model which badly describes the relation between lightness and chroma or lightness and saturation.

If you manipulated colors in a more reasonable color space (this is the fault of tool designers, not users) then you wouldn’t have to spend extra steps of indirection to change the (visually relevant) parameters you care about.

(Edit: and to be clear, my frustration is completely directed at all the software that uses HSL, not at its users.)

Yep, I agree. However the conventional HSL model found in pretty much all graphic software has the problem I described.

The best (scientifically sound and recent) information about color perception i found is in Colin Ware books :

- Information Visualization : perception for design (chapter 4 about color)

- Visual Thinking (more accessible).

So where are the RGB coordinates on there?

Reply on news.ycombinator.com