Leonardo

Leonardo is an open source colour tool for building accessible colour systems for interfaces and data visualisation. It generates colour scales from target contrast ratios, so you do not have to check each step by hand.

Leonardo lets you create colour scales and themes, then check them with charts and 3D views. You can set a target contrast ratio and let the tool build each swatch to match it, or define swatches by target lightness. Themes can be exported as SVG files, CSS custom properties or design tokens, which helps engineers use the same values.

• Colour scales generated from target contrast ratios
• Adaptive themes for brightness and contrast
• Export as SVG, CSS custom properties or design tokens
• Colour blindness checks for palettes

Leonardo suits design system teams, accessibility-minded designers and front-end engineers who build themes. It is also used for data visualisation, where scales need to be perceptually even and easy to read.

Leonardo is open source under the Apache-2.0 licence, and its source is on GitHub. It also provides an npm module that can let end users adjust contrast, brightness and saturation in an app. The tool itself runs in the browser, and it is an Adobe open source project.