Color scales for data visualization in Leonardo
Creating custom color scales for data visualization can sometimes be a burden. With Leonardocolor.io, it just got a whole lot easier.
When you first visit Leonardo, choose the option for creating color scales for data visualization. You can learn more about the Adaptive color theme workspace here.
You will be launched into a workspace that is divided into three sections, corresponding with the three types of color scales used for data visualization: Sequential, Diverging, and Qualitative (aka “categorical”).
Sequential
This view is for creating a single or multi-hue sequential color scale. A minimum of two key colors are required to create a scale, however more colors can be added to refine how the hue and saturation changes along the scale. Key colors are automatically distributed by lightness along your scale to ensure a linear progression from dark to light.
Diverging
This view is for creating a diverging color scale. This view is similar to the sequential, except that it is divided by a start color scale, middle color and end color scale.
Sequential and diverging scale interpolation
Sequential and diverging scales can be interpolated in a variety of color spaces, including LAB, LCH, HSLuv, CAM02, OKLAB, and OKLCH. Different color space interpolation affects the appearance of your scale. There is no right or wrong here; choose the option that provides the best appearance for what you are trying to accomplish.
An option for smoothing is available when you have more than two key colors. This applies a curve to the interpolation path and can sometimes enhance the appearance of your scale, such as eliminating sharp changes in hue or saturation.
Qualitative
This view is for creating a color-vision-deficiency (CVD) safe color palette for qualitative (aka categorical) data visualizations. The color scale relies on a list of source colors to choose from, and sample colors are available by default. This is especially beneficial if you’re working with a design system or pre-existing color palette. Leonardo will auto-generate random combinations that are CVD-safe for you to select from.
The configuration panel has constraints for color difference (DeltaE) and WCAG compliance (3:1/4.5:1) at your control. Altering the color difference will ensure Leonardo shows you colors that are more visually different than one another. The WCAG compliant switch will only show colors that meet WCAG 1.4.11. Compliance level (AA or AAA) and background color can be selected in the header.
You are also able to select which color vision deficiencies to support: Protan, Tritan, Deutan, and Achromatopsia.
Simulated colors
Although the colors are quantifiably analyzed as being “safe” based on your constraints, Leonardo also provides color simulations. The simulated colors are reordered based on visual similarity, so that you can more easily compare and contrast possible conflicts. A small offset swatch is displayed below each simulation to show the non-simulated color value. This provides context for identifying which color values are similar to one another for each color vision deficiency.
Key features:
- Delta-E 2000 threshold sensitivity slider
- Constrain to only colors that meet contrast criteria
- Select CVD types to support
- Color wheel for palette harmony visualization
- Generates CVD-safe color combinations
- Simulations ordered by similarity for qualitative evaluation
Core features for data visualization scales
Sequential, diverging, and qualitative workspaces have some common, core features to help in your workflow.
Contextual visualizations
As you modify your color scale, visualizations are updated to give a preview of how the colors would appear in data visualizations.
Charts for analyzing color
For advanced users, Leonardo offers charts of the color scale’s properties in a variety of color spaces. This is helpful for evaluating the balance or rate of change in hue and saturation.
3d Model of color scales
Sequential and diverging scales include an interactive 3d model of your color scale. These can be displayed in any supported color space and is helpful in evaluating the rate of change in hue and saturation in perceptually uniform color spaces.
Accessibility auditing
Sequential and diverging scales have additional information regarding the comparative analysis of colors relative to accessibility. Start, middle, or end colors are evaluated against one another and against the background for contrast and color difference.
Output configurations
Sequential and diverging scales can be “binned” based on a quantity of colors you want from the scale. Formatting options are available for CSS Color Module Level 4 formats, and an option is available to wrap color codes in quotes if you need. These colors are previewed and output below.
Pro tip: When using data visualization libraries, create a custom interpolator with your unique scale by providing a large list of color values. Large amounts of color values will ensure the visualization library accurately replicates colors on your scale, even when interpolating in other color spaces.
Exporting colors
Colors can be downloaded as a pre-formatted XML file for use in Tableau, or you can download an SVG file with rectangles of your specified colors. The SVG file can be copied and pasted directly into Xd for use in design. Sequential and diverging scales also offer an option to download the SVG gradient of your color scale. This gradient is a high-fidelity gradient so that you can accurately use the gradient elsewhere in design.
Final thoughts
Leonardo is an Adobe open-source tool. If you find issues or want to improve any aspect of Leonardo, you can submit an issue — or better yet, you can submit a pull request! We are continually looking for ways to improve Leonardo, and would love to hear from you.
