Connecting Pantone With Data Viz
By: Theresa-Marie Rhyne
Tags: Visual Design, Data Science, Color Theory, Data Visualization, Design

Pantone Connect is a recently released app for selecting Pantone colors or for extracting Pantone colors from images on your desktop or mobile devices. Personalized color palettes can be digitally created from Pantone’s color library of more than 10,000 hues. In this writing, I discuss how the Pantone Connect app can be used to facilitate the process of creating data visualizations by combining it with other tools like Viz Palette and the Color Blindness Simulator — Coblis. During this journey, I will focus on four tasks:(1) creating a Pantone color theme for a specific data visualization; (2) using Pantone Connect to extract colors from an image to build a customized color theme; (3) integrating Pantone Connect with other tools to address color deficiencies and data visualization possibilities, and (4) identifying Pantone colors in an existing data visualization for high end printing or other physical output specifications.

The user interfaces to the Pantone Connect web site and mobile app.

In addition to the web site, a free version of the Pantone Connect Mobile app, with access to the Pantone color libraries, is available from the Apple’s App Store, Google Play and Adobe Exchange. The user interfaces to the web and mobile versions are shown above.

Pantone requires you to open a free Pantone account in order to have access to the majority of features in the app. The Pantone Connect functions described here are free to use. In the future, some advanced functions may require a monthly or yearly subscription. Pantone is still building the Pantone Connect app and will be announcing further details about the product’s business model in the future. Both Viz Palette and Coblis are freely available online tools for your continued use.

What is the Pantone Matching System?

The Pantone Fashion Color Trend Guide for Autumn 2020/2021, see:https://www.pantone.com/color-intelligence/fashion-color-trend-report/new-york-autumn-winter-2020-2021 , Note: NYFW refers to “New York Fashion Week”.

The Pantone Matching System (PMS) is a proprietary color space used primarily in printing and also in a wide range of other industries including fashion, cosmetics, fabric, plastics, and paints. PMS methods have evolved into a standardized color reproduction system that utilizes the Pantone number system to identify colors.

Individuals at different geographic locations can refer to particular PMS codes to make sure colors match without making a direct personal contact with each other.

The traditional Pantone Formula Guide. See: https://www.pantone.com/graphics.

In traditional form, the Pantone color guides consist of narrow cardboard sheets (approximately 6 by 2 in or 15 by 5 cm) that are printed on one side with rectangular samples showing the different Pantone colors. The guide is bound together at one end to allow for opening the strips out in a fan like manner. Additionally, Pantone provides binders with rectangular swatches and digital media resources.

In 2009, Pantone released the myPantone app for iOS platforms and later extended it to Android devices. In August 2016, the Pantone Studio app for iOS platforms replaced myPantone.

Pantone Connect, released in June 2020, is their latest digital app for color matching and color theme creation. Creating a visualization with Pantone colors adds a dynamic quality to your visualizations, making novice users of color appear as experts. It also increases the chances of successful high-end printed output if the specified Pantone inks are used.

Using Pantone Connect to Create a Color Theme

Selecting the PICK option in the Pantone Connect mobile app.

Here, I will work with the Pantone Connect Mobile app to build a color theme for an Area Chart Visualization that will be discussed later in this writing.

The first step is to select the PICK option and to scroll through the colors to select a key or base color. Pantone Connect automatically defaults to the Formula Guide Coated book of colors.

Selecting the Pantone 2029 C color in Pantone Connect.

I chose Pantone 2029C and saved it into my color palette. These results are shown on the left.

After selecting a Key color, Pantone 2029C in my case, Pantone Connect provides options for gaining more details about the color. By selecting Full Screen, an image of the Pantone 2029C appears on your phone with various notations such as the sRGB and the Hex codes. This result is also shown on the left.

These notations will be important later when transferring this color data to a visualization tool.

Selecting the HARMONIES option in the Pantone Connect mobile app.

Selecting Harmonies results in a visual listing of Analogous, Complementary, Monochromatic, Split Complementary, Triadic, and Tetradic color harmonies with specified Pantone colors from the given Pantone color library. Let’s briefly examine in further detail the concept of color harmonies.

What are Color Harmonies?

Color Harmony is the process of choosing colors that work well together in the composition of an image. Similar to concepts in music, these harmonies are based around color cords on the Color Wheel that help to provide common guidelines for how color hues will work together. Color Wheels are tools that depict color relationships by organizing colors in a circle to visualize how the hues relate to each other.

Below, I show the combined Red Green Blue and Cyan Magenta Yellow color wheel on which Pantone color harmonies are based. The Red-Green-Blue Color Wheel is based on the concept that Red, Green and Blue (RGB) are the color primaries for viewing displays like what we see on our desktop and mobile devices. The RGB color model is defined as an additive color model in which the combination of Red, Green, and Blue lights produces White light.There is also a Cyan, Magenta and Yellow color model for printing that is called a subtractive model since the inks combine to produces Black.

Interestingly, the RGB color model and the CMY color model have a complementary relationship. Red is the complement of Cyan, Green is the complement of Magenta, Blue is the complement of Yellow and White is the complement of Black in their respective color spaces. The same color wheel thus applies for both RGB and CMY color spaces. Interestingly, the Pantone Connect app is showing us Pantone colors in RGB display mode while in practice the CMY color model is used in the application of the Pantone inks for color reproduction. This complementary relationship is shown above, with the RGB/CMY color wheel.

Pantone Color Harmonies

Returning to the results from the Pantone Connect app, I select the Harmonies option for my Key color of Pantone 2029C. As noted previously, this results in a visual display of the Analogous, Complementary, Monochromatic, Split Complementary, Triadic, and Tetradic color harmonies. Unfortunately, Pantone Connect does not currently provide a color wheel as a reference to help visualize each of these color harmony results. It is anticipated that future updates to the app will address this.

Pantone Color Harmonies for the Pantone 2029C color.

Above, the Pantone Color Harmonies for Pantone 2029C are shown. As a guide to you, I have added my own annotations, based on the RGB/CMY color wheel, to visually define each relationship.

It is important to note here that all colors are determined from colors specified in the Pantone Formula Guide Coated. The results could be different if another Pantone color guide is selected or if another color selection tool is used.

Let’s take a closer look at each of these Pantone Color Harmonies.

The Analogous Color Harmony for Pantone 2029C.

An Analogous harmony refers to three or more colors adjacent to each other on the Color Wheel.

The Complementary Color Harmony for Pantone 2029C.

A Complementary harmony indicates two colors that oppose each other on the Color Wheel.

The Monochromatic Color Harmony for Pantone 2029C.

A Monochromatic harmony is created with one hue with various tints, tones and shades of that hue to create the color theme. The harmony is noted by the individual colors lining up in straight from the center of the Color Wheel to the key hue. A tint is defined as a hue mixed with White while a tone is a designated as a hue mixed with Gray and a shade is created when a hue is mixed with Black.

The Split Complementary Color Harmony for Pantone 2029C.

The Split Complementary harmony combines a Key color with the two colors directly on either side of the Complementary Color.

The Triadic Color Harmony for Pantone 2029C.

The Triad or Triadic Color Harmony is based on three colors that are equally spaced on the Color Wheel.

The Tetradic Color Harmony for Pantone 2029C.

When four colors form a rectangular shape on the Color Wheel a Tetrad or Tetradic harmony results. A Tetrad harmony is also called a Double Complementary harmony since two Complementary Color Harmonies form the Tetrad.

Creating a Color Theme in Pantone Connect

My future Area Chart visualization has four data elements and I want each element to appear independent of the others. If I chose a Monochromatic or Analogous harmony, the colors might appear to have a sequential relationship with each other. If I chose a Complementary or Split-Complementary harmony, the data elements might appear to have a diverging relationship. With a Triadic color theme, I will need to find a fourth color. So, I select the Tetradic color harmony to convey the concept that the data elements are distinct from each other. I then save the specific Pantone colors in my New Palette Workspace. By opening a Pantone Connect account, I can name and save the color theme for future use. I name and save it as “Pastel”. This process is shown below.

Saving the Tetradic Color Harmony for Pantone 2029C and naming it as “Pastel” in Pantone Connect.

Brushing over each of the color swatches in the Pastel theme, it is possible to obtain the web Hex codes for each Pantone Color. These results are shown below.

Using Pantone Connect to locate the web Hex codes for each of the Pantone colors in the Pastel theme.

Creating an Area Chart Visualization with the Pastel Pantone Theme

Now that I know the web Hex code for each Pantone color in my Pastel theme, the next step is to apply the color theme to a data visualization. Here, I will create an Area Chart example with the Apple Numbers app. These results are shown below.