Leonardo
What it is
Leonardo is an open-source color tool for creating, managing, and sharing accessible color systems for interface design and data visualization. It is available as a web application and API, with a JavaScript package for generating adaptive contrast-based colors. Build swatches from target contrast ratios or set a target lightness; adaptive themes let you adjust brightness, contrast, and saturation. For data displays, Leonardo provides sequential and diverging color scales. Accessibility tools cycle through colors for colorblind-safe palettes and compare color differences across types of color vision deficiency. Charts and 3D models in the web application help evaluate themes. Download themes and scales as SVG, or export scales as Tableau XML. Theme output can include parameters for @adobe/leonardo-contrast-colors, CSS custom properties, and design tokens; the package documentation includes vanilla JavaScript and React examples. The site also documents an MCP server for generating themes, checking contrast, converting colors, and creating palettes. Leonardo supports image color extraction, accessibility checks, print color, and exports including SVG, Tableau XML, CSS, JavaScript, design tokens, and CSV. It is free, with an Apache V2 license. Generated contrast ratios can land slightly above the target because RGB color availability and color-space interpolation constrain exact values.
For and against
For
- Creates swatches from target contrast ratios or lightness.
- Adaptive themes adjust brightness, contrast, and saturation.
- Includes sequential and diverging data visualization scales.
- Exports themes and scales in multiple formats.
- Open source and free to use.
Against
- Generated contrast ratios may slightly exceed the requested ratio.
- The described application focuses on color systems and scales.
Who it suits
Leonardo suits designers and engineers building color scales for user interfaces, as well as people preparing color scales for data visualization. It is useful when you need contrast-oriented swatches, accessibility checks, or developer-ready theme output.
Getting started
- Open https://leonardocolor.io/ in a browser.
- Use the web application to create or evaluate color themes.
- Install the @adobe/leonardo-contrast-colors package with npm for JavaScript use.
- Use the package documentation's vanilla JavaScript or React examples as a starting point.
The verdict
Choose Leonardo if you need to create and evaluate accessible color systems for interfaces or data visualization, with exports for design and development workflows. Look elsewhere if you need a broader design or image-editing workflow beyond its color-focused tools.
Questions
Is Leonardo free?
Yes. The listed Free / open source plan costs nothing.
Is Leonardo open source?
Yes. The project is licensed under Apache V2.
What platforms does it support?
The listed platforms are web and API. A JavaScript package is installed with npm.
What can Leonardo export?
Listed formats include SVG, Tableau XML, CSS, JavaScript, design tokens, and CSV.
Can it check color accessibility?
Yes. It can cycle through colors for colorblind-safe palettes and compare color differences across color vision deficiency types.
Can it create data visualization scales?
Yes. It offers sequential and diverging color scales.
Facts on the record
- Adaptive themes
- Adaptive themes let users adjust brightness, contrast, and saturation.leonardocolor.io · read 9 Oct 2026
- AI tooling
- The site documents an MCP server with tools to generate themes, check contrast, convert colors, and create palettes.leonardocolor.io · read 9 Oct 2026
- Audience
- The project describes its web application as a collaborative tool for designers and engineers building color scales for user interfaces.github.com · read 9 Oct 2026
- Color accessibility
- The tools can cycle through colors for colorblind safe palettes and compare color difference across color vision deficiency types.leonardocolor.io · read 9 Oct 2026
- Color analysis
- The web application includes charts and 3D models for evaluating color themes.leonardocolor.io · read 9 Oct 2026
- Contrast based colors
- It generates color swatches from target contrast ratios and also lets users define swatches by target lightness.leonardocolor.io · read 9 Oct 2026
- Data visualization
- Leonardo offers sequential and diverging color scales for data visualization.leonardocolor.io · read 9 Oct 2026
- Developer output
- Theme output includes parameters for @adobe/leonardo-contrast-colors, CSS custom properties, and design tokens.leonardocolor.io · read 9 Oct 2026
- Exports
- Themes and color scales can be downloaded as SVG files, and the tool offers Tableau XML and SVG exports for scales.leonardocolor.io · read 9 Oct 2026
- Integrations
- The package documentation includes examples for vanilla JavaScript and React, and the homepage says its output can be copied into design tools.leonardocolor.io · read 9 Oct 2026
- JavaScript package
- The @adobe/leonardo-contrast-colors package can generate adaptive contrast-based colors and is installed with npm.leonardocolor.io · read 9 Oct 2026
- License
- The project is licensed under Apache V2.github.com · read 9 Oct 2026
- Limit
- Generated contrast ratios may be slightly higher than the requested ratio because available RGB colors and color space interpolation constrain exact values.leonardocolor.io · read 9 Oct 2026
- Purpose
- Leonardo creates, manages, and shares accessible color systems for user interface design and data visualization.leonardocolor.io · read 9 Oct 2026