Atmos vs Leonardo
Atmos
atmos.styleLeonardo
leonardocolor.ioSide by side
| Figure | Atmos | Leonardo |
|---|---|---|
| Price from | — | Free |
| Free plan | — | Yes |
| Free trial | Yes | — |
| Open source | — | — |
| Web | Yes | Yes |
| API | — | Yes |
| Plans published | 2 | 1 |
| Spec score · Color Palette Generators | 7.9 (#8) | 7.5 (#16) |
| Purpose | Atmos is a color palette tool built with UI designers in mind. | Leonardo creates, manages, and shares accessible color systems for user interface design and data visualization. |
Plans
In their own words
Atmos
Atmos is a color-palette tool for UI designers, offered as a web app and extension. It includes a color generator, wheel, shade generator and playground for creating and refining palettes. The playground supports LCH and OKLCH color spaces with sRGB and Display P3 gamut limits. Its contrast checker covers APCA (WCAG 3) and WCAG 2. Users can save palettes, maintain a brand color library, work with print color and share palettes with teammates. Exports include SVG, Figma, CSS, JavaScript, JSON, Tailwind CSS, Style Dictionary, Design Tokens and Raw, with HEX, HSL, RGB, CMYK, LCH and OKLCH values. Atmos provides a Figma plugin; Pro adds palette syncing with Figma. The free plan allows one project, while Pro offers unlimited projects and all features. A 14-day trial needs no credit card but limits exports to SVG. Atmos is made by RBND studio.
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.