What it does
Leonardo creates adaptive interface themes and colour scales for data visualisation. It provides contrast, lightness and saturation controls, with analysis charts and exports for design tools and code.
Add a colour scale and select a background, then define the contrast or lightness stops the interface needs. Adjust the theme’s overall lightness, contrast and saturation to compare different viewing preferences. The theme screen also includes colour-vision and minimum colour-difference checks.
Under Use, copy CSS properties or design tokens. Share provides a theme URL, colour values and a downloadable SVG UI kit, a set of vector swatches for design software.
For an adaptive application, install @adobe/leonardo-contrast-colors. Create named colours and one background, pass them into a Theme, then read generated values as structured data. The JavaScript API, its programming interface, also lets an application change brightness or contrast later.
The generated ratio can be slightly above its target because discrete RGB values cannot represent every exact ratio. Leonardo’s code is licensed under Apache 2.0.
Strengths
- Sequential and diverging scales support chart and map colour work as well as interface themes.
Watch out for
- A requested contrast ratio may not be reproduced exactly in RGB.
Best for
- Design systems that need adjustable light and dark themes
Sources
- Leonardo colour tools (Oct 27, 2026)
- Leonardo adaptive colour theme (Oct 27, 2026)
- Leonardo JavaScript API (Oct 27, 2026)