ColorKit vs Leonardo
ColorKit
colorkit.coLeonardo
leonardocolor.ioSide by side
| Figure | ColorKit | Leonardo |
|---|---|---|
| Price from | Free | Free |
| Free plan | Yes | Yes |
| Free trial | — | — |
| Open source | — | — |
| Web | Yes | Yes |
| API | — | Yes |
| Plans published | 1 | 1 |
| Spec score · Color Palette Generators | 8.4 (#3) | 7.5 (#16) |
| Audience | ColorKit says it is built for designers and artists. | The project describes its web application as a collaborative tool for designers and engineers building color scales for user interfaces. |
| Exports | The gradient maker offers CSS copying and export options including PNG download or code copying. | Themes and color scales can be downloaded as SVG files, and the tool offers Tableau XML and SVG exports for scales. |
| Purpose | ColorKit describes itself as a toolkit built for designers and artists, with color inspiration and tools for creating palettes. | Leonardo creates, manages, and shares accessible color systems for user interface design and data visualization. |
Plans
In their own words
ColorKit
ColorKit is a free web toolkit for designers and artists working with color palettes, gradients, and other design elements. Its palette generator offers AI prompts, style modes, color locking, and controls for hue, brightness, saturation, and temperature. Palettes can be exported as PNG, copied as CSV or an array, or shared by URL. The image palette tool extracts 2 to 10 colors, allows manual adjustment of color points, and can create a PNG collage; ColorKit says images used by this tool are never uploaded to its server. The gradient maker supports linear, radial, and conic gradients, adjustable color stops, AI generation, CSS copying, and image or code export, with up to eight stops per gradient. A contrast checker calculates text and background contrast ratios and can pick colors from an uploaded image or image URL. Other listed tools include a color picker, shade generator, SVG color changer, background maker, and color mixer. ColorKit is available on the web. Image palette extraction needs no signup; a free account is required to save palettes and gradients.
Leonardo
Leonardo is an open-source tool for creating, managing, and sharing accessible color systems for interface design and data visualization. Users can generate swatches from target contrast ratios or set target lightness, then adjust brightness, contrast, and saturation with adaptive themes. Sequential and diverging scales support data visualization. Accessibility tools can cycle through colorblind-safe palettes and compare color differences across color vision deficiency types, while charts and 3D models help evaluate themes. Themes and scales can be downloaded as SVG, and scales can also be exported as Tableau XML. Developer output includes parameters for @adobe/leonardo-contrast-colors, CSS custom properties, and design tokens. The related JavaScript package generates adaptive contrast-based colors and is installed with npm; its documentation includes vanilla JavaScript and React examples. The site also documents an MCP server for generating themes, checking contrast, converting colors, and creating palettes. The project is licensed under Apache V2 and has a free plan listed at free. One limitation is that generated contrast ratios can be slightly above requested values because RGB colors and color-space interpolation constrain exact results.