Colors

Here’s a color combination I like:

What do I like about it? Well, its the primary colors, but just a bit off in a satisfying way. The colors are ketchuppy and tactile.

A natural question is what’s a fourth color that would look good with these? First, take a look at where they are on a color wheel.

Two are opposite each other; these are called complementary colors. Another is just a few degrees away from one of the compliments. This is called a split complimentary scheme.

A good choice to expand our palette in a split complementary color scheme is to riff on the saturation and brightness of the main three:

We can also add in a fourth color by adding 90 degrees to the primary color. This is called a triadic color. Ish.

Of course we can go the other direction with -90 degrees for a fifth color:

This starts to look garish, but it can be necessary when plotting a chart and maximum contrast is desired between different categories. See the D3.js categorical schemes for examples.

Perceptually red, blue and green tend to take up a little bit more than their fair share of space. The result is you can usually distinguish between two oranges better than you can between two reds of the same brightness. This is why the same relative arrangement of colors around the color wheel don’t look perceptually even, and some of the above generated palettes look better than others.