Leonardo

What Is Leonardo?

Leonardo is an open-source color tool designed for crafting and managing accessible color systems in user interface design and data visualization. Developed by Adobe, it automates the generation of color palettes based on target contrast ratios, ensuring compliance with accessibility standards. As a free resource in the color-tools category, Leonardo fits into design workflows where designers and developers need to create inclusive, adaptive color schemes for web and application interfaces.

What Leonardo Does

• Generates color scales using specified contrast ratios against a shared background, producing accessible palettes ordered by perceptual lightness.
• Supports creation of multiple color scales simultaneously to build complete themes with adjustable brightness, contrast, and base colors.
• Provides a JavaScript npm module with functions like generateContrastColors, generateBaseScale, and generateAdaptiveTheme for programmatic color generation.
• Offers visualization tools including charts, 3D models, and color wheels to evaluate color themes and scales.
• Evaluates and generates colorblind-safe palettes by cycling through colors based on color vision deficiencies and minimum contrast requirements.
• Allows interpolation in color spaces such as CIECAM02 or LCH for perceptually uniform sequential and diverging scales.

How Leonardo Can Be Used

• Designers input key colors, target contrast ratios, and interpolation spaces to generate UI color scales, then preview them in light and dark modes or with simulated color vision deficiencies.
• Developers integrate the npm module into applications to enable end-user personalization, such as adjusting theme brightness or saturation while maintaining contrast ratios dynamically.
• Teams build adaptive themes for design systems by configuring multiple scales at once, exporting configurations for collaboration between designers and engineers.
• Users check color contrast with alpha transparency support or measure color differences across CVD types to refine palettes for data visualization.
• Framer users apply generated scales directly to variables and components via a plugin powered by Leonardo's contrast-based engine.

Who Is Leonardo For?

Leonardo serves designers building UI themes and color palettes that prioritize accessibility, developers implementing adaptive color systems in applications, and teams working on design systems like Adobe Spectrum. It suits projects requiring contrast-compliant colors for web interfaces, data viz, and inclusive user experiences across experience levels. Visit Leonardo at Visit Leonardo