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

http://www.landor.com/?do=thinking.blog&post_id=23223

by DiamondsSteak • 16 years ago

52 16 16 years ago

__david__2• 16 years ago

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.

jacobolus5• 16 years ago

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.

iwr2• 16 years ago

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.

__david__2• 16 years ago

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.

sahillavingia• 16 years ago

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/

prawn2• 16 years ago

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.

jacobolus5• 16 years ago

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...

prawn2• 16 years ago

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.

huhtenberg2• 16 years ago

> 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 :-)

jacobolus5• 16 years ago

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.)

huhtenberg2• 16 years ago

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

sz• 16 years ago

So where are the RGB coordinates on there?

ljegou• 16 years ago

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).

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

Related Stories