Leonardo

Adobe's contrast-first colour system generator, with an npm module behind it

Tier S · Best in classColor ToolGeneratorToolleonardocolor.io

(Visit leonardocolor.io ↗)(Docs)(Repository)

Leonardo generates colour swatches from a target contrast ratio instead of from a hex value, so a scale is defined by the accessibility outcome you want rather than by eye. It covers adaptive light and dark themes, perceptually balanced ramps in several colour spaces, sequential and diverging scales for data visualisation, colour-blind safety checks, and contrast checking that accounts for alpha. Output comes out as SVG, CSS custom properties, W3C-format design tokens, or as parameters for the @adobe/leonardo-contrast-colors npm module, which is the same engine the web app runs on. It is built for design-system owners who have to defend every value in the ramp.

Install

npm install @adobe/leonardo-contrast-colors

For an agent

This is the one colour tool in this set you can actually run in a build step: install @adobe/leonardo-contrast-colors and generate the ramp at token-build time, so light and dark themes stay pinned to the same contrast targets. Prefer it over tints.dev or uicolors when accessibility is a hard requirement or when you need diverging or sequential scales for charts. Watch out that Leonardo thinks in contrast ratios against a background, not in fixed 50-950 stops, so map its output onto Tailwind-style stop names yourself.

Why it is here. It inverts the normal workflow — you state the contrast you need and the colour follows — which is the only way a ramp survives a dark-mode port without a manual re-tune.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Open source
Framework: Vanilla JS
Styling: CSS custom properties
Distribution: Web app / online tool, npm package, GitHub repository
Platform: Web
Content type: Design tokens / theme files, Code
Agent readiness: Readable open source, Structured documentation, CLI installable
Accessibility: WCAG 2.x AA, WCAG 2.x AAA, Contrast checked
Maturity: Actively maintained
GitHub stars: 2,134
Package: @adobe/leonardo-contrast-colors

Notable for

contrast-ratio-driven scale generation
adaptive light and dark themes
sequential and diverging chart scales
W3C design-token export
same engine available on npm

Provenance

Verified 2026-08-16. HTTP 200. https://leonardocolor.io (fetched, feature and output list read), https://api.github.com/repos/adobe/leonardo (2134 stars, Apache-2.0, last push 2026-07-08), npm registry for @adobe/leonardo-contrast-colors (1.1.0, Apache-2.0), https://opensource.adobe.com/leonardo/ (200)

Also in Color

leonardocolor.ioTier S