
Basic colour theory for programmers - actraub
http://polymathprogrammer.com/2008/08/04/basic-colour-theory-for-programmers/
======
gtaylor
I took a very heavy emphasis on color math while at school, figured I'd dump a
few more useful resources on the pile:

* John the May guy - [http://johnthemathguy.blogspot.com/](http://johnthemathguy.blogspot.com/) \- Breaks down advanced color math/science concepts in very plain English. Complete with helpful charts and graphs. He's very approachable if you have questions. If you are in the print/GC industry, you'll probably run into him at trade shows.

* Bruce Lindbloom - [http://www.brucelindbloom.com/](http://www.brucelindbloom.com/) \- Look past the tacky website and into the "Math" and "Calc" sub-sections. Tons of great theory, formulas, and calculators. Make sure you doublecheck the formulas against other sources, I did run into a small discrepancy or two (that I can't recall). I've also been able to get responses from him through email, which is nice.

* EasyRGB - [http://www.easyrgb.com/index.php?X=MATH](http://www.easyrgb.com/index.php?X=MATH) \- More transform/delta E functions. Some of these are kind of crude, so I tend to look at Bruce Lindbloom or CIE directly when possible, but EasyRGB can sometimes fill in some gaps.

* python-colormath - [http://python-colormath.readthedocs.org/](http://python-colormath.readthedocs.org/) \- And of course, I can't resist shamelessly plugging my Python color math module.

Color math is funky stuff, and at times very hard to get help with. There
aren't many easily-reached people out there that have a deep understanding of
it. But if you keep hammering your head against it, you'll learn through
osmosis over time.

If this is something that interests you enough, RIT and I think Cal Poly both
have color science degrees and certificates. Imaging companies eat these
graduates up in a hurry.

~~~
gtaylor
Apologies, the first link should be titled "John the Math guy". Looks like I
missed my window to edit that.

------
zefei
This is an old article, and so wrong and vague in so many aspects of digital
colors. It contains not much more than simple device-dependent RGB/HSV colors.

To use colors correctly (not many programmers can do this, in fact
Chrome/Firefox/Safari don't show the same color for same RGB value on my
machine), programmer needs to consider color profiles, gamma correction, white
point etc. The sad truth is that RGB is mostly misunderstood from intuition,
and most graphic libraries don't deal with device-dependencies at all.
Luckily, most engineers don't have to deal with colors outside sRGB.

The absolute best place to read about digital colors (or image processing in
general) is efg's references:
[http://www.efg2.com/Lab/Library/Color/Science.htm](http://www.efg2.com/Lab/Library/Color/Science.htm).
It contains overwhelmingly large amount of info, but they are good info and
quite essential for professional work.

~~~
acjohnson55
I wish I could really upvote this as a disclaimer. I once worked in a color
science lab of a printing company, and it took a long time for me to really
get a grip on the topic, because it is a deep topic. It's a bit disheartening
to see something passed on as truth that's got so many inaccuracies.

------
drcode
Some other points programmers should be familiar with (not an expert here,
everyone feel free to correct me)

1\. In typical situations, 256 shades of brightness of a single color hue are
the most we can distinguish and will form a smooth gradient without banding.
If you're dealing with Green and related colors in the RGB spectrum (i.e.
yellows and blue-greens, and near-white colors) it can go a bit higher, to 512
shades- This is why many compression algorithms compress reds and blues more
than greens, because it's less noticeable.

2\. Many artists will use opposite colors on the color wheel to darken colors-
So to make a darker yellow, they'll mix in purple paint (or use purple
dithering, depending on the medium.) How this relates to color theory from a
psychological standpoint is unclear, but using this approach in UI design (for
instance, adding purple detail to the shadow of a yellow object in an icon)
often gives clean, elegant results.

3\. Sometimes, when designing something, you say to yourself, "I want a red
here that is just as bright as the blue over there". However, the
psychological basis as to when colors of different hues appear to have the
same brightness is a very complex problem- You can't just add R+G+B
intensities and think that will tell you that two different colors have the
same brightness, perceptually. Your best bet is to just "eyeball" colors in
this case, unless you have the time to go down some very deep rabbit holes.

4\. If you are designing for paper printing, expect all colors in an RGB image
to look much, much darker and less vibrant than on a monitor. Going from
RGB->CMYK and getting perfect results is another really hard problem out of
reach for most programmers (I actually think there's low hanging fruit for
people to write libraries that help optimize this conversion- Everything I've
personally seen that is designed for a layman, such as Photoshop's conversion
process, seems to be sub-par at helping laymen do this well.)

5\. There are exotic color spaces like the TSL color space that most
programmers are completely unfamiliar with and are designed for better
modelling of human perception of color. We programmers should probably be
using these color spaces a lot more.

6\. A good rule for UI design is to only use two colors at most (besides gray
tones) on the screen at a single time and maybe one extra color in a very
limited way. If you don't do this, you'll end with an "angry fruit salad"
interface
([http://www.urbandictionary.com/define.php?term=angry%20fruit...](http://www.urbandictionary.com/define.php?term=angry%20fruit%20salad))
Microsoft Metro and some of the new "flat UI" stuff is a major deviation from
this rule, for better or worse.

7\. When in doubt, leave the background of a website white. You should have a
very, very good reason before using a black or dark green/blue/brown
background on a website. (or so most UI designers will tell you, though of
course you're free to ignore their advice.)

~~~
mcherm
The original article didn't teach me anything new (perhaps because I've paid
attention to color in the past... it's a minor interest of mine). But YOUR
points here taught me several new things. Thanks!

~~~
Gracana
Yeah, I think the article went in the wrong direction. It's easy to understand
the basic mathematics of color. Understanding how to use color and how to
avoid common pitfalls is a lot more valuable to me.

------
hcarvalhoalves
About colour temperature:

Subjectively (or maybe culturally?), red tones are warm and blue tones are
cool.

There's another definition of "colour temperature" (derived from a physical
property, rated in Kelvin), in which blue-ish tones are _warmer_ than red,
white being the hottest. This is based on the light emission of very hot
bodies (you can tell the temperature by the color it glows).

This second definition of "colour temperature" might be counter-intuitive but
is used to rate light sources and in photography, so you have to know the
context the term is used.

~~~
fl0wenol
Blue is hotter than white by the kelvin scale.

The hue attributed to black body radiation at a certain temperature represents
the average color of the whole gamut of emitted frequency/intensities, which
follows a curve with a peak that changes with the temperature (which is then
perceived by the eye); this curve is a direct result of Planck's law.

At temperatures < 3000K, this is reddish At temperatures between 3000-6000K,
it becomes orange and then yellow At temperatures around 6500K, it is white
(this is close to sunlight, so the eye is tuned to this distribution and sees
it as even) At above 6500, it becomes increasingly blue.

~~~
hcarvalhoalves
That's right, thanks for the correction.

------
bitL
Adding one important fact - computing color distance between two colors in
order to identify similar colors doesn't work well in any color model (often
matching colors with reduced vibrance). What you need to do is to define
overlapping color regions (e.g. this is yellowish, that is greenish etc.) and
treat this information as more important than the computed distance for
similarity matching.

~~~
acjohnson55
That's not quite true. That's what the Lab color space is intended to allow.

[https://en.wikipedia.org/wiki/Lab_color_space](https://en.wikipedia.org/wiki/Lab_color_space)

~~~
bitL
Yes, that's an attempt to solve this problem however if you try to use it for
color matching you'd find problematic areas there as well, hence you still
need to use color regions.

------
mcintyre1994
Something some might not know of is the great colour scheme designers
available on the Web, I quite like colour scheme designer 3 [0] - hit triad,
click around and then click the colour list tab for complementary colours for
all three.

[0]
[http://colorschemedesigner.com/csd-3.5/](http://colorschemedesigner.com/csd-3.5/)

------
carlsednaoui
Neat!

On a related note, I recently helped write a "Color Theory Basics" guide for
Thinkful (my current employer). Some of you might enjoy this:
[http://www.thinkful.com/learn/color-theory-
basics/](http://www.thinkful.com/learn/color-theory-basics/)

This guide is more applicable towards branding and marketing.

------
AnimalMuppet
> This is the traditional “adding” of colours together to produce new colours.
> (Said of RGB.)

But it's only "traditional" in computer graphics. Paint is subtractive, and so
is printing. If your color background is one of these more traditional fields,
then additive is most definitely _not_ traditional.

~~~
dragonwriter
> But it's only "traditional" in computer graphics.

And lighting.

