8

Seeing red as yellow and magenta

 1 year ago
source link: https://uxdesign.cc/seeing-red-as-yellow-and-magenta-322913fcce52
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Seeing red as yellow and magenta

The mysteries of red as a secondary color for printing digital media and data visualizations.

The introductory image to” Seeing Red as Yellow and Magenta: The Mysteries of Red as a Secondary color for printing Digital Media and Data Visualizations”.

When most of us see or ponder the color Red, we rarely consider it to be a combination of Yellow and Magenta. Indeed, we might think of Red as one of the primaries in the Red Green Blue (RGB) display color space. Perhaps we consider it in terms of its long wavelengths, approximately 625–740 nanometers, in the visible spectrum. Rarely, do we realize that Red is actually a secondary color in Cyan, Magenta, Yellow and Key Black (CMYK) color space. During the color printing process, the color Red is produced by combining Yellow and Magenta. In this writing, I explore the Magenta, Yellow and Red combination for depicting data visualizations. Beyond the CMYK printing process, the results are fascinating in terms of color deficiency tests. Let’s get started by reviewing some color theory fundamentals that result in Red becoming a secondary hue for printing while still serving as a primary color for displays.

Rethinking Red beyond its Long Wavelengths or as a Primary color in Red Green Blue (RGB) display space to be a Secondary color in Cyan Magenta Yellow and Key Black (CMYK) printer space.

Rethinking Red beyond its Long Wavelengths or as a Primary color in Red Green Blue (RGB) display space to be a Secondary color in Cyan Magenta Yellow and Key Black (CMYK) printer space.

Some Color Theory Fundamentals:

Isaac Newton’s Original Color Circle or Wheel Concept published in the early 1700s. I added the Color Swatches to note the Colors he diagrammed.

Isaac Newton’s Original Color Circle or Wheel Concept published in the early 1700s. I added the Color Swatches to note the Colors he diagrammed.

Isaac Newton is credited with creating the Color Wheel concept when he closed the linear color spectrum into a color circle in the early 1700s. Over the centuries, artists and color scientists amplified his concept to include color harmonies. 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 (RGB) lights produce White light.

There is also a Cyan, Magenta and Yellow (CMY) color model for printing that is called a subtractive model since the inks combine to produce 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 applies for RGB and CMY.

The Complementary Relationship between the Red Green Blue (RGB) and Cyan Magenta Yellow (CMY) Color Spaces.

The Complementary Relationship between the Red Green Blue (RGB) and Cyan Magenta Yellow (CMY) Color Spaces.

Why is the printing color model called CMYK?

Jacob Christoph Le Blon patented the first three-color and four-color printing production processes in 1719. Historically, for printing processes to work, individual plates were created for each Cyan, Magenta and Yellow color pigment. The plates were registered over top of each other to produce full-color images and the process was called a three-color printing process. When the primary pigments were combined together as inks, in equally large amounts, the result was a Black color. Initially, a volume problem resulted when this concept was put into practice. Combining the CMY inks together became expensive and certain papers were unable to absorb all the ink required to produce Black text. Since there was more Black text than color imagery, a four-color process evolved with the Cyan, Magenta, and Yellow color plates registered against the Key Black plate. Today, this is known as the CMYK printing model.

Transferring between RBY and CMYK color spaces:

The physical transfer between RGB and CMYK color spaces is far from perfect. Colors in digital RGB space lose some of their vibrancy when transferred to printer CMYK space. A comparison of digital RGB space and traditional printer CMYK space is shown below.

Comparison of Color in RGB versus CMYK Color Spaces.

Comparison of Color in RGB versus CMYK Color Spaces.

To address some of these concerns, it is possible to add inks that match the original colors in RGB Space to the printing process. The Pantone Matching System (PMS) has evolved to support this situation. In a previous 2020 Nightingale writing, I discussed in detail how to address converting from digital (RGB) to traditional printing (CMYK) for data visualization.

As digital technologies for both display and printing have advanced in recent years, many print managers no longer recommend this conversion. This is because recent digital printing technologies, although still using CMYK-based inks and toners, have become more capable of reproducing the brighter and more intense colors found in RGB color space. A March/April 2023 article in Popular Mechanics on “Colorful, Accurate Inkjet Printers for Your Documents and Photos” reports the latest results.

Exploring the Red = Yellow + Magenta Combination:

As noted earlier, the secondary color Red is produced by combining Yellow and Magenta together in the CMYK color space. Working with pure hues and color hex codes, I can describe this as Red (FF0000) = Yellow (#FFFF00) + Magenta (FF00FF). For those unfamiliar with the concept, a color hex code is a hexadecimal way to represent a color in RGB format by combining amounts of Red, Green, and Blue to note that specific color. I show a visual representation of these concepts below. This illustration is a composite of a three color Red Yellow Magenta palette that I generated with the Coolrs app and my earlier diagram of the merger of Yellow and Magenta to produce Red in CMYK color space.

I show a visual representation of these concepts below.

A Closer Look at the Red (#FFFF00) = Yellow (#FFFF00) + Magenta (#FF00FF) relationship in Cyan Magenta Yellow Key Black (CMYK) color space.

A Closer Look at the Red (#FFFF00) = Yellow (#FFFF00) + Magenta (#FF00FF) relationship in Cyan Magenta Yellow Key Black (CMYK) color space.

Let’s explore this Red Yellow Magenta (RYM) combination as a three-class color scheme for data visualization.

Using Viz Palette to Examine RYM:

I can use the Viz Palette app to discover how my Red Yellow Magenta (RYM) color scheme might appear in potential data visualization examples. Elijah Meeks and Susie Lu built their freely available online app for this purpose. Below I show these results.

Entering the Red Yellow Magenta (RYM) color scheme into the Viz Palette app to examine how potential data visualization examples might appear.

Entering the Red Yellow Magenta (RYM) color scheme into the Viz Palette app to examine how potential data visualization examples might appear.

Entering the Red Yellow Magenta (RYM) color scheme into the Viz Palette app to examine how potential data visualization examples might appear.

To further explore Red Yellow Magenta as a color scheme for data visualization, I need to examine color deficiency issues. Now, let’s review and explore these concepts.

Examining Color Deficiencies:

As noted in my prior UX Collective and Nightingalewritings on color, humans have three types of photoreceptors or cones. Each is sensitive to different parts of the visual spectrum of light to facilitate rich color vision. A red cone deficiency is classified as Protanopia. A green cone deficiency is classified as Deuteranopia. A blue cone deficiency is classified as Tritanopia.

It is estimated that 99 percent of color blindness cases are related to red-green color deficiencies. Software is available that simulates color deficiencies. Specifically, the Viz Palette app can be used for Protanopia and Deuteranopia color deficiency evaluations of its data visualization examples. I show these results below.

Using Viz Palette to perform Protanopia and Deuteranopia color deficiency checks on the Red Yellow Magenta (RYM) data visualization examples. Individuals with Protanopia and Deuteranopia are likely to see a Green, Cream, Blue scheme rather than the intended Red Yellow Magenta (RYM) color scheme. These examples pass the color deficiency test since three colors can be distinguished.

Using Viz Palette to perform Protanopia and Deuteranopia color deficiency checks on the Red Yellow Magenta (RYM) data visualization examples. Individuals with Protanopia and Deuteranopia are likely to see a Green, Cream, Blue scheme rather than the intended Red Yellow Magenta (RYM) color scheme. These examples pass the color deficiency test since three colors can be distinguished.

The Viz Palette color deficiency checks indicate that individuals with Protanopia and Deuteranopia are unlikely to see the Red Yellow Magenta (RYM) color scheme and can clearly distinguish between each of the three colors in the color scheme. Individuals with Protanopia or Deuteranopia are likely to see a Green, Cream, and Blue color scheme that is very different from the intended Red Yellow Magenta (RYM) color scheme. Interestingly, the data in some ways might be more distinguishable for someone with these color deficiencies than for individuals with Normal Color Vision. The data stories being told might appear very different for Normal Color Vision and individuals with Protanopia and Deuteranopia.

Let’s take a closer look at the Viz Palette area chart example and perform more comprehensive color deficiency tests to include the Tritanopia color deficiency. I can do this using the online and freely available Color Blindness Simulator (Coblis) app. I show these results below.

Color Deficiency Checks, using Coblis, for the Red Yellow Magenta (RYM) Area Chart data visualization example from Viz Palette Here, Protanopia indicates loss of Red cone, Deuteranopia indicates loss of Green cone, and Tritanopia indicates loss of Blue cone. The data visualization passes color deficiency tests since individuals with color deficiencies can distinguish between the three colors in the data visualization.

Color Deficiency Checks, using Coblis, for the Red Yellow Magenta (RYM) Area Chart data visualization example from Viz Palette Here, Protanopia indicates loss of Red cone, Deuteranopia indicates loss of Green cone, and Tritanopia indicates loss of Blue cone. The data visualization passes color deficiency tests since individuals with color deficiencies can distinguish between the three colors in the data visualization.

In this analysis of the RYM area chart, it is possible to note that individuals with Protanopia and Deuteranopia are likely to see the same Green, Cream, and Blue combination as was previously indicated in the Viz Palette color deficiency tests.

The Tritanopia test presents a very different situation. Here, the color combination appears to be a Red monochromatic color harmony. As noted in a previous writing, a monochromatic color harmony combines one hue (a 100% saturated color) with various tints, tones, and shades of that hue to create a color scheme. The Red Yellow Magenta (RYM) area chart under Normal Color vision situations fails Tritanopia color deficiency tests and is viewed as a Red monochromatic color display of data for individuals with this color deficiency.

Concluding Remarks:

In this writing, I have discussed how Red is a secondary color for printing digital media and data visualizations. In Cyan Magenta Yellow and Key Black (CMYK) printer space, Yellow and Magenta combine to produce Red. I also noted that the transfer between RGB and CMYK color spaces is far from perfect. Traditionally, colors in RGB space have tended to lose some of their vibrancy when transferred to CMYK space. However, recent digital printing technologies, although still using CMYK-based inks and toners, have become more capable of reproducing the brighter and more intense colors found in RGB color space. I show an example of the Red Yellow Magenta color scheme printed with digital color printing technology below.

Example of Yellow and Magenta combining to produce Red in Cyan Magenta Yellow and Key Black (CMYK) printer space.

Example of Yellow and Magenta combining to produce Red in Cyan Magenta Yellow and Key Black (CMYK) printer space.

I also explored the Red Yellow Magenta color scheme and discovered that it yields surprising results in terms of color deficiency tests. For individuals with Protanopia, loss of Red cone, or Deuteranopia, loss of Green cone, the Red Yellow Magenta color scheme becomes a Green Cream and Blue color scheme. For individuals with Tritanopia, loss of Blue cone, the color combination appears to be a Red monochromatic color harmony. The Red Yellow Magenta color scheme tells different data stories to individuals with color deficiencies.

The Red Yellow Magenta color scheme tells different data stories to individuals with color deficiencies. Protanopia, loss of Red Cone, and Deuteranopia, loss of Green Cone, individuals see a Green Cream Blue color scheme. Tritanopia, loss of Blue Cone, individuals see a Red monochromatic color scheme.

The Red Yellow Magenta color scheme tells different data stories to individuals with color deficiencies. Protanopia, loss of Red Cone, and Deuteranopia, loss of Green Cone, individuals see a Green Cream Blue color scheme. Tritanopia, loss of Blue Cone, individuals see a Red monochromatic color scheme.

The process of colorizing data visualizations and graphic designs can produce surprising results. I have tried to share one of my findings here. You will likely make your discoveries while creating color schemes for your projects. For additional discussions on my approaches with various color suggestion tools, please see my prior articles for UX Collective and Nightingale as well as my 2016 book on “Applying Color Theory to Digital Media and Visualization” published by CRC Press.

About the Author:

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK