G

Getting Physical with Perceptual Uniform Color Schemes: The Journey from HCL to CMYK and Pantone

In this writing, I discuss how to move your data visualization created with a Hue Chroma Luminance (HCL) color scheme to a physical or hard copy in Cyan Magenta Yellow and Key Black (CMYK) color space. While a more expensive solution, the quality of printed hard copy can be improved by adding Pantone inks or dyes directly to your reproduction process. This requires specifying the Pantone colors for your data visualization.

Here, I also show how to determine your Pantone colors with the Pantone Connect app. I will work with an example from the HCL Wizard web application to show how to move from HCL palettes on a display device to CMYK and Pantone colors. The method proposed here works for any HCL based color scheme granted the RGB codes or the Web Hex codes are provided. Let’s get started with a quick review of the Hue Chroma Luminance Color Space and a brief overview of the journey or road map from HCL to CMYK/Pantone. 

The Hue Chroma Luminance color space

As discussed in my earlier writing on “Color in a Perceptual Uniform Way,” the Hue-Chroma-Luminance (HCL) color space is tailored to how we see colors as humans. Interestingly, the Red Green Blue (RGB) color space that is frequently used to describe color digital displays is not. How can this be?

Color vision studies dating back to the late 1800s have defined a color space as perceptually uniform if a change of length in any direction X of the color space is perceived by a human as the same change. Below, I show the RGB and the HCL Color Wheels and spectrums in order for you to visually compare the difference between the non-uniform (RGB) and the uniform (HCL) perceptual color spaces. When the respective color spectrums are converted to Gray scale diagrams, it is easier to conceptualize the uneven nature of the RGB color space and the nearly consistent nature of the HCL color space.

Comparison of the RGB (non-uniform) and the HC (uniform) Color Wheels. 

Using a non-uniform color spectrum, such as the “Rainbow color map” shown under the RGB Color Wheel above, can produce artifacts in a data visualization that are not due to the data itself but due to the color map. In a 2007 paper entitled, “Rainbow Color Map (Still) Considered Harmful,” Borland and Taylor provide visualization examples that highlight this issue. With their permission, I show the illustration below.

Image from the “Rainbow Color Map (Still Considered Harmful)” paper by Borland and Taylor that compares four data sets visualized with a) Rainbow; b) Gray-Scale; c) Radiation, and d) isoluminant Green-Red Color Maps. Apparent sharp gradients in the data in (a) appear as Rainbow Color Map artifacts not as data features. This is apparent by comparing this row with the same data viewed using the other Color Maps. Conversely, the sharp gradient found at the center of the second data set (see the second column) shown in the Gray-Scale and Black-Body Radiation (and to a lesser extent the isoluminant Green-Red) images is not found in the corresponding image with the Rainbow Color Map. (Image used with permission from Borland and Taylor).

HCL uses three dimensions to describe color:

  • hue (dominant wavelength)
  • chroma (colorfulness, intensity of color as compared to gray) and
  • luminance (brightness, amount of gray)

For a specific luminance (L) parameter, all colors resulting from different combinations of hue (H) and chroma ( C ) will have the same level of brightness. This means that when converted to a gray scale, the colors will appear nearly identical. This is shown in the HCL Color Wheel above.

Building an HCL color scheme with HCL Wizard

While there are several  HCL based color scheme selection tools, in this writing, I will focus on the HCL Wizard tool that I described in my previous “Perceptual Uniformity with HCL Wizard” writing. An illustration of the initial user interface to the HCL Wizard Palette tool is shown below. 

The HCL Wizard Web Site with the Palette Creator tool noted.

Selecting the Palette Creator tool yields the default interface for color scheme selection shown below.

Default user Interface to the Palette Creator of HCL Wizard.

To build my example for this writing, I selected the Type of Palette as “Basic: Sequential (multi-hue),” the Base Color Scheme as “Purple-Orange,” the Example as “Mosaic,” and under Color Settings, I chose four colors. These results are shown below.

Purple-Orange Mosaic Visualization created in HCL Wizard and entitled “HCL Mosaic.”

I name my new visualization as HCL Mosaic. The next step is to check for Color Deficiencies in regard to HCL Mosaic

Exploring the vision (color deficiency) options

The HCL Wizard tool includes options for examining the Color Deficiencies of its Example color schemes. As highlighted in my previous writings on color in data visualization, in humans there are three types of photoreceptors or cones where each is sensitive to different parts of the visual spectrum of light. These three different photoreceptor cone cells combine to facilitate rich color vision. If one or more of the set of cones does not perform properly, a color deficiency results. 

A Green cone deficiency is classified as Deuteranopia. A Red cone deficiency is classified as Protanopia. A Blue cone deficiency is classified as Tritanopia. I can select each of these “Vision” options to evaluate the appearance of the HCL Mosaic prototype under these Color Deficiencies. These results are shown below.

HCL Wizard’s Color Deficiency tests (Deuteranopia, Protanopia and Tritanopia) of the HCL Mosaic example.

The color schemes for each Color Deficiency type are not the same as my original HCL Mosaic prototype.  However the colors that form the resulting mosaic visualization pattern are distinguishable. I can now explore how to create a physical reproduction of this visualization.

Creating a physical reproduction of my “HCL Mosaic” color scheme

Although the HCL color space is tailored to how we see as humans, creating a physical reproduction of my HCL Mosaic color scheme involves converting to between color notations.  Physical color reproduction is actually done in the Cyan Magenta Yellow and Key Black (CMYK) color space. My previous writing on “A Split Complement: Moving Beyond the Digital to Produce the Physical” discussed the challenges of transitioning between the RGB color space based on displays to the CMYK color space based on the inks and dyes of color reproduction.  A similar situation occurs when moving from an HCL color scheme created in display space to a physical color copy built in CMYK space. Below I show my idealized “HCL to CMYK & Pantone” road map.

Idealized “HCL to CMYK & Pantone” road map – not possible today.

Unfortunately, this is not possible today. Presently, to go from HCL to CMYK requires visiting RGB or Web Hex color notations on the journey. So, let’s examine which color codes can be found directly in HCL Wizard.

Locating the RGB and hex codes in HCL Wizard

Given my HCL Mosaic color scheme, I can use the “Export” function in Palette Creator to locate the corresponding RGB and Hex codes in HCL Wizard. These results are shown below.

Selecting the Export Function that provides RGB and Hex Codes of the “HCL Mosaic” Purple-Orange color scheme. 

Moving from the RGB Space to CMYK space with a PNG or JPEG image

In order to support printing of my “HCL Mosaic” visualization, I need to convert my HCL Mosaic visualization from RGB Color Space to CMYK Color Space. One simple way to perform this task is to enter a PNG or JPEG image of the visualization into the freely available utility entitled rgb2cmyk.org. Below I show the CMYK TIFF results of entering a Red Yellow Blue JPEG example into rgb2cmyk.org.  

Using the rgb2dmyk.org  tool with a Red Yellow Blue (RYB) jpeg image. The conversion from RGB to CMYK is respectable.

Given these promising results, I entered a PNG file of my “HCL Mosaic” visualization into rgb2cmyk to obtain a CMYK TIFF conversion.  These results are shown below.

Using the rgb2dmyk.org tool with my HCL Mosaic Purple-Orange image. The conversion from RGB to CMYK is not what I hoped for in regard to the final CMYK color scheme.

To my dismay, these are not the results I had anticipated. The designated CMYK colors are completely different from my original “HCL Mosaic” composition.  This is shown in the image above.  This is not a desirable solution for me. 

Converting the RGB codes into CMYK codes

My next approach is to enter the RGB Codes for each color, individually, into the freely available Rapid Tables “RGB to CMYK color conversion” tools. I can compare the RGB to CMYK conversion for each color specified. These results are shown below.

Using Rapid Tables’ RGB to CMYK Conversion tool for each color element in my HCL Mosaic Purple Orange color scheme.

Notice that I can also match the Hex codes from the CMYK conversions with the original Hex shown for each color in HCL Wizard.  These Hex codes match up and I am satisfied with the resulting CMYK conversion. I can now use the CMYK codes for a physical or hard copy reproduction of my HCL Mosaic color scheme. 

Working Pantone inks for printed reproduction

In general, CMYK reproductions lack the luster of digital visualizations created in HCL or RGB color spaces. One solution is to introduce Pantone inks into the physical reproduction. This increases the expense of color printing but in some situations is the desired and optimal approach. My previous writing on “Connecting Pantone with Data Viz: Expand your color toolbox with the Pantone Connect app” discussed in detail Pantone solutions in RGB Color space. 

Here, I show how to use the Pantone Connect app to find corresponding Pantone colors for my HCL Mosaic color scheme. This can be done by entering RGB, CMYK, Hex or LAB codes of a given color into the Pantone Connect app to obtain a corresponding Pantone match. Since only one number sequence needed to be entered, I decided to use Hex codes. The resulting Pantone matches are shown below.

Using the Pantone Connect Conversion tool to match Pantone colors to each color element in my HCL Mosaic Purple Orange color scheme.

Below, I show a CMYK print of “HCL Mosaic”. The CMYK version lacks some of the color luster of the original HCL version. This is typical of display to print transfers as I noted in my prior writing on  “A Split Complement: Moving Beyond the Digital to Produce the Physical”. Otherwise, the results of progressing from HCL to print using the noted CMYK codes from Rapid Tables “RGB to CMYK color conversion” tools are very respectable. Using Pantone inks for color printing can achieve an even closer match to the original  “HCL Mosaic” color scheme. As indicated previously, the use of Pantone inks  will likely yield a more costly physical reproduction process. 

Comparison of the Original HCL Mosaic Visualization with the CMYK PDF file and the physical print of the same visualization. 

Concluding remarks

Here, I have shown how to transition a data visualization created in the Hue Chroma Luminance (HCL) color space on a display device to a physical or hard copy reproduction based on the Cyan Magenta Yellow and Key Black (CMYK) color model. I entered the corresponding Red Green Blue (RGB) color codes for my HCL Mosaic color scheme into the Rapid Tables “RGB to CMYK color conversion” utility to achieve these results. A similar procedure, with Hex codes, was also performed with the Pantone Connect app. This resulted in locating corresponding Pantone colors for my HCL Mosaic color scheme. I also showed how using an PNG or JPEG image conversion tool like rgb2cmyk.org yielded unexpected results for my HCL Mosaic. Previously, I did achieve near matching results using a Red Yellow Blue (RYB) image shown in this writing.  You might want to experiment with your own PNG or JPEG images. A summary flow chart of my efforts is shown below.

Summary Flow Chart of my journey from Perceptual Uniform (HCL) to Physical Output (CMYK).

There are many approaches to building color schemes for data visualization.  This writing has examined converting an HCL color scheme into CMYK codes for hard copy reproduction. For discussions on my other approaches to using color suggestion tools, please see some of my prior Nightingale writings that are noted below as well as my 2016 book on  “Applying Color Theory to Digital Media and Visualization” published by CRC Press.

Theresa-Marie Rhyne is a Visualization Consultant with extensive experience in producing and colorizing digital media and visualizations. She has consulted with the Stanford University Visualization Group on a Color Suggestion Prototype System, the Center for Visualization at the University of California at Davis and the Scientific Computing and Imaging Institute at the University of Utah on applying color theory to Ensemble Data Visualization. Prior to her consulting work, she founded two visualization centers: (a) the United States Environmental Protection Agency’s Scientific Visualization Center and (b) the Center for Visualization and Analytics at North Carolina State University.

CategoriesHow To Use Tools