How We Created Color Scales

Introduction

This article is about creating refined color scales for charts and visualizations. You will get insights from, and a deeper view into, our working process at Interactive Things. 
For us, a diverse and balanced palette is one of the key components to efficiently communicate information trough color. A list of the used tools can be found at the end of this article.

The Briefing

The general goal of the project at hand was to create a comprehensive and consistent library of basic charts. From simple line and bar charts to choropleth maps and coordinated visualizations. The charts will eventually live on the web and will be embedded into an existing website. As a public institution, our client has special requirements related to readability and accessibility of all of their content including the interactive visualizations. Therefore, our work on the color scales had to take into consideration the established visual design of the website and the extensive requirements of the target audience. The results had to be precise, distinct, memorable and applicable on a broad variety of different chart types.

The Strategy

Considering above mentioned requirements we proposed to build on top of established and proven methods for compiling the color scales. But, using existing color scales provided by Colorbrewer and the likes wasn’t an option for our client. The color scale had to show a customized aesthetic to be recognizable. We tackled this challenge of combining scientific features and visual aesthetics by applying the underlying principles from color theory and tweaking the hue, saturation, and brightness of the colors to guarantee quality and uniqueness.

The Goal

To solve the different tasks in data visualization trough color, we decided to focus on the three main color palettes.

The sequential Color Scheme (S01)
Sequential data sets are arranged from high to low. Low data values are usually represented by light colors and high values represented by dark colors. Terrain slope categories or population densities, for example, are well represented by sequential color schemes.

s01

The Diverging Color Scheme (D01)
Diverging schemes show information outward from a critical midpoint of the data range. A typical diverging scheme uses two different sequential schemes so that they diverge from a shared light color toward dark colors at each extreme. Deviations above and below the median death rate from a disease, for example, are well represented by a diverging color scheme.

d01

The Qualitative Color Scheme (Q01)
Qualitative schemes use differences in hue to represent nominal differences, or differences in kind. The lightness of the hues used for qualitative categories should be similar but not equal. Assign the lightest, darkest, and most saturated hues in the scheme to categories that warrant emphasis in the representation. Data about product categories or city districts, for example, are well represented by a qualitative color scheme.

q01

The Process

Branding guidelines
As many projects do, this one also started with a review of the Statistik Stadt Zürich branding guidelines. Those are elementary for our design process in order to stay consistent with the surrounding visual design. In this case the requirements we had to follow weren’t very strict. The color definitions in the manual recommend to keep a colorful palette instead of specifying precise colors. It was clear that we would use the prominent «Zürich Blue» as a base color, though.

02_branding

Exploration
In this first phase we kept the creative flow open and made some wild mixes and color pickings without following too many rules. Beside the default blue as our main color, it made sense to use red as complementary color to generate a clear contrast in hue. A second argument for the combination of blue and red was the red-green color blindness wich is most common by humans.

ex02

ex01

Sequential and diverging color schemes
After the exploration we focused on two different directions. At this point it was necessary to get the clients feedback to reduce the amount of alternatives. The first version included brighter tones as an alternative to the original branding colors. The second proposal included more muted versions of the original colors. For the S01 scales we made sure that every color shade has a corresponding equidistant grey tone to improve readability on devices with poor color representation.

10_final01

Neutral version of diverging and sequential color schemes
After we decided together with the client for the «muted» version, we made additionally a neutral version of the two main colors. «Neutral» because in the western culture red has a strong intuitive meaning to most people. Red usually stands for «wrong, error, attention, …» and other negative expressions. The contrast between red and blue makes those intuitive interpretations even stronger. This can be used as an advantage to show a part of the data wich reaches a certain limit in red. But, if you want to show two opposing values without any indication for good or bad, then this cultural precondition could lead to misinterpretations. It’s important to use color like an instrument to tell the right story. Therefore, it made sense to create a neutral version corresponding to the main colors. In this case we decided that green and brown are a good solution to fit the main colors in saturation and brightness.

04_neutral

Qualitative color scheme
For the qualitative color scale we made another wide exploration. It helped a lot to have many directions at first, before making getting more specific. The possibilities to create qualitative color scales are endless. There are tempting collections of color schemes available on the web. Yet for us, it only made sense to use more grounded methods than taste and style to achieve a justifiable palette.

05_tryouts

Qualitative color scheme with a more scientific approach
We had to define six different colors for the qualitative scale to get a large enough selection. To get them as distinguishable as possible we picked the six base colors on a linear distribution across the whole visual spectrum. This means that all of the selected colors are similar in brightness and saturation, but different in hue. Furthermore, the linear distance between those six colors had to be as equal as possible. With this approach we received a solid foundation that we were able to refine in hue and vary in brightness and saturation.

scale

q002

q001

Sorting
It’s impressive how much sorting influences the effect when colors get applied to visualizations. This considered, we made it a conscious decision to define a fixed order in wich the colors show up. See the examples to get an impression over the sorting effect:

example01

example02

example03

To extend our series of six colors up to twelve, we followed again the principles established by Colorbrewer. We took the base color in hue and increased the brightness. The same recipe was applied on every color of our scale of six.

07_6-12

Accessibility
As a public institution, our client had extensive requirements in accessibility. Optimizing the defined color scheme for the most common cases of color vision deficiencies was the evident next step. Using digital tools that adapt the screen colors to imitate a decreased ability to perceive color differences, we refined the actual color schemes and optimized colors in hue, saturation and brightness to guarantee best possible outputs for all kinds of users.

This overview compares how the color scale is perceived by people with any of the following color vision deficiencies.

09_accesibility

Please note, that not every software ist rendering the exact same results. To make a best effort, combine the different outputs and try to generate a smart result out of precise perception and experience. In the end, we will never now how the world looks like trough the eyes of another person. So, this is a very difficult process and it’s hard to find the best solution.

The Result

And finally, the result of our work:

04_muted

04_neutral

q01final

The Tools

The breadth of our exploration, the precision of our result and the depth of our evaluation was only possible with the help of the following tools.

I Want Hue
A favorite tool to create nice color palettes. Tip: Save the colors you like with the lock symbol and refresh the application for new suggestions. You can also force a specific color with the hex code into the palette.

HCL editor
Very useful tool to get an overview over the visual spectrum and how color scales can make sense in a mathematical way.

Kuler
Kuler is the most popular color styler tool from adobe. Here you get nice and contemporary suggestions for your work.

Spectrum
Spectrum ist an OSX Application wich is similar to Kuler but without the community aspect. Great feature is that you can pick colors directly from any application on your desktop computer.

xScope
This is an OSX Application wich works like a filter to check the most common color blindnesses.

LiveView
LiveView is an very simple iOS/OSX Application wich sends the screen from your desktop to a mobile device. There you can apply a nice greyscale filter to test your color shades for color blind people. By the way it gives you a alternative look of your colors on an alternative screen.

HSB instead of RGB
For fine tuning we highly recommend the usual HSB editor wich you can find in most design applications. It takes a little time to get used to the logic of hue, saturation and brightness but it makes totally sense. HSL and HSB are based on the same concept.

Please comment below for feedback and questions about how we create color concepts.

How We Created Color Scales This article is about how Christoph and Jonas of Interactive Things have created a series of refined color scales for interactive charts and visualizations.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Give Feedback