Applying Duotones to Data

Wdd Logo.
July 19, 2010

duotone dataThe ability to tint black-and-white photographs with color has been a staple of photography for decades, and modern image editors make warming and cooling grayscale images a snap.

This concept of a steady progression of shades can be used to present information as well.

This technique of tinting digital photos works well for presenting information and can improve usability.

Just as a gradient shows a range of colors, a monotone or duotone can be used to show a range of data.

In this article, we'll learn how to apply color to enhance infographics.

Unless they're calculating sales, most people don't associate spreadsheets with fine-art photography. But even outside the world of accounting, tables and duotones can mix. The trick is knowing when to use color.

Tinting Enhances a Grayscale Image

Digitally sepia-toned images are grayscale images whose pixels have been colored slightly, usually with beige or blue. Orange or yellow can replicate the effect of aged photos, which were sometimes tinted with sepia pigment. Sepia tones (or, more broadly, monotones) can either "warm up" or "cool down" a black-and-white (grayscale) image without detracting from the composition.

color photo, grayscale photo and sepia tone

The difference between a grayscale image and a sepia-toned one is the sepia's tint, as seen above. Any digital photo can be turned into a sepia tone, although some photos work better than others. Images that rely more on color (specifically hue) than contrast often weaken in the transition to tint.

example of how some photos require color

The striking pink shines in the original image above but disappears when the hues become uniform. Even if an image could work with a tint, the wrong tint may overpower the photo.

example of a monotone gone too far

A tint can become a gimmick if the color is too obvious. Above, the original photo takes on a psychedelic air when too much blue is applied. The goal isn't to add color but to add "flavor."

Using more than one color in a tint is possible:

samples of a monotone, a duotone and a tritone

The three types of tints above are appropriately named. Monotones apply the same hue across the whole image. Duotones use one hue for shadows and another for highlights. Tritones add a third hue for mid-tones.

Duotones Provide Natural Ranges

Traditional tables and bar charts work in two dimensions, but not all data fits the row-column format.

A duotone is great for presenting a range of data because it is itself a range of colors. Aesthetically speaking, blends of two main colors tend to look like they belong together. But applied to data, ranges of colors have other benefits. First, because not everyone can see colors well, using a range of dark-to-light colors helps people with visual impairments to see the effect. Secondly, distinct shades are useful for representing different sets of data.

The charts below show the sales volumes of a fictional company over several years. How could color improve them?

sample bar graphs with colors applied

Let's take charts one by one:

  • 1998: This standard bar chart uses space to explain data. The height and horizontal position of each bar tells us how sales went in each quarter of the year. It's functional and clear.
  • 1999: Color-coding the bars adds style but doesn't tell us anything new. Colors could have been used to group the bars together, but because each bar is a different color, nothing is improved. We can tell the difference between each bar just as easily without color.
  • 2000: Using colors vertically shows how the bars relate to each other. For example, notice how Q4 barely reaches the red area, a fact easily overlooked in the first two charts.
  • 2001: This last one uses a duotone, but it doesn't help. Adding an effect without making the data more informative doesn't benefit the user. That's the difference between a gimmick and an enhancement.

samples of monotone bar charts

The charts above use color variation in lieu of solid bars. Both versions serve the same purpose: to show sales in increments per quarter. Color takes the data a step further.

  • 2002: The break-even point adds some new information: sales must pass this line for the company to make a profit. The 2002 chart shows that the company operated at a loss in only one quarter.
  • 2003: A difference in shading indicates the break-even point. But is it clear enough?
  • 2004: The areas of the bars showing profit are indicated even more clearly here, but we've lost the increments.
  • 2005: The opposite of the chart for 2004, this one marks increments above the break-even point, clearly indicating the company's profit (if any) in each quarter and ignoring the rest.

Color is a powerful tool for non-verbal communication. Beyond aesthetics, it can be used to organize. How else could we use the colors in the last set of examples?

samples of monotone bar charts

  • 2006: Gradients indicate where each bar hits the $20,000 and $40,000 marks. This is helpful, but the break-even point is $30,000.
  • 2007: Pure gradients grow darker to show higher sales—until we reach the break-even point. Because the colors above the $30,000 mark are similar to the background color, they fade away. High contrast draws attention to the fact that the company turned a profit in only three quarters.
  • 2008: Reversing the gradient midway up the y-axis is an unusual approach. This implies that the $20,000 to $30,000 block is significant but not the $30,000 break-even point itself. Unlike the pure gradients for 2007, though, this graph clearly indicates every $10,000 increment.
  • 2009: They say that some rules were made to be broken, but this graph breaks them for no apparent reason. None of the shades match the dollar increments, and the break-even point is hard to see. Shading works best when it tells the user something. Shading for its own sake is mere decoration.

More Examples

This technique isn't limited to bar charts.

example of text put into a table

The data above compiles the star ratings of critics for several movies. The raw data on the left is legible but unhelpful; scanning each line of text for a single datum is possible, but it's difficult to see the big picture. Presenting the data in a table (right) gives the viewer a sense of everything at once. We can at least clearly tell that there are five critics and seven movies, and we get a rough idea of who liked what.

Assigning a color to each star rating would reveal more about how each movie fared. But not any colors will do.

improved movie review tables

The table on the left follows the rules but not the spirit of color-coding. Telling the ratings apart at a glance is easy because each value has a consistent color, but there is no logic behind the color choices.

The table on the right uses color more purposefully. Dark shades are assigned to lower ratings, and light shades are assigned to higher ones. It would also work the other way around, but the effect is the same: a range of shades is assigned to a range of values.

Not only is this more visually pleasing, it reveals trends in the data. Now it's easy to see that movie F scored well overall but movie B didn't, that critic 2 was harder to please than critic 4, that all critics liked movie F but not movie D, and that they disagreed about movie A. Different shades of the same hue, then, can reveal more than the data on its own.

Monotones and duotones work best when information is arranged in layers, levels or a range. For example:

chart of average high and low temperatures

Source: infoplease

an event apart schedule

Source: An Event Apart, Boston 2010

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

Where else can a monotone or duotone help explain information? Share your thoughts in the comments section below.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…