Leonardo: an open source contrast-based color generator

Introducing Leonardo

Leonardo is an open source tool for creating adaptive color palettes; a custom color generator for creating colors based on target contrast ratio. Leonardo is delivered as a Javascript module (@adobe/leonardo-contrast-colors) with a web interface to aid in creating your color palette configurations, which can easily be shared with both designers and engineers. Simply put, Leonardo is for dynamic accessibility of your products.

Browser window showing Leonardo web app. Color and target contrast ratio inputs showing a generated color scale

Creating an adaptive color palette

You can start by visiting Leonardocolor.io and enter your “key colors”. These are a list of colors referenced to generate a color lightness scale (from black, to each key color, to white). Much like key frames, key colors are single points in which additional colors will be interpolated.

Input for key colors. Options clear, add bulk, add. Delete buttons next to key colors teal, purple, deep purple
Key colors placed along scale based on HSLuv lightness
Dropdown with color space interpolation options Lch, Lab, CIECAM02, HSL, HSLuv, HSV, and RGB
Example illustrating gradients generated by various color space interpolations. Gradients have unique appearances.
Interpolation through different color spaces produce different color scales
Target contrast ratio inputs show generated color swatch beside value for context.
Generated colors shown with hex value and recalculated contrast against the base color
Example of generated color applied to text and button. Color applied to text and to background (inverse).
Blue/Yellow curves charted in CIECAM02. Comparison shown with CIECAM02, HSL, and LCH interpolations
Chart showing contrast swatch distribution
Color scale with LAB interpolation shown in the CIECAM02 color space in interactive 3d model

Sharing your palette

Since design is a collaborative process, the configurations you make in the app are printed in the URL, making it easy to share your specific configurations with team members. Just copy and paste the URL and your team members will see what you see.

Browser window url displaying custom parameters
Output of function parameters for Leonardo javascript module highlighted. Copy button displayed above the output.
Engineers using Leonardo npm module can copy your parameters directly

Migrating to Leonardo

Creating color palettes for design systems is difficult on its own, and there’s no reason you should completely abandon your existing color palette. For that reason, Leonardo makes it easy to make your existing palette an adaptive palette.

Importing as swatch will create contrast swatches for each color entered
Example of Carbon Design System’s red palette generated by bulk entry

Reimagining inclusive design and color contrast

Leonardo allows you to rethink how to approach accessibility of color contrast in user interface design; putting the control in the hands of your end users and making accessibility dynamic.

Demo app using Leonardo for fully contrast-ratio-based theme and dynamic brightness & contrast controls

Creating a full contrast-based theme

This article walked you through how to create a single color scale using Leonardo. The tool has since been improved with the ability to create multiple scales at once, all referencing a common background color — in other words, you can now author an entire color theme in one place. Take a look at this article to find out how, or jump right in at https://leonardocolor.io/theme.html

Open source

Inclusive design affects us all, which is why it’s a high priority to make Leonardo an open source project. We want it to be easier for everyone to create accessible color palettes, and enable products to put accessibility and inclusive design in the hands of their end users.

Additional credits

Inspiration for Leonardo came from Lindsay Browne, Alan Wilson, and Johnny Hunter. Major thanks to Larry Davis for his invaluable contributions.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nate Baldwin

Nate Baldwin

Designer on Spectrum, @Adobe’s design system. Intensity curious about color, visual perception, and the systemization of design.