Leonardo
Adobe's contrast-first colour system generator, with an npm module behind it
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.
npm install @adobe/leonardo-contrast-colorsThis 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.
- contrast-ratio-driven scale generation
- adaptive light and dark themes
- sequential and diverging chart scales
- W3C design-token export
- same engine available on npm
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)
