Ugh. This is well meaning, but because based on a color model with a very tenuous relation to human color perception, with further decisions built on loose heuristics without rigorous support (and apparently ported from paint mixing advice), the choices made are pretty arbitrary, yielding poor results.
This part in particular ...
> Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100%) and at half lightness (50%) - this way you start with the 'most colorful color' you can get. ¶ Generate your second color without having to guess what will work. Thanks to science and wavelengths, we know that this works. The opposition of these two colors stimulate your photoreceptor cells in a good way!
... ends up being poor advice in general, “science and wavelengths” notwithstanding. Any pair of decently separated hues will do just as well as a pair of HSL “complements”, as long as the chroma and lightness are carefully chosen. If you take this specific advice and just rotate the hue around in HSL space, all of the perceptual color relationships will swing wildly.
Someone following this program who has a lot of experience with visual art / design will end up making reasonable choices based on intuition and past experience, but that will be in spite of this guide, not because of it.
Sorry to be harsh, but in my opinion non-experts will get better results than this blog post’s recommendations by just choosing perceptual lightness (e.g. in CIELAB space) of each color to have sufficient contrast, and then picking the hue/chroma entirely at random, or using any other desired criteria.
Here’s what Cynthia Brewer, expert in color choices for maps and diagrams, had to say about models like HSL and HSV:
> Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don’t be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same ‘lightness’ but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY.
If anyone is looking for a better resource, the best one I know of on the web is http://www.handprint.com/LS/CVS/color.html. Otherwise, I recommend going straight to books. There are a variety of available books at every level of technical detail.
Someone making a color scheme for a chart needs to be very rigorous indeed, because color is actually how the data is represented, in some cases.
The tutorial seems to be aimed at front-end developers that want to put together a color scheme for a website. In this case, color is more like decoration, so it doesn't need to be as rigorous, IMHO.
My basic claim is that contrast in perceived lightness (a.k.a. value, in Munsell’s terminology) is the most salient color attribute in graphic design.
This is based on the architecture of human vision. When light comes into the retina, it is measured by three different types of detectors called cone cells (“long” L, “medium” M, and “short” S). But the independent signals from these cone cells are not directly passed to the visual cortex. Instead, at the first layer of processing, the cone cell responses are combined into 3 different signals, a brightness response (L + M), and two color difference signals, yellow–blue (L + M – S) and red–green (L – M). The brightness signal has the finest resolution, and is used for detection of edges, textures, fine details, motion, depth, and so on. The color difference signals are layered on top of that. “Lightness” or “value” is a perceived attribute of surface color based on the brightness response. (Caveat: this is a pretty simplified description.)
Almost any color scheme you choose which has enough lightness contrast will tend to look okay, especially if you avoid picking colors which are outrageously colorful. On the other hand, categorically, any color scheme you choose which does not have enough lightness contrast will look bad (will look muddy or clashing, text will be illegible, etc.).
Any color guide which doesn’t start with a discussion of lightness contrast is in my opinion doing a disservice to its readers.
Unfortunately, the “L” in HSL and the “V” in HSV are not remotely close to real measures of perceived lightness (value). You need to go to a different color model. The most established choice is CIELAB, from the mid-1970s, supported in a wide variety of software.
HCL keeps the perceptual uniformity and I think is friendlier than L\a\b\*.
Almost any color scheme you choose which has enough
lightness contrast will tend to look okay, especially if
you avoid picking colors which are outrageously colorful.
Solarized[1] is a color scheme that did that and I think it's great.
LCh is just the cylindrical coordinates of CIELAB. It’s the same model.
(Ideally I would include asterisks and subscript ab in the symbols LCh to distinguish this from e.g. the cylindrical coordinates for CIELUV, but this forum doesn’t support it.)
What fascinates me about human color perception is our brain actually interpret everything as a mix of the four colors you mentioned: red, green, blue and yellow; the opposites of the two color axes. It's why it seems so weird at first that yellow is a mix of green and red while our brain perceive it as a totally different color; it is a color of its own in our brain.
Color vision deficiencies (specifically dichromacy and monochromacy) need to be taken into account; the more important it is to convey (hazards) the more necessary it needs consideration.
i was going to post a comment along the lines of... and once again everyone has to have perfect colour vision....
what is it with these "experts" that think the way they see things is correct?
ever met someone with less than perfect vision... ever heard of someone with less than perfect vision?!?!
this is why you have high contrast modes on your operating system, and colour blind mode in some games (not enough of this)
I agree with you. I used to think of working with color mathematically, until I started researching how color perception actually works. I was working in an imaging science lab at the time. That made me realize how difficult it is to come up with any sort of mathematical approach to creating a color scheme.
It's much better to find color schemes that are recommended by experienced designers. And if you're working on a diagram, trying to design it to be effective with some large number of colors is probably futile, if color is going to be the sole visual discriminant. It's better to keep your number of elements small, if you can. And if you can't, pick a small number of colors, and combine them with textures to get a larger number of combinations.
This part in particular ...
> Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100%) and at half lightness (50%) - this way you start with the 'most colorful color' you can get. ¶ Generate your second color without having to guess what will work. Thanks to science and wavelengths, we know that this works. The opposition of these two colors stimulate your photoreceptor cells in a good way!
... ends up being poor advice in general, “science and wavelengths” notwithstanding. Any pair of decently separated hues will do just as well as a pair of HSL “complements”, as long as the chroma and lightness are carefully chosen. If you take this specific advice and just rotate the hue around in HSL space, all of the perceptual color relationships will swing wildly.
Someone following this program who has a lot of experience with visual art / design will end up making reasonable choices based on intuition and past experience, but that will be in spite of this guide, not because of it.
Sorry to be harsh, but in my opinion non-experts will get better results than this blog post’s recommendations by just choosing perceptual lightness (e.g. in CIELAB space) of each color to have sufficient contrast, and then picking the hue/chroma entirely at random, or using any other desired criteria.
Here’s what Cynthia Brewer, expert in color choices for maps and diagrams, had to say about models like HSL and HSV:
> Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don’t be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same ‘lightness’ but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY.
http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html
If anyone is looking for a better resource, the best one I know of on the web is http://www.handprint.com/LS/CVS/color.html. Otherwise, I recommend going straight to books. There are a variety of available books at every level of technical detail.