
Design for Hackers: Why Monet Never Used Black, & Why You Shouldn't Either - kadavy
http://www.kadavy.net/blog/posts/d4h-color-theory/
======
city41
Fine painters will almost never use black. The pigment in black paint is very
deadening and harsh, it's difficult to work with. It's much better to take the
time and create dark hues from the rest of the color wheel. A standard
exercise in color theory classes is to create black from the primary colors.
Most people end up with brown, but a beautiful, rich black and nearby shades
can be accomplished, and it's worth the effort.

It's an entirely different ball game though when you switch from a subtractive
color system (which is what painting is, the primaries being cyan, magenta and
yellow) to an additive one (which a computer monitor is, with the primaries
being the well known RGB). In an additive system dark hues are only
accomplished by removing light instead of adding pigment, so the problems a
painter faces with black don't exist quite in the same way. So comparing
website/app design to Monet is a tiny bit far fetched.

It seemed like a lifetime ago but I used to live and breath this stuff, even
got a degree in painting. I guess it wasn't entirely useless :)

~~~
demallien
_Fine painters will almost never use black. The pigment in black paint is very
deadening and harsh, it's difficult to work with. It's much better to take the
time and create dark hues from the rest of the color wheel. A standard
exercise in color theory classes is to create black from the primary colors.
Most people end up with brown, but a beautiful, rich black and nearby shades
can be accomplished, and it's worth the effort._

Really? I have to admit that this surprises me. Black and white aren't on the
same dimension as the hue. Playing with just the primary colours doesn't allow
you to change the lightness of the mix. Depending on the lightness of your
primary palette, you're going to produce some shade of grey, not black...

That said, I'm not actually trying to contradict you, I'm just stating my
understanding of the theory - I'd love it if you can explain to me where I've
gone wrong! :)

~~~
stan_rogers
"Black" isn't. There are very dark browns and blues. Despite what the
grandparent posting said, fine painters actually do use black, but not to
produce darks (at least not in oils); the most common use for lamp black (the
most neutral of the black pigments) is to create the iris colour for blue eyes
in oil portraiture. For deep shadows, though, black pigments are very
problematic in that it is extremely difficult to control the transition out of
darkness.

Because painting is a subtractive medium, one can obtain nearly the same level
of darkness using other dark pigments in combination. An "old masters"
chiaroscuro typically uses burnt umber plus a warm blue, such as aquamarine,
for the great lake of "blackness" from which everything else emerges. Each of
those pigments alone prevents the reflection of a rather broad segment of the
spectrum, and together they approach true blackness. That, then, allows the
artist to manage the transition out of darkness into either a warm or cool
tone smoothly by decreasing the amount of the unneeded tone before lightening.

Painters who use the Impressionist pallette will never go anywhere near that
level of darkness -- their shadows will generally be just below a mid tone
using the main colour of the object, cobalt or aquamarine blue, depending on
the warmth or coolness of the main tone, and the complementary colour of the
main tone, all in juxtaposition rather than as a mixture. The apparent
darkness comes from contrast. The same principle, though, is used to create
shadows in classical painting techniques (but with mixture) -- a darker
version of the main tone plus the complement and often a touch of blue.

These rules apply to oil painting. Pure pigments in oil are darker out of the
tube than you might imagine due to the optical properties of the oil (which is
why white paints are sold in huge tubes). In a medium like soft pastels, which
doesn't encapsulate the pigment in a continuous film of a binding medium,
blacks are used to create the bottom end of the spectrum out of necessity.
Even then, though, a pure black is almost never used.

------
edw519
Nice post. Bookmarked and saved in my folder for great web design resources.

Although I'm not sure why anymore. No matter how much I try, my designs always
come out horrible. Every time I ask someone for their opinion on a concept,
they're first answer is, "Hire a professional designer."

Funny, I can visualize 9 layers deep into embedded code or enterprise data,
but I have trouble with orange, purple, and all fonts.

FWIW, here is a list of the other links in that folder. Maybe they'll help
someone else more than they've helped me.

<http://colorschemedesigner.com/#>

<http://websitetips.com/colortools/sitepro/>

<http://www.colorsontheweb.com/colorwizard.asp>

<http://960.gs/>

[http://webdesignledger.com/inspiration/15-stunning-
examples-...](http://webdesignledger.com/inspiration/15-stunning-examples-of-
data-visualization)

~~~
awolf
FWIW I was once in the same boat as you. About three months ago I decided that
being able to create decent designs was a tool I needed to have in my toolbox.

What worked for me: I learned to draw. It took a lot of practice as I really
sucked initially. I recommend getting a notebook with grid lines and a ruler.

It takes a lot of patience to pay attention to all of the details but it pays
dividends. With drawing as an intermediate step between having something in my
brain and having something in pixels I'm much better at capturing a vague
visual concept, iterating, and bringing it to life.

I suspect this process will be different for everyone- this is just what
helped me (after years of limping through the design process).

~~~
darnton
If you want to learn to draw and don't know where to start, get a copy of
_Drawing on the Right Side of the Brain_ by Betty Edwards. You will be stunned
at how quickly you can improve.

[http://www.amazon.com/New-Drawing-Right-Side-
Brain/dp/087477...](http://www.amazon.com/New-Drawing-Right-Side-
Brain/dp/0874774195/)

~~~
thereddestruby
I went from not being able to draw a smiley face to drawing myself in a way
that resembled a human and was even recognizable with that book.

A good book to read after you are done with Drawing on the Right Side of the
Brain is Nicolaides The Natural Way to Draw. It's a lot of hard work, but it's
worth it in the end.

------
scott_s
_There is still enough contrast as to be readable, but the contrast isn’t as
harsh as black vs. white._

Still readable, yes, but I find the black _more_ readable. Taking webpage
design cues from schools of painting is a fine strategy as long as you
remember that webpages have a different goal from paintings. This implies that
everytime you transfer something from a school of painting to webdesign, you
have to ask yourself "Does this principle undermine the purpose of a webpage?"

~~~
alsomike
Maybe you will find this interesting: graphic designers have lots of rules
about the proper use of typography when laying out a document, like correct
kerning, use of old-style numerals, ligatures, etc. The reason for following
those rules has to do with the same principles of harmony and naturalness in
this blog post, but when researchers tested the impact of "good" typography
vs. "bad" typography, they found no differences in performance measures like
reading comprehension or reading speed. They did find differences on other
measures - in the good typography condition, participants underestimated the
amount of time they had spent reading (a measure of engagement with the task)
compared to participants in the "bad typography" condition.

But the most interesting finding was when they tested creative cognition - on
that test, the "good typography" participants scored much better than the "bad
typography" participants. This might explain why we designers insist on good
typography (and other design principles). Creativity is a big part of our job,
and we want to avoid things that might impair the performance of our creative
cognition. But for people in other, "left-brained" professions, enhancing
creativity is less important and engaging people is less important, so it
makes sense that they would see design rules as irrelevant extra work of
little value.

Designers rush to judgment when they see "bad" design because it almost
literally hurts their brain. But, maybe the person who designed it or the
audience for it doesn't have that kind of brain - and that's OK.

~~~
scott_s
I think high contrast text _is_ good typography.

 _But for people in other, "left-brained" professions, enhancing creativity is
less important and engaging people is less important, so it makes sense that
they would see design rules as irrelevant extra work of little value._

If you assume my work requires no creativity, or that I think design rules are
irrelevant, then you are mistaken. I don't like design for the sake of design.
I do like design that looks good and enhances a things intended purpose.

~~~
alsomike
I don't think you're work requires _no_ creativity. But I think you have to
explain why visual design that's experimentally shown to impair creative
cognition is tolerated and even embraced by people in "left-brained"
professions. My explanation is that people just have different needs. Not
everyone needs high octane gas, and designers shouldn't assume that they do.

"Design for design sake" is just another way of saying you don't share the
designer goals of engaging an audience and enhancing creative cognition.
There's nothing wrong with that, people have different needs, so "good" means
something different to a designer than it does to you.

~~~
eagleal
So, you write a paper on a recent physics experiment. You publish it on
Science magazine, or your Lab. Both of them have carefully designed templates
(science mag specializes in this). Creativity involved.

You just compiled your CLI program, and you're testing it's output. You're
staring at specialized typefaces and an optimized screen. Creativity involved
(you aren't a good programmer if you lack creativity).

The other side: you're a store manager, programmer manager, or X manager, you
have to make a fast presentation of your key notes. You start PowerPoint, and
select some template. (Creativity Involved?)

------
mynameishere
Here's a tip: Open a book. Any book. Note the color of the ink. Now use that
color for your fonts and try to ignore the wankers trying to confuse art with
information conveyance.

~~~
kadavy
Color of ink on a book != color you perceive, when compared to a monitor.

The most pleasing books to read are on a cream stock ( _The Elements of
Typographic Style_ comes to mind), and thus have a bit less contrast than #fff
vs. #000.

~~~
eru
Black ink on cream paper may have more contrast than black on white on a
screen.

------
jjcm
I'm a web/logo designer, and here's why this is wrong:

First off it's trying to apply the rules that dictate one medium to another.
While certain basic principles often transverse mediums, this does not.
They're trying to state that what works for blending colors in an art medium
will work for trying to convey information on a content delivery medium.
Remember though that in impressionist paintings the focus is on the lighting
and the brush strokes, generally with an ordinary subject matter - or rather,
the focus wasn't on the information, but on how it was presented. This is
almost entirely opposite to what the web brings to the table - the focus is on
the information, with the presentation being a way to best show that
information. If you focus on the design over the content, you'll end up with a
pretty site, but one that isn't functional. As programmers and hackers, all of
you should know how well that ends up.

Also though, keep in mind that Monet was one painter out of millions using one
style out of thousands. What about ink and wash paintings
(<http://en.wikipedia.org/wiki/Ink_and_wash_painting>)? Their entire focus is
on the subtle and effective use of absolute black. Remember that there is no
universal dos or donts in design, just guidelines. Saying you should "never
use black" (or any color for that matter) is like saying you should never use
X tool in your arsenal. You should never purposefully limit your tools, rather
you should learn how to effectively use all the tools you have. Given the
right conditions, even a goto statement can be the correct choice.

------
telewriting
Color in a painting behaves quite differently than color on the screen. When
dealing with a monitor we are looking at additive color, when looking at a
painting it's subtractive. The more color I add on the screen the brighter the
color becomes e.g., RGB 255 255 255 would be white. The more paints I mix
together, the darker the color becomes.

The color wheel given doesn't describe additive color relationships. In RGB
land, the complements for the primaries are generally given as follows: red
cyan, green magenta, yellow blue. Please see
<http://en.wikipedia.org/wiki/RGB_color_model>

The reason that green and red "pop" is because we have the largest number of
red and green cone cells in the fovea, that area of the eye responsible for
our most central vision. Colors are not by default "cool" or "warm" they are
only such in relation to context. We could have a "cooler" blue next to a
"warmer" blue.

------
andrewl
NASA's Ames Research Center has a great site called "Using Color in
Information Display Graphics":

<http://colorusage.arc.nasa.gov/>

It has articles, tools, a bibliography, even an entire section devoted to
designing with blue:

<http://colorusage.arc.nasa.gov/blue_2.php>

It's geared more for functionality than beauty, but that suits me fine. I
mostly do web sites for other departments in my company, and clean,
functional, and not actively unpleasant are all I need to deliver. They're
also pretty much all I'm _capable_ of delivering. Beauty is way beyond my
abilities.

~~~
kadavy
It seems ironic that NASA would have something to say about information
design, considering... <http://www.asktog.com/books/challengerExerpt.html>

But, maybe they've learned their lesson?

~~~
andrewl
Maybe. Or maybe the group that did the above site was already around at the
time of the Challenger disaster, but half of NASA had never heard of them.
From what I've seen in large organizations, it's not unusual for there to be
departments doing valuable work that could make the company millions, if only
anybody knew they existed, or understood what they were talking about. I
wouldn't be surprised if NASA's color site was originally an under-the-radar
project done by three guys who just loved color and information design.

I have reactions similar to yours when I think about Microsoft employing Simon
Peyton Jones, or the fantastically advanced people working at IBM's Watson
research center. They do not represent the Microsoft or IBM I've come to know.

------
KevinMS
Black is very commonly used in art

<http://www.google.com/search?q=brush+painting>

Impressionists had they fancy rationalizations for why they didn't use black,
but in my opinion, because of their painting technique and style, black looks
dirty and smudgy.

~~~
icegreentea
Not just the impressionists. Most of the "classic" western painters and most
people trained in those schools don't use black. One reason is that that black
does not exist in nature. Or rather, almost never exists in nature, and these
schools of art sought to "reality" or whatever.

The rules regarding black in paintings still applies, if you're attempting to
create a somewhat 'realistic' scene. Other wise, use of black should be done
carefully. One of the things that pure black does in a coloured piece of art
(ignoring grey scale and almost greyscale) is automatically flatten the image.
You'll notice that most Chinese brush paintings actually use diluted black
ink. The fact that many of them are basically greyscale or monochromatic just
means they can get away with more black.

Also, mixing in pure black into paint to darken a colour will almost always
result in crappy looking shadows. Especially in pigment, but even in digital
art. For example, if you tried to drop skin tone into a shadow by putting 20%
opacity black it, it would look like crap.

tl;dr, in art, black is to be used carefully to achieve a desired affect. same
deal in design.

------
russell
I am not an artist, but my GF is. She never uses black and rarely uses white.
Instead she uses two or three pairs of complimentary colors in a painting from
a (virtual) color wheel with much more gradation than the one shown in the
article. She uses the cool compliment for shadows, for example. The result,
using a palate of only four or five colors, is a painting of surprising
richness.

------
jacquesm
Wow, articles that are both readable and about design.

The typography examples didn't work for me, they're all black on white.

I use this quite frequently: <http://colorschemedesigner.com/>

~~~
someone_here
The author is likely using a high gamma, which is common among designers.

~~~
teilo
Higher than 2.2? I highly doubt it. Every designer I know uses 2.2, which is
the standard for the web. Windows has been 2.2 for years. The only hold-out
was Apple, who used to be 1.8, but switched to 2.2 in Snow Leopard. Before SL,
designers would regularly calibrate to 2.2, of necessity.

------
jwecker
I remember how surprised I was when a painter friend of mine pointed out that
shadows on snow were blue, not gray.

------
mikeklaas
And yet the main body text of that page is "black" (well, unhued anyway)

------
greglockwood
> As you can see on the left side of this example, the blue block recedes...On
> the right side of the example, you see the opposite effect, with the red
> block looking almost as if it is a tower extruding towards you from the blue
> block.

I see the opposite, with the red block receding and the blue block extruding.
What does that say about me?

~~~
jcl
By any chance, do you wear glasses with a strong prescription? Color fringing
makes the apparent depth relationship of bright colors dependent on the
viewing angle.

~~~
greglockwood
Yes I do. You, sir or madam, are a smart one.

------
mrbird
What is the best color background for showing photos or videos? Flickr is
white, for example, but some other sites use black. Is there an optimal
choice?

~~~
wtracy
The main thing is to not pick a saturated color that will clash with anything
in the picture/video.

Otherwise, a very light color (white or close to it) or a very dark color
(black or close to it) will probably make the picture/video more visible.

FWIW, older users seem to prefer light backgrounds, and younger users seem to
prefer dark backgrounds.

------
RobLach
Nice link. For the past year of so I've been keeping up with design blogs and
trying to do most of the art and design I need on my own.

a hacker's mindset leads surprisingly well to design, and I think the design
side of my brain has helped in my coding.

------
Robin_Message
That's a really nice explanation, and although I wasn't sure about the effect
when I saw the orange square on the black background, the text hierarchy
example is fantastic. Duly noted and voted!

~~~
kadavy
Hehe - if you saw an orange square on a black background, something is either
wrong with your monitor or your vision :) Did you mean something else?

~~~
Robin_Message
Ah, it was pink, whoops.

------
adamc
When I got to the part about "Warm Colors Pop, Cool Colors Recede", I was
startled by the text. My eye had already been drawn to the figure, and for me,
blue popped and red receded.

