What is this tool?
Leonardo is a web-based color tool that generates and designs colors based on target contrast ratios. It functions as a support tool for building accessible (visibility- and color-vision-friendly) color schemes for design systems and data visualization, and for managing overall color systems for themes. It is fundamentally built on a color module that Adobe provides as open source.
Features
- Contrast ratio-based color generation…Automatically generates colors that match a specified target contrast ratio, producing palettes that meet accessibility standards (WCAG) requirements.
- Color theme design and management…Create and adjust color scales and overall theme structures to build accessible themes for design systems.
- Visual evaluation and export…Visually evaluate contrast between colors, color differences, and positions in color space, with export options as SVG or code (CSS custom properties, design tokens) as needed.
- Adaptive (dark/light) theme support…Generate color schemes that adapt to light mode and dark mode by adjusting brightness, saturation, and contrast.
How to use
- Set base colors…Specify the base color, background color, and target contrast ratio.
- Generate and adjust palettes…Review the automatically generated color swatches, and adjust the color space and ratios as needed.
- Export results…Export in your preferred format such as SVG, color code lists, CSS/JS/design tokens, and use them in your project.