Channels ▼

Jocelyn Paine

Dr. Dobb's Bloggers

Choosing Easily Distinguished Colours with ColorBrewer

September 08, 2008

We sometimes need to display points, lines, or areas that stand for more than one thing, and to colour them so they are clearly distinguishable. For example, when plotting several graph lines on the same axes. Here's a little technical tip I found for choosing colour schemes: Cynthia Brewer's ColorBrewer.

Choosing colours for graph lines is one use; another is maps. This is a good cue for me to introduce ColorBrewer. Go to the above URL, look at the left hand side of the page, and click "qualitative" in the second panel down. Then click one of the colour-scheme columns in the "mini legends" panel just below. The map will change so that its different kinds of region are coloured accordingly. Once you have a scheme you like, you can get hex values for the colours by clicking "hex" in the panel below.

I used ColorBrewer for my Category Theory Demonstrations. I wanted to depict the composition of functions, inviting the reader's eye to associate items pointed to on one line with corresponding items pointed from on the line below. Like this:

square_root = { 25→5, 36→6, 49→7 }
square = { -5→25, 5→25, -6→36, 6→36, -7→49, 7→49 }
square_root followed by square = {25→25, 36→36, 49→49 }.
Eventually, I'll do this with diagrams, but that needs more work.

ColorBrewer was written by Cynthia Brewer. Her home page tells me that she is a professor of geography, and that her research includes applying colour theory to map design. As well as "qualitative" schemes like the ones I've mentioned, ColorBrewer can be used to choose "sequential" schemes for quantities such as population and height, and "diverging" schemes, where there is a central value from which quantities can either increase or decrease.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.