Leonardo

Leonardo is a web-based tool for creating, managing, and sharing color systems. It is specifically built for designing user interfaces and data visualizations with a strong focus on accessibility. You can use it to generate complete color themes where swatches are created based on target contrast ratios, which removes the need for manual accessibility checks. It also creates adaptive themes, letting you adjust brightness, contrast, and saturation to produce light and dark modes quickly.

What makes Leonardo stand out is its precision and depth. It works in different color spaces to create perceptually balanced scales, offers advanced controls for colorblind-safe palettes, and provides unique analysis views like 3D models of your color theme. You can export your work as SVG files for design tools or as developer-ready outputs like CSS custom properties and W3C-standard design tokens. It is also an open-source project from Adobe, which means its development is transparent and community-influenced.

This tool is most useful for design and development teams working on digital products. UI/UX designers can use it to establish a reliable, accessible color foundation. Front-end developers can integrate the generated tokens directly into their code. Data visualization specialists benefit from the tools for creating sequential and diverging color scales that are both visually effective and accessible to all users.