Accessible color for design systems just got easier

Leonardo is an open-source color generation tool developed by Nate Baldwin that helps designers and developers create accessible and adaptive color palettes and themes for design systems. In the “Create” workspace, users can add and refine color scales, extract colors from images, define lightness stops, or target contrast ratios. New visualization options like color charts, a 3D model, and a color wheel help evaluate relationships between colors. These settings allow lightening, darkening, or modifying contrast of an entire palette.

The “Use” workspace provides code outputs of the color theme in formats like CSS, design tokens, and more. The production of design tokens includes contrast ratios and usage guidelines.

Other enhancements include color interpolation smoothing, distribution of swatches by lightness or contrast, downloadable SVG gradients, and UI kits. The color toolbox has improved comparison features for accessibility and color blindness simulation.