The Generative AI Blues: Choosing Data Color Schemes with Adobe’s Firefly

In this writing, I discuss how to use Adobe Firefly, a creative generative AI model, to explore data color scheme choices. I do this by prompting the trained AI model for color schemes and then evaluate the results. Adobe Firefly is currently in Beta and its features are freely available upon applying and being accepted to their Beta access program. I will walk through the technical process, explain the color theory at work, and how to apply the color scheme to my five-step process of colorizing a data visualization, which I have highlighted in previous Nightingale writings.

Let’s begin by exploring some general details about what currently exists with Adobe Firefly.

What is Adobe Firefly?

Adobe Firefly is a Beta software collection of Generative Artificially Intelligent (AI) models for building artistic content. The online version is capable of providing creative images from text commands that you provide, referred to as “prompts.” Adobe requires that you apply to be part of the Adobe Firefly Beta program for online access. I was accepted in a few days, although others have noted longer time frames. Once accepted, you login by either creating an account or using your Google or Facebook credentials. 

There are detailed reviews of the Adobe Firefly collection focused on creating generative artwork. One of the tools is a “Generative recolor” app that re-colorizes vector artwork from a text description. Below is an illustration of the Adobe Firefly interface and a detail of the “Generative recolor” tool.

I am going to discuss how the “Generative recolor” app can be adapted to explore color scheme options in your data visualizations. The first step is to convert an image from your data visualization work to a Scalable Vector Graphics (SVG) file. 

Creating a Scalable Vector Graphics (SVG) File

Let’s get started with a test Grayscale image for colorization. If you do not have a Grayscale example, an existing colorized image can also be re-colorized. Below I show my test data visualization example that is in Portable Network Graphic (PNG) raster image format. 

My next step is to convert this Bar Chart PNG visualization into a Scalable Vector Graphics (SVG) file. There are several free utilities for converting an image to an SVG file. I am going to use the free Adobe Express utility since the resulting Adobe Express SVG file is likely to easily transition into Adobe Firefly’s “Generative recolor” app. Below, I show the flow chart of converting my Bar Chart PNG visualization to an SVG file.

Generating Initial Color Schemes with Firefly

With my Bar Chart Visualization in SVG format, I can now create some initial re-colorized images with Adobe Firefly. My first step is to select the “Generative recolor” app from the main Adobe Firefly web page. I am then transferred to another screen that asks me to upload my SVG file. I then upload my Bar Chart SVG file. Next, I am asked to “Describe the color palette you want to generate (English Only)”. I type “Blue Color Scheme” and select the “Generate” button to obtain four preliminary options. Below, I show a flow chart of my efforts with the four initial results.

I select the option in the lower right-hand corner as my possible “Firefly Blues scheme” and download the associated SVG file for further efforts. I show these results below.

Exploring the Generative Recolor Complementary and Analogous Harmony options

The “Generative recolor” app provided the initial four “Blue Color Scheme” concepts by using the “Default” option under the Harmony menu. I decided to test the “Complementary” and “Analogous” options. Currently, Adobe Firefly assumes that you understand these fundamentals of Color Harmony and only provides the text words of “Complementary” and “Analogous” for you to select. This can be mysterious to someone unfamiliar with these concepts. To help resolve this challenge, I describe some basics of Color Harmony below. 

Color Harmony is the process of choosing colors on a color wheel that work well together in the composition of an image. Like concepts in music, these harmonies are based around color combinations on the color wheel that help to provide common guidelines for how color hues will work together. The Red-Green-Blue (RGB) 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. A complementary color harmony consists of two colors that oppose each other on the color wheel. An analogous color harmony refers to colors that are adjacent to each other on the color wheel. I show examples of complementary and analogous color harmonies on the RGB color wheel below. These examples are in the Key of Blue to correspond to my “Blue Color Scheme” efforts.

Using the Generative Recolor App with Complementary Color Harmony:

Let’s examine the color suggestions that Adobe Firefly’s “Generative recolor” app provides for the “Blue Color Scheme” text with the “Complementary” color harmony option selected. Below, I show these results with my “Complementary” color harmony diagram included for reference. 

Notice that the upper left and lower left color suggestions are not “Complementary” color harmony examples, so I have put an X through these options. The upper right and the lower right examples are “Complementary” suggestions, but I prefer the notion of light and dark Blues for my bar chart visualization efforts. The Blues represent a single family with the contrast of dark Blue for Region 1 and light Blue for Region 4. 

Using the Generative Recolor App with Analogous Color Harmony:

Now, let’s examine the color suggestions that Adobe Firefly’s “Generative recolor” app provides for the “Blue Color Scheme” text with the “Analogous” color harmony option selected. Below, I show these results with my “Analogous” color harmony diagram included for reference. 

The upper right and the lower left are not Analogous color harmony examples, so I have put an X through these options. The upper left and the lower right examples are Analogous suggestions, but I prefer the original “Default” Dark and Light Blue option for my bar chart visualization efforts. This original option is actually a very narrow Analogous color harmony. I show this option below with a color wheel provided by my Adobe Color analysis of the Dark and Light Blues. Later on in this writing, I will describe how to use the free Adobe Color app to analyze this color scheme. I also include my Analogous color harmony diagram for additional reference.

The next step is to use my five-stage colorization process to apply the Firefly Blues color scheme to the actual data visualization.

My Process of Colorizing a Data VisualizatioN

In a previous Nightingale writing, I defined a five-stage process for colorizing a data visualization. The ring diagram of this process is shown above. The five steps are:

1. Establish data classes for visualization and key color for visualization.
2. Select color rule, color harmony per criteria of your data.
3. Build color scheme. A color suggestion tool might be helpful.
4. Check and revise due to color deficiency, contrasts, or any pre-existing conditions.
5. Apply color scheme to data visualization. Some modifications might result.

Let’s follow this process to apply my Firefly Blues data color scheme to the Bar Chart Visualization.

1. Establish data classes for visualization and key color for visualization.

For my example, I have sales data for two regions (Region 1 and Region 4) for a four-year period (2019 – 2022). This results in a two-class data color scheme. I am using a stacked bar chart that shows Region 1 and Region 4 data combined.

2. Select color rule, color harmony per criteria of your data.

I will be using the Firefly Blues Scheme that I liked from the initial “Default” options that Adobe Firefly provided me. 

3. Build color scheme. A color suggestion tool might be helpful.

The next challenge is to determine the specific “Blues” that Adobe Firefly noted. In working with digital color, it is helpful to know the Hex code that corresponds to each color. 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 can find these color Hex codes by using the freely available Adobe Color app (http://color.adobe.com). I enter a snapshot (PNG image) of my original Firefly Blues Scheme into Adobe Color’s “Extract Theme” option. Once the Firefly Blues Scheme is entered into Adobe Color, I reposition the five color sensors to focus on the two Blue colors. The two resulting Hex codes are #3F69AD for the darker Blue and #7AB8FE for the lighter Blue. I show a workflow of this process below. 

I show the color swatches, taken from the Adobe Color app, of my Firefly Blues Scheme below.

4. Check and revise due to color deficiency, contrasts, or any pre-existing conditions.

As noted in my prior Nightingale writings 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. Software is available that simulates color deficiencies. The Color Blindness Simulator (Coblis) tool is a freely available online app that serves this purpose.

Let’s use Coblis to examine how my Firefly Blues Scheme appears under Protanopia, Deuteranopia and Tritanopia color deficiency tests. I show these results below.

The results of the color deficiency checks indicate that individuals with Protanopia and Deuteranopia are likely to see a Blue color scheme that resembles the Firefly Blues combination and can differentiate between each color. Individuals with Tritanopia are likely to view two Blue-Green colors that are in a similar color family to the original Firefly Blues scheme. As a result, my Firefly Blues two-class color scheme passes color deficiency tests. 

5. Apply color scheme to data visualization. Some modifications might result.

Now, let’s apply my Firefly Blues two-class color scheme to the final stacked bar chart that shows Region 1 and Region 4 data combined. I show these results below.

To be more confident in addressing color deficiency, I run the stacked bar chart through Coblis tests. These results are shown below. 

Like the earlier two-class color scheme analysis, individuals with Protanopia and Deuteranopia are likely to see a color scheme that resembles the Firefly Blues combination and can differentiate between each color. Individuals with Tritanopia are likely to view two Blue-Green colors that are in a similar color family to the original Firefly Blues scheme. The visualization passes color deficiency tests.

As a final step, let’s compare my original Adobe Firefly “Generative recolor” selection with the final bar chart visualization. My Firefly Blue two class color scheme was successfully applied to the bar chart data visualization.

Comparing my Firefly Blues solution to a ColorBrewer option

Let’s compare my Firefly Blues results with one from ColorBrewer, a non-AI color suggestion system for geographic and data visualization. ColorBrewer is a recognized collection of color maps based on the concepts of sequential, diverging, and qualitative data color schemes. 

• Sequential color schemes are designed for ordering numeric information where colors progress from low to high (or vice versa). 
• Diverging color schemes fuse two sequential color schemes, each with different hues, together with a shared neutral midpoint color. The intent is to focus on mid-range critical data values as well as extremes at both ends of the data range. 
• Qualitative color schemes are designed to imply no magnitude differences across the data set and are often used to color label maps. With ColorBrewer, a paired qualitative color scheme compares a set of light and dark colors for given hues. 

Below, I show a Paired Five Class Qualitative Data Color Scheme from ColorBrewer. I have removed the map lines and show the indicated Hex code for each color. As noted previously, color Hex codes are not case sensitive so #FFFFFF and #ffffff equally represents the color White. This color scheme shows the pairing of light and dark colors for the Blue hue as well as light and dark colors for the Green hue with a fifth Pink color. 

For my situation, I decided that I liked two distinct colors in the Blue family for my Firefly Blues Scheme. So, I want to compare my Firefly Blues results with the Paired Light and Dark Colors for the Blue hue of ColorBrewer’s Paired Five Class Qualitative Color Scheme. My first step in this comparison process is to use the light Blue (#a6cee3) and dark Blue (#1f78b4) colors from ColorBrewer to colorize my Bar Chart data visualization. I show these results below. 

The next step is to check for color deficiency for the Paired Light and Dark Blues ColorBrewer Scheme. ColorBrewer provides a question mark by its “color-blind friendly icon” with regard to the Paired Five Class Qualitative Color Scheme. So, I run the stacked bar chart with the Paired Light and Dark Blues scheme through Color Blindness Simulator – Coblis tests. The results are shown below.

Like the Firefly Blues Color Blindness Simulator (Coblis) analysis, individuals with Protanopia and Deuteranopia are likely to see a color scheme that resembles the Paired Light and Dark Blues ColorBrewer combination and can differentiate between each color. Individuals with Tritanopia are likely to view two Blue-Green colors that are in a similar color family to the original Paired Light and Dark Blues scheme. The visualization passes color deficiency tests.

Now, let’s compare the generative AI Firefly Blues and the Paired Light and Dark Blues ColorBrewer schemes with one another. The side-by-side results of applying the two colormaps to the stacked bar chart visualization are shown below. 

The generative AI Firefly Blues scheme compares well to the Paired Light and Dark Blues ColorBrewer solution. Let’s recall that Adobe Firefly’s “Generative recolor” app is designed for colorization of Scalar Vector Graphics (SVG) images or artwork. The generated solutions are not specifically designed for data visualization. ColorBrewer, on the other hand, is specifically focused on providing color advice for geographic maps and data analytics. For the color schemes to compare favorably is very promising for the use of Adobe Firefly’s “Generative recolor” app in data color scheme design. I was very pleased with my final Firefly Blues solution and thought it was more vivid than the Paired Light and Dark Blues ColorBrewer suggestion.

A Recap

In this writing, I have shown how to use Adobe Firefly, a Beta software collection of Generative Artificially Intelligent (AI) models, as a color suggestion tool for data visualization. Firefly’s “Generative recolor” app was specifically selected for this purpose. The “Generative recolor” app reads Scalar Vector Graphics (SVG) files. So, the process began with a static image (PNG file) of my data visualization that needed to be converted into a Scalar Vector Graphic (SVG) file. I chose a bar chart example that was in Grayscale format, but an existing colorized image can also be used. I then decided to use the free Adobe Express utility to convert my PNG file to SVG format, since the resulting Adobe Express SVG file was likely to easily transition into Adobe Firefly’s “Generative recolor” app.

Next, I entered my bar chart SVG file into Firefly’s “Generative recolor” app and was asked to “Describe the color palette you want to generate (English Only)”. I typed “Blue Color Scheme” and selected the generate button to obtain four preliminary options. The four-color schemes shown to me were based on the “Default” Color Harmony option and I selected the one I liked.

Color harmony is the process of choosing colors on a Color Wheel that work well together in the composition of an image. Firefly’s “Generative recolor” app is based on these concepts and assumes that you are familiar with the notion of Complementary, two colors that oppose each other on the Color Wheel, and Analogous, colors adjacent to each other on the Color Wheel. These can be mysterious concepts for those unfamiliar with color theory, so I defined and diagrammed these fundamentals. Next, I explored Complementary and Analogous color suggestions for my bar chart data visualization with Firefly’s “Generative recolor” app. 

I decided that I preferred my original “Default” Color Harmony option and realized that it was a narrow Analogous color harmony. I named my selected two class color scheme Firefly Blues. Finally, I stepped through my five stages of colorizing a data visualization to apply Firefly Blues to my bar chart data visualization. 

Conclusion

The process of colorizing data visualizations and graphic designs can produce fascinating and sometimes mysterious results. I have tried to share an approach to using Adobe’s Firefly creative generative AI model for data color scheme selection. You will likely make your discoveries while creating color schemes for your projects. 

I have compared my Firefly Blues color scheme to a Paired Light and Dark Blues ColorBrewer solution. I was thrilled to discover a favorable comparison between the two colormaps. It would be terrific if, in the future, the trained AI model automatically handled aspects of my colorization process. Supporting such features as identifying color Hex codes and checking for color deficiency would benefit recoloring images in general.
For additional discussions on my approaches with various color suggestion tools, please see my prior Nightingale writings as well as my 2016 book on “Applying Color Theory to Digital Media and Visualization” published by CRC Press.