Accessible color for design systems just got easier

Over two years ago, we released Leonardo: the first-of-its-kind contrast ratio based color generation tool. Since then, Leonardo has evolved as both a design and engineering tool for creating accessible color palettes for design systems.

Now, Leonardo has been improved to streamline the process of creating design systems color themes and color scales for data visualizations. With these updates to Leonardo, what would traditionally take hours of work can be done in minutes.

At a glance

When you first visit Leonardocolor.io, you will see a new home page with three primary work spaces: creating an adaptive color theme, creating color scales for data visualization, and the color toolbox.

The home page showcases key features of Leonardo and houses a page documenting the API for Leonardo’s javascript module @adobe/leonardo-contrast-colors. Links are included to additional articles, documentation, and the Github repository since Leonardo is still an Adobe open-source tool.

Adaptive theming

The new interface for creating your adaptive color theme is broken down into two tabs: Create and Use.

Creating your theme

The “Create” workspace is where you create your color theme, add and refine color scales, and define your lightness stops (or target contrast ratios). The first tab presents a preview of your output colors, which reflect the appearance of the generated UI kit (downloadable from share button).

Color scales and lightness stops

The left panel has tabs for creating your color scales or creating your lightness stops. Color scales can be added one-by-one, or extracted from an image. They are a representation of each color as a full scale of lightness, so that you can refine hue and saturation as a set of flexible rules. A detail view is launched for each color scale when selecting the “edit” button.

Lightness stops can be defined by a target contrast ratio (the contrast you desire the color to have against the background) or by lightness. It is more common to define colors by lightnesses, however the inputs are synchronized so you can alter one or the other. Regardless, Leonardo generates colors by contrast ratio, which enables you to modify your theme and still retain consistent contrast.

Options are available to distribute your swatches by contrast ratio or lightness. Distributing by lightness will provide a linear progression of lightness values for your theme colors.

Chromaticity

Chromaticity is the property of color independent of lightness. In this tab, you can evaluate the hue and saturation of every color in your theme. There you will see 2d charts for all three color channels. A color wheel provides harmony lines and interpolation paths for another view of your color’s relationships. The charts and color wheel can be toggled to display any of the supported color spaces in Leonardo by selecting the beaker icon in the header.

Lightness charts

The lightness charts tab provides helpful visualizations for evaluating the swatches in your theme by both lightness and contrast ratio. The charts can be shown as steps or a curve to help you evaluate the progression.

3d model

The 3d model tab provides you with an interactive model of your theme’s color scales. The model is created within the same analysis color space you’ve chosen to work within. Visualizations of the RGB gamut are shown alongside your model to provide insight into the geometry of the color space you are working within.

Color scale editor

When editing a color scale, you enter a detail view for closer evaluation of the scale. A lightness scale is presented at the top with dots indicating the location of your key colors. All key colors are automatically distributed evenly by their lightness to ensure the value scale is as perceptually uniform as possible. Along with existing interpolation color spaces, Leonardo now supports the polar version of CIECAM02-UCS (CAM02), OKLAB and OKLCH. There is also a smoothing option to help eliminate sharp transitions in color.

If you want to use any of your color scales as a gradient in your interface, there’s an option to download the scale as an SVG gradient, which can be copied and pasted into Xd.

Theme settings

This is where you can select any of your color scales to use as a background. System-wide updates can be applied to your theme, such as lightening or darkening your theme (helpful for creating dark mode in seconds), increasing or decreasing overall contrast, and even the ability to desaturate your theme.

Sharing your theme

At any time, you can copy the URL of your theme to share with team members, download a generated SVG UI kit or copy all the output color values. The SVG UI kit can be copied and pasted directly into Xd for immediate use.

Pro tip: Copy color values here, then open the Quantitative tab in the color scales workspace and paste them into the Source colors. Leonardo will help you find colorblind-safe combinations for your theme.

Using your theme

The “Use” workspace is for copying, or sharing the code output formats of your theme.

Code can be configured to output in a variety of color formats, which conform to the CSS color module level 4 specification, such as Hex, RGB, Lab, and LCh.

Outputs are available as javascript parameters (for @adobe/leonardo-contrast-colors), CSS properties, or Design Tokens. The design tokens output includes descriptions of each color swatch including its contrast ratio with the background color and any accessible usage notes for the color.

Major updates and features:

• Color wheel for harmony visualization
• Charts for entire theme
• Step and line charts for lightness and contrast
• Interactive 3d model for entire theme
• Extract colors from an image
• Interpolation smoothing
• Edit swatches by target ratio or target lightness
• Evenly distribute swatches by ratio or lightness
• Download image of the 3d model
• Download SVG gradient of each color scale
• Download SVG UI kit for entire theme
• Modify lightness, contrast, and saturation of entire theme color palette
• Output supports CSS Color Module Level 4 formats
• CSS property output
• W3C Design Tokens output
• Design token descriptions with contrast and usage guidelines
• Click-to-copy code outputs

Additional updates

Along with these updates, Leonardo has improved color comparison features in the Color toolbox. There, you can evaluate color contrast (including alpha transparency), and color difference for color vision deficiencies (aka “color blindnesses”). Colors are simulated in each type of color deficiency with a quantifiable difference (using DeltaE2000) to help evaluate how similar or different the colors will appear for various types of vision.

The color converter has been revamped to output every supported color space, including CMYK, XYZ, and closest Pantone equivalent. If working with a lot of colors, you can do a bulk conversion and download a CSV file of all your colors converted to any of the formats you desire.

Finally, an entire workspace has been added that is devoted solely to the creation of color scales for data visualization.

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.